Debug: Toast mit Sidebar computed styles

Fix: Sidebar/Backdrop aus #app raus, direkt in <body>
#sidebar und #sidebar-backdrop waren Kinder von #app (display:flex), was auf iOS Safari Stacking-Context-Probleme verursacht. Beide Elemente sind jetzt direkte Kinder von <body>. _openSidebar() zurueck zur sauberen .open-Klassen-Methode. will-change:transform entfernt. SW by-v32 -> by-v33.
2026-04-14 17:50:15 +02:00 · 2026-04-14 17:44:46 +02:00 · 2026-04-14 17:36:45 +02:00 · 2026-04-14 17:33:12 +02:00 · 2026-04-14 17:26:02 +02:00 · 2026-04-14 17:22:13 +02:00
7 changed files with 138 additions and 49 deletions
--- a/backend/main.py
+++ b/backend/main.py
@ -129,6 +129,49 @@ async def share_target(request: Request):
        headers={"Cache-Control": "no-cache"}
    )
 # Cache-Reset-Seite — löscht SW + Caches, leitet zur App weiter
@app.get("/update")
 async def force_update():
    from fastapi.responses import HTMLResponse
    html = """<!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ban Yaro — Aktualisieren</title>
  <style>
    body{font-family:-apple-system,sans-serif;display:flex;align-items:center;
         justify-content:center;min-height:100vh;margin:0;background:#faf8f5}
    .box{text-align:center;padding:2rem}
    h1{color:#C4843A;margin-bottom:.5rem}
    p{color:#666;margin-bottom:1.5rem}
    .sp{width:44px;height:44px;border:4px solid #eee;border-top-color:#C4843A;
        border-radius:50%;animation:s .8s linear infinite;margin:0 auto}
    @keyframes s{to{transform:rotate(360deg)}}
  </style>
 </head>
 <body>
  <div class="box">
    <h1>Ban Yaro</h1>
    <p>App wird aktualisiert&#8230;</p>
    <div class="sp"></div>
  </div>
  <script>
    (async () => {
      if ('serviceWorker' in navigator) {
        const regs = await navigator.serviceWorker.getRegistrations();
        await Promise.all(regs.map(r => r.unregister()));
      }
      const keys = await caches.keys();
      await Promise.all(keys.map(k => caches.delete(k)));
      window.location.replace('/');
    })();
  </script>
 </body>
 </html>"""
    return HTMLResponse(html, headers={"Cache-Control": "no-store"})
 # SPA Fallback — ALLE nicht-API-Routen gehen zur index.html
@app.get("/{full_path:path}")
 async def spa_fallback(full_path: str):
--- a/backend/static/css/components.css
+++ b/backend/static/css/components.css
@ -1565,9 +1565,20 @@ textarea.form-control {
   ZENTRALE KARTE (map.js)
   ============================================================ */
 .map-full-layout {
-  position: absolute;
+  position: fixed;
-  inset:    0;
+  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%;
--- a/backend/static/css/layout.css
+++ b/backend/static/css/layout.css
@ -118,17 +118,15 @@
  .sidebar-backdrop { display: none !important; }
 }
-/* Mobile Sidebar als Drawer */
+/* Karte: volle Höhe, kein Scrollen, kein Padding */
-@media (max-width: 767px) {
+#page-map {
-  #sidebar {
+  height:   100%;
-    display:   flex;
+  overflow: hidden;
-    z-index:   500;
+}
-    transform: translateX(-100%);
+#page-map > .page-body {
-    transition: transform 0.28s ease;
+  padding:  0 !important;
-  }
+  overflow: hidden;
-  #sidebar.open {
+  height:   100%;
    transform: translateX(0);
  }
 }
 /* ------------------------------------------------------------
@ -267,6 +265,30 @@
  #sidebar { display: flex; }
 }
 /* Mobile Sidebar als Drawer */
