Fix: Toolbar-Buttons kollidierten mit Karten-Zoom-Regler

Alle sieben Aktions-Buttons (Standort, Ausflugsziel anlegen, KI-Prompt-Generator, Import, Backup) lagen bislang als absolut positionierte Toolbar oben links ueber der Karte - direkt dort, wo Leaflet standardmaessig seinen Zoom-Regler platziert, wodurch sich beides ueberschnitt. Auf dem Smartphone nahm die Toolbar zudem viel Platz auf der Karte weg. Die Buttons sind jetzt in einem aufklappbaren Hamburger-Menue im Header (js/main.js: setupMenuToggle(), schliesst bei Aktion/Escape/Klick ausserhalb) statt direkt auf der Karte. Der Zoom-Regler wurde zusaetzlich auf oben rechts verschoben (js/map/mapController.js), damit oben links dauerhaft Platz fuer eigene Overlays (z.B. map-picking-hint) bleibt. App-Shell auf Flexbox umgestellt (body als Flex-Spalte, .app-layout mit flex:1) statt des bisherigen calc(100vh - fixe Header-Hoehe) auf Desktop, da der Header jetzt bei geoeffnetem Menue waechst - die alte fixe Berechnung haette Karte/Liste dabei abgeschnitten. --header-height war dadurch ueberfluessig und wurde entfernt.
2026-07-24 13:35:35 +02:00
parent 374ab4b789
commit 00a00b3b95
6 changed files with 152 additions and 44 deletions
@@ -1,16 +1,33 @@
 /* Grundlegendes App-Layout: Header + Karte/Liste. Mobile-first;
-   Desktop-Anpassungen (>=1024px) siehe css/responsive.css. */
+   Desktop-Anpassungen (>=1024px) siehe css/responsive.css.

-.app-header {
-  height: var(--header-height);
+   body ist ein Flex-Container (Header + app-status + app-layout
+   untereinander). app-layout bekommt flex:1 und füllt damit immer den
+   verbleibenden Platz - unabhängig davon, wie hoch der Header gerade ist.
+   Das ist bewusst kein fixes calc(100vh - Header-Höhe) mehr, da der Header
+   jetzt wächst, sobald das Aktionen-Menü (.app-menu) geöffnet ist. */
+
+body {
  display: flex;
  flex-direction: column;
-  justify-content: center;
-  padding: 0 var(--space-lg);
+  min-height: 100vh;
+}
+
+.app-header {
+  flex-shrink: 0;
+  padding: var(--space-sm) var(--space-lg);
  background: var(--color-primary);
  color: #fff;
 }

+.app-header__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+  min-height: 48px;
+}
+
 .app-header__title {
  font-size: 1.4rem;
  font-weight: 700;
@@ -21,7 +38,36 @@
  opacity: 0.9;
 }

+.app-header__menu-toggle {
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  font-size: 1.3rem;
+  line-height: 1;
+}
+
+.app-header__menu-toggle[aria-expanded="true"] {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.app-menu {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  padding-top: var(--space-md);
+}
+
+.app-menu[hidden] {
+  display: none;
+}
+
 .app-layout {
+  flex: 1;
+  min-height: 0;
  display: flex;
  flex-direction: column;
 }
@@ -34,16 +80,6 @@
  flex-direction: column;
 }

