Fix: Karte position:fixed + Mobile-Sidebar CSS-Kaskade

- .map-full-layout: position:fixed statt absolute;inset:0 mit
  expliziten Offsets (header/nav/sidebar) — unabhängig von
  height-Kette, überdeckt Sidebar nicht mehr
- layout.css: Mobile Drawer-CSS nach Base-#sidebar-Regel verschoben
  (vorher: display:none hat gewonnen weil später im File)
- map.js: zweites invalidateSize() nach 600ms
- SW by-v28 → by-v29
This commit is contained in:
rene 2026-04-14 17:09:00 +02:00
parent e5bf841d45
commit 1c8ed88dac
4 changed files with 30 additions and 18 deletions

View file

@ -1565,9 +1565,20 @@ textarea.form-control {
ZENTRALE KARTE (map.js)
============================================================ */
.map-full-layout {
position: absolute;
inset: 0;
position: fixed;
top: calc(var(--header-height) + var(--safe-top));
left: 0;
right: 0;
bottom: calc(var(--nav-bottom-height) + var(--safe-bottom));
overflow: hidden;
z-index: 1;
}
@media (min-width: 768px) {
.map-full-layout {
top: 0;
left: var(--nav-sidebar-width);
bottom: 0;
}
}
.map-full {
width: 100%;

View file

@ -129,19 +129,6 @@
height: 100%;
}
/* Mobile Sidebar als Drawer */
@media (max-width: 767px) {
#sidebar {
display: flex;
z-index: 500;
transform: translateX(-100%);
transition: transform 0.28s ease;
}
#sidebar.open {
transform: translateX(0);
}
}
/* ------------------------------------------------------------
3. BOTTOM NAVIGATION (Mobile)
------------------------------------------------------------ */
@ -278,6 +265,19 @@
#sidebar { display: flex; }
}
/* Mobile Sidebar als Drawer — NACH den Base-Regeln, damit display:flex gewinnt */
@media (max-width: 767px) {
#sidebar {
display: flex;
z-index: 500;
transform: translateX(-100%);
transition: transform 0.28s ease;
}
#sidebar.open {
transform: translateX(0);
}
}
.sidebar-logo {
padding: var(--space-6) var(--space-5);
display: flex;

View file

@ -148,8 +148,9 @@ window.Page_map = (() => {
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 })
.addTo(_map);
// invalidateSize nach kurzer Verzögerung, damit der Browser das Layout abgeschlossen hat
setTimeout(() => _map.invalidateSize(), 150);
// invalidateSize zweimal: einmal früh, einmal nach möglichen Layout-Delays
setTimeout(() => _map.invalidateSize(), 100);
setTimeout(() => _map.invalidateSize(), 600);
window.addEventListener('resize', () => _map.invalidateSize());
}

View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications
============================================================ */
const CACHE_VERSION = 'by-v28';
const CACHE_VERSION = 'by-v29';
const CACHE_STATIC = `${CACHE_VERSION}-static`;
// Diese Dateien werden beim Install gecacht (App Shell)