lukas.uptmoor/webgis-lohne
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

pans map if popup behind header

Browse Source
This commit is contained in:
patrickzerhusen
2026-06-12 12:27:16 +02:00
parent 7be37bd30f
commit 9b84ff1367
2 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
public/js/app.js
View File

@@ -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);
}

4
public/styles.css
View File

@@ -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;
}