-.map-panel__toolbar {
-  position: absolute;
-  top: var(--space-sm);
-  left: var(--space-sm);
-  z-index: 1000;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-sm);
-}
-
 .map-panel__map {
  flex: 1;
  width: 100%;
@@ -57,7 +93,7 @@

 .map-picking-hint {
  position: absolute;
-  top: calc(var(--space-sm) + 40px);
+  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1000;
  display: flex;
@@ -8,7 +8,9 @@
    grid-template-areas:
      'map filter'
      'map list';
-    height: calc(100vh - var(--header-height));
+    /* Höhe ergibt sich aus flex:1 auf .app-layout (siehe css/layout.css) -
+       damit passt sich die Höhe automatisch an, egal ob der Header gerade
+       durch ein geöffnetes Menü höher ist. */
  }

  .map-panel {
@@ -42,5 +42,4 @@

  /* Layout */
  --breakpoint-desktop: 1024px;
-  --header-height: 64px;
 }
@@ -23,25 +23,24 @@
 </head>
 <body>
  <header class="app-header">
+    <div class="app-header__row">
+      <div>
        <h1 class="app-header__title">EventMap</h1>
        <p class="app-header__subtitle">Familienfreundliche Ausflugsziele auf der Karte</p>
-  </header>
-
-  <div id="app-status" class="app-status" role="alert" hidden>
-    <p id="app-status-text" class="app-status__text"></p>
+      </div>
      <button
-      id="app-status-close"
+        id="menu-toggle-btn"
        type="button"
-      class="app-status__close"
-      aria-label="Meldung schließen"
+        class="app-header__menu-toggle"
+        aria-expanded="false"
+        aria-controls="app-menu"
+        aria-label="Menü öffnen"
      >
-      ✕
+        <span aria-hidden="true">☰</span>
      </button>
    </div>

-  <main class="app-layout">
-    <section class="map-panel" aria-label="Karte">
-      <div class="map-panel__toolbar">
+    <nav id="app-menu" class="app-menu" aria-label="Aktionen" hidden>
      <button id="locate-btn" type="button" class="btn btn--secondary">
        Meinen Standort verwenden
      </button>
@@ -63,8 +62,23 @@
      <button id="open-backup-btn" type="button" class="btn btn--secondary">
        💾 Daten sichern/wiederherstellen
      </button>
+    </nav>
+  </header>
+
+  <div id="app-status" class="app-status" role="alert" hidden>
+    <p id="app-status-text" class="app-status__text"></p>
+    <button
+      id="app-status-close"
+      type="button"
+      class="app-status__close"
+      aria-label="Meldung schließen"
+    >
+      ✕
+    </button>
  </div>

+  <main class="app-layout">
+    <section class="map-panel" aria-label="Karte">
      <p id="map-picking-hint" class="map-picking-hint" hidden>
        Klicke auf die Karte, um den Standort auszuwählen.
        <button id="map-picking-cancel-btn" type="button" class="map-picking-hint__cancel">
@@ -47,6 +47,57 @@
    closeBtn.addEventListener('click', hideStatus);
  }

+  // Aktionen-Menü im Header (Hamburger): fasst die frueher direkt auf der
+  // Karte liegenden Buttons zusammen, damit sie nicht mehr mit dem
+  // Leaflet-Zoom-Regler kollidieren und auf dem Smartphone nicht die
+  // Karte zupflastern.
+  function setupMenuToggle() {
+    const toggleBtn = document.getElementById('menu-toggle-btn');
+    const menu = document.getElementById('app-menu');
+    if (!toggleBtn || !menu) return;
+
+    function closeMenu() {
+      menu.hidden = true;
+      toggleBtn.setAttribute('aria-expanded', 'false');
+    }
+
+    function openMenu() {
+      menu.hidden = false;
+      toggleBtn.setAttribute('aria-expanded', 'true');
+    }
+
+    toggleBtn.addEventListener('click', () => {
+      if (menu.hidden) {
+        openMenu();
+      } else {
+        closeMenu();
+      }
+    });
+
+    // Menü nach Klick auf eine der enthaltenen Aktionen automatisch
+    // schließen (die jeweilige Aktion selbst wurde durch den eigenen
+    // Klick-Handler des Buttons bereits vorher ausgelöst, da Events erst
+    // beim Ziel-Element und danach erst am umschließenden <nav> ankommen).
+    menu.addEventListener('click', (event) => {
+      if (event.target.closest('button')) {
+        closeMenu();
+      }
+    });
+
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && !menu.hidden) {
+        closeMenu();
+        toggleBtn.focus();
+      }
+    });
+
+    document.addEventListener('click', (event) => {
+      if (menu.hidden) return;
+      if (menu.contains(event.target) || toggleBtn.contains(event.target)) return;
+      closeMenu();
+    });
+  }
+
  function setupGeolocationButton() {
    const button = document.getElementById('locate-btn');
    if (!button) return;
@@ -183,6 +234,7 @@
  }

  setupStatusClose();
+  setupMenuToggle();

  bootstrap().catch((err) => {
    console.error('EventMap: Initialisierung fehlgeschlagen.', err);
@@ -165,7 +165,12 @@
    map = L.map(containerId, {
      center: [DEFAULT_MAP_CENTER.lat, DEFAULT_MAP_CENTER.lng],
      zoom: DEFAULT_MAP_CENTER.zoom,
+      // Zoom-Regler bewusst oben rechts statt Leaflets Standard oben links,
+      // damit links oben durchgängig Platz für eigene Overlays (z.B.
+      // map-picking-hint) bleibt, ohne dass sich beides überschneidet.
+      zoomControl: false,
    });
+    L.control.zoom({ position: 'topright' }).addTo(map);

    // tile.openstreetmap.org verlangt seit 2024 einen gültigen HTTP-Referer
    // (Tile Usage Policy). Seiten, die per file:// geöffnet werden, senden