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

fixed popup auto-position with padding

Browse Source
This commit is contained in:
patrickzerhusen
2026-06-11 17:10:19 +02:00
parent 38c48861a9
commit 2039f5d03d
2 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
public/js/app.js
View File

@@ -488,11 +488,25 @@ function buildPopupHtml(feature) {
function bindFeaturePopup(feature, layer) { function bindFeaturePopup(feature, layer) {
const cat = CATEGORIES[feature.properties.category] || CATEGORIES.other; const cat = CATEGORIES[feature.properties.category] || CATEGORIES.other;
// Dynamic Popup — rebuilt every Time the Popup opens // Popup Options — Mobile narrower with Header/Footer Padding
layer.bindPopup(function () { return buildPopupHtml(feature); }, { maxWidth: 320, minWidth: 240 }); var mobile = window.innerWidth < 769;
var opts = {
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),
className: 'contribution-popup'
};
// Loads Comments when Popup opens // Dynamic Popup — rebuilt every Time the Popup opens
layer.bindPopup(function () { return buildPopupHtml(feature); }, opts);
// Closes Sidebar on Mobile and loads Comments when Popup opens
layer.on('popupopen', function () { layer.on('popupopen', function () {
if (window.innerWidth < 769) {
sidebar.close();
}
loadComments(feature.properties.contribution_id); loadComments(feature.properties.contribution_id);
}); });
@@ -1168,7 +1182,7 @@ function deleteComment(commentId, contributionId) {
}); });
} }
// Toggles Photo Visibility in Popup // Toggles Photo Visibility in Popup and updates Popup Position
function togglePhoto(contributionId) { function togglePhoto(contributionId) {
const container = document.getElementById('photo-container-' + contributionId); const container = document.getElementById('photo-container-' + contributionId);
const label = document.getElementById('photo-label-' + contributionId); const label = document.getElementById('photo-label-' + contributionId);
@@ -1183,7 +1197,7 @@ function togglePhoto(contributionId) {
} }
} }
// Toggles Comments Section Visibility in Popup // Toggles Comments Section Visibility in Popup and updates Popup Position
function toggleComments(contributionId) { function toggleComments(contributionId) {
const section = document.getElementById('comments-section-' + contributionId); const section = document.getElementById('comments-section-' + contributionId);
const toggle = document.getElementById('comments-toggle-' + contributionId); const toggle = document.getElementById('comments-toggle-' + contributionId);

14
public/styles.css
View File

@@ -1353,4 +1353,16 @@ select.form-input { cursor: pointer; }
@media (min-width: 769px) { @media (min-width: 769px) {
:root { --map-side-padding: 8px; } :root { --map-side-padding: 8px; }
} }
/* ---------------------------------------------------------
6.3 Popup Content Height Limit on Mobile
Prevents Popup from growing beyond Screen when
Comments or Photos are toggled.
--------------------------------------------------------- */
.leaflet-popup-content {
max-height: 33vh;
max-width: 33vh;
overflow-y: auto;
}