diff --git a/public/js/app.js b/public/js/app.js index 8e2a246..26c85b2 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -494,8 +494,8 @@ function bindFeaturePopup(feature, layer) { maxWidth: mobile ? 280 : 320, minWidth: mobile ? 200 : 240, maxHeight: mobile ? 280 : 400, - autoPanPaddingTopLeft: L.point(mobile ? 50 : 75, mobile ? 100 : 75), - autoPanPaddingBottomRight: L.point(mobile ? 50 : 75, mobile ? 50 : 75), + autoPanPaddingTopLeft: L.point(mobile ? 50 : 75, mobile ? 75 : 75), + autoPanPaddingBottomRight: L.point(mobile ? 60 : 85, mobile ? 50 : 75), className: 'contribution-popup' }; @@ -1182,6 +1182,23 @@ function deleteComment(commentId, contributionId) { }); } +// Pans Map if Popup behind Header +function recenterPopup() { + map.eachLayer(function (layer) { + if (layer.getPopup && layer.getPopup() && layer.isPopupOpen()) { + var popupEl = layer.getPopup().getElement(); + if (!popupEl) return; + var padding = window.innerWidth < 769 ? 75 : 75; + var popupTop = popupEl.getBoundingClientRect().top; + var mapTop = document.getElementById('map').getBoundingClientRect().top; + var diff = popupTop - mapTop - padding; + if (diff < 0) { + map.panBy([0, diff], { animate: true, duration: 0.3 }); + } + } + }); +} + // Toggles Photo Visibility in Popup and updates Popup Position function togglePhoto(contributionId) { const container = document.getElementById('photo-container-' + contributionId); @@ -1195,6 +1212,8 @@ function togglePhoto(contributionId) { container.style.display = 'none'; label.textContent = 'Foto anzeigen'; } + + setTimeout(recenterPopup, 150); } // Toggles Comments Section Visibility in Popup and updates Popup Position @@ -1214,6 +1233,8 @@ function toggleComments(contributionId) { toggle.classList.remove('fa-chevron-up'); toggle.classList.add('fa-chevron-down'); } + + setTimeout(recenterPopup, 150); } diff --git a/public/styles.css b/public/styles.css index 8ba80be..b0354e1 100644 --- a/public/styles.css +++ b/public/styles.css @@ -695,8 +695,6 @@ select.form-input { cursor: pointer; } } .popup-comments-list { - max-height: 150px; - overflow-y: auto; margin-top: var(--space-sm); } @@ -1361,7 +1359,7 @@ select.form-input { cursor: pointer; } Comments or Photos are toggled. --------------------------------------------------------- */ .leaflet-popup-content { - max-height: 33vh; + max-height: 50vh; max-width: 33vh; overflow-y: auto; }