dapelza/eventmap
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
dapelza
2026-07-24 13:35:35 +02:00
parent 374ab4b789
commit 00a00b3b95
6 changed files with 152 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+40 -26
View File
@@ -23,8 +23,46 @@
</head>
<body>
<header class="app-header">
<h1 class="app-header__title">EventMap</h1>
<p class="app-header__subtitle">Familienfreundliche Ausflugsziele auf der Karte</p>
<div class="app-header__row">
<div>
<h1 class="app-header__title">EventMap</h1>
<p class="app-header__subtitle">Familienfreundliche Ausflugsziele auf der Karte</p>
</div>
<button
id="menu-toggle-btn"
type="button"
class="app-header__menu-toggle"
aria-expanded="false"
aria-controls="app-menu"
aria-label="Menü öffnen"
>
<span aria-hidden="true">☰</span>
</button>
</div>
<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>
<button id="manual-location-btn" type="button" class="btn btn--secondary">
Standort manuell eingeben
</button>
<button id="pick-location-btn" type="button" class="btn btn--secondary">
📍 Standort auf Karte wählen
</button>
<button id="add-place-btn" type="button" class="btn btn--primary">
+ Neues Ausflugsziel hinzufügen
</button>
<button id="open-prompt-generator-btn" type="button" class="btn btn--secondary">
🤖 Neue Ausflugsziele mit KI erstellen
</button>
<button id="open-import-btn" type="button" class="btn btn--secondary">
📥 KI-Ausflugsziele importieren
</button>
<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>
@@ -41,30 +79,6 @@
<main class="app-layout">
<section class="map-panel" aria-label="Karte">
<div class="map-panel__toolbar">
<button id="locate-btn" type="button" class="btn btn--secondary">
Meinen Standort verwenden
</button>
<button id="manual-location-btn" type="button" class="btn btn--secondary">
Standort manuell eingeben
</button>
<button id="pick-location-btn" type="button" class="btn btn--secondary">
📍 Standort auf Karte wählen
</button>
<button id="add-place-btn" type="button" class="btn btn--primary">
+ Neues Ausflugsziel hinzufügen
</button>
<button id="open-prompt-generator-btn" type="button" class="btn btn--secondary">
🤖 Neue Ausflugsziele mit KI erstellen
</button>
<button id="open-import-btn" type="button" class="btn btn--secondary">
📥 KI-Ausflugsziele importieren
</button>
<button id="open-backup-btn" type="button" class="btn btn--secondary">
💾 Daten sichern/wiederherstellen
</button>
</div>
<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">