@media (max-width: 767px) {
  #sidebar {
    display:          flex !important; /* überschreibt display:none aus Base */
    position:         fixed;
    top:              0;
    left:             0;
    bottom:           0;
    width:            var(--nav-sidebar-width);
    z-index:          1000;            /* klar über Backdrop (999) */
    transform:        translateX(-100%);
    transition:       transform 0.28s ease;
    background:       var(--c-surface);
    box-shadow:       none;
  }
  #sidebar.open {
    transform:  translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
  }
  .sidebar-backdrop {
    z-index: 999; /* unter Sidebar, über Seiteninhalt */
  }
 }
 .sidebar-logo {
  padding:      var(--space-6) var(--space-5);
  display:      flex;
--- a/backend/static/index.html
+++ b/backend/static/index.html
@ -20,33 +20,17 @@
  <title>Ban Yaro</title>
-  <!-- CSS: Reihenfolge ist wichtig -->
+  <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
  <link rel="stylesheet" href="/css/design-system.css">
-  <link rel="stylesheet" href="/css/layout.css">
+  <link rel="stylesheet" href="/css/layout.css?v=32">
-  <link rel="stylesheet" href="/css/components.css">
+  <link rel="stylesheet" href="/css/components.css?v=32">
 </head>
 <body>
-<!-- ============================================================
+<!-- Backdrop + Sidebar direkt im body (kein Ancestor-Stacking-Context) -->
-     APP SHELL
+<div id="sidebar-backdrop" class="sidebar-backdrop"></div>
     ============================================================ -->
 <div id="app">
-  <!-- MOBILE HEADER (wird per JS mit Seitentitel befüllt) -->
+<nav id="sidebar" role="navigation" aria-label="Hauptnavigation">
  <header id="app-header">
    <button class="header-back hidden" id="header-back" aria-label="Zurück">&#8592;</button>
    <div id="header-dog-switcher" class="dog-switcher">
      <span class="header-title" id="header-title">Ban Yaro</span>
    </div>
    <div id="header-actions"></div>
    <button class="header-menu-btn" id="header-menu-btn" aria-label="Menü">☰</button>
  </header>
  <!-- Backdrop für mobile Sidebar-Drawer -->
  <div id="sidebar-backdrop" class="sidebar-backdrop"></div>
  <!-- DESKTOP SIDEBAR -->
  <nav id="sidebar" role="navigation" aria-label="Hauptnavigation">
    <div class="sidebar-logo" id="sidebar-dog-switcher">
      <img class="sidebar-logo-img" src="/icons/icon-180.png" alt="Ban Yaro">
      <span class="sidebar-logo-text">Ban Yaro</span>
@ -111,6 +95,21 @@
    </div>
  </nav>
 <!-- ============================================================
     APP SHELL
     ============================================================ -->
 <div id="app">
  <!-- MOBILE HEADER -->
  <header id="app-header">
    <button class="header-back hidden" id="header-back" aria-label="Zurück">&#8592;</button>
    <div id="header-dog-switcher" class="dog-switcher">
      <span class="header-title" id="header-title">Ban Yaro</span>
    </div>
    <div id="header-actions"></div>
    <button class="header-menu-btn" id="header-menu-btn" aria-label="Menü">☰</button>
  </header>
  <!-- HAUPT-INHALTSBEREICH -->
  <main id="page-content" role="main">
@ -215,9 +214,9 @@
 <div id="modal-container"></div>
 <!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
-<script src="/js/api.js"></script>
+<script src="/js/api.js?v=32"></script>
-<script src="/js/ui.js"></script>
+<script src="/js/ui.js?v=32"></script>
-<script src="/js/app.js"></script>
+<script src="/js/app.js?v=32"></script>
 <!-- Feature-Seiten werden lazy geladen -->
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@ -193,7 +193,11 @@ const App = (() => {
  }
  function _openSidebar() {
-    document.getElementById('sidebar')?.classList.add('open');
+    const s = document.getElementById('sidebar');
    if (!s) { UI.toast.error('sidebar: NULL'); return; }
    s.classList.add('open');
    const cs = getComputedStyle(s);
    UI.toast.info(`display:${cs.display} | transform:${cs.transform} | z:${cs.zIndex}`);
    document.getElementById('sidebar-backdrop')?.classList.add('visible');
  }
--- a/backend/static/js/pages/map.js
+++ b/backend/static/js/pages/map.js
@ -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
+    // invalidateSize zweimal: einmal früh, einmal nach möglichen Layout-Delays
-    setTimeout(() => _map.invalidateSize(), 150);
+    setTimeout(() => _map.invalidateSize(), 100);
    setTimeout(() => _map.invalidateSize(), 600);
    window.addEventListener('resize', () => _map.invalidateSize());
  }
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@ -3,12 +3,11 @@
   Offline-Cache + Push Notifications
   ============================================================ */
-const CACHE_VERSION = 'by-v27';
+const CACHE_VERSION = 'by-v33';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
-// Diese Dateien werden beim Install gecacht (App Shell)
+// index.html wird NICHT pre-gecacht (immer Network-First)
 const STATIC_ASSETS = [
  '/',
  '/css/design-system.css',
  '/css/layout.css',
  '/css/components.css',
@ -44,7 +43,7 @@ self.addEventListener('activate', event => {
 });
 // ----------------------------------------------------------
-// FETCH — Cache-First für statische Assets, Network-First für API
+// FETCH — Network-First für HTML, Cache-First für Assets, Network für API
 // ----------------------------------------------------------
 self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
@ -60,12 +59,25 @@ self.addEventListener('fetch', event => {
    return;
  }
  // Navigation (index.html): immer Network-First
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request)
        .then(response => {
          const clone = response.clone();
          caches.open(CACHE_STATIC).then(c => c.put(event.request, clone));
          return response;
        })
        .catch(() => caches.match('/'))
    );
    return;
  }
  // Statische Assets: Cache-First
  event.respondWith(
    caches.match(event.request)
      .then(cached => cached || fetch(event.request)
        .then(response => {
          // Erfolgreiche Responses für statische Assets cachen
          if (response.ok && event.request.method === 'GET') {
            const clone = response.clone();
            caches.open(CACHE_STATIC).then(c => c.put(event.request, clone));
@ -74,7 +86,6 @@ self.addEventListener('fetch', event => {
        })
      )
      .catch(() => {
        // Offline-Fallback: App Shell zurückgeben
        if (event.request.mode === 'navigate') {
          return caches.match('/');
        }
@ -136,7 +147,6 @@ self.addEventListener('notificationclick', event => {
  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true })
      .then(windowClients => {
        // Offenes Fenster fokussieren
        for (const client of windowClients) {
          if (client.url.includes(self.location.origin)) {
            client.focus();
@ -144,7 +154,6 @@ self.addEventListener('notificationclick', event => {
            return;
          }
        }
        // Neues Fenster öffnen
        return clients.openWindow(url);
      })
  );
Author	SHA1	Message	Date
rene	bf26e5faf4	Debug: Toast mit Sidebar computed styles	2026-04-14 17:50:15 +02:00
rene	d399cb84cf	Fix: Sidebar/Backdrop aus #app raus, direkt in <body> #sidebar und #sidebar-backdrop waren Kinder von #app (display:flex), was auf iOS Safari Stacking-Context-Probleme verursacht. Beide Elemente sind jetzt direkte Kinder von <body>. _openSidebar() zurueck zur sauberen .open-Klassen-Methode. will-change:transform entfernt. SW by-v32 -> by-v33.	2026-04-14 17:44:46 +02:00
rene	3b79efb82b	Fix: Sidebar transform:translateX(0) in Inline-Styles vergessen	2026-04-14 17:36:45 +02:00
rene	1c6ec6f17e	Fix: /update-Endpunkt zum manuellen SW-Cache-Reset + STATIC_ASSETS bereinigt /update loescht SW + alle Caches via JS und leitet zur App zurueck. Alter SW hat /update nie gecacht -> immer frisch vom Server. STATIC_ASSETS ohne ?v= (verhindert fehlerhafte cache.addAll()-Fehler).	2026-04-14 17:33:12 +02:00
rene	619ff559e6	Fix: SW Network-First für Navigation + versionierte CSS/JS-URLs (v=32) - sw.js: index.html nie aus Cache (navigation → network-first) - index.html: ?v=32 an layout.css, components.css, api/ui/app.js - sw.js STATIC_ASSETS: versionierte URLs gecacht - app.js: Sidebar-Background per getComputedStyle statt CSS-Variable-String - SW by-v31 → by-v32	2026-04-14 17:26:02 +02:00
rene	b6fae96334	Fix: Sidebar via JS-Inline-Styles (SW-Cache-unabhängig) + SW force-navigate _openSidebar() setzt nun direkt style.cssText statt CSS-Klassen, damit stale CSS-Cache keinen Einfluss hat. SW by-v30 → by-v31 mit clients.navigate() im activate-Handler für automatischen Reload.	2026-04-14 17:22:13 +02:00
rene	40b802ae86	Fix: Mobile Sidebar z-index 1000 + display:flex !important Backdrop lag bei z-index 499 über der Sidebar (z-index 300 Base). Sidebar bekommt auf Mobile z-index:1000, display:flex !important und will-change:transform. SW by-v29 → by-v30.	2026-04-14 17:16:54 +02:00
rene	1c8ed88dac	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	2026-04-14 17:09:00 +02:00
rene	e5bf841d45	Fix: Karte-Seite erhält definite Höhe für Leaflet-Tiles #page-map bekommt height:100% (statt min-height), damit .page-body und .map-full-layout eine auflösbare Höhe haben. SW by-v27 → by-v28.	2026-04-14 17:02:03 +02:00