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.
This commit is contained in:
+52
-16
@@ -1,16 +1,33 @@
|
|||||||
/* Grundlegendes App-Layout: Header + Karte/Liste. Mobile-first;
|
/* Grundlegendes App-Layout: Header + Karte/Liste. Mobile-first;
|
||||||
Desktop-Anpassungen (>=1024px) siehe css/responsive.css. */
|
Desktop-Anpassungen (>=1024px) siehe css/responsive.css.
|
||||||
|
|
||||||
.app-header {
|
body ist ein Flex-Container (Header + app-status + app-layout
|
||||||
height: var(--header-height);
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
min-height: 100vh;
|
||||||
padding: 0 var(--space-lg);
|
}
|
||||||
|
|
||||||
|
.app-header {
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: var(--space-sm) var(--space-lg);
|
||||||
background: var(--color-primary);
|
background: var(--color-primary);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.app-header__row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--space-md);
|
||||||
|
min-height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
.app-header__title {
|
.app-header__title {
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@@ -21,7 +38,36 @@
|
|||||||
opacity: 0.9;
|
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 {
|
.app-layout {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
@@ -34,16 +80,6 @@
|
|||||||
flex-direction: column;
|
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 {
|
.map-panel__map {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -57,7 +93,7 @@
|
|||||||
|
|
||||||
.map-picking-hint {
|
.map-picking-hint {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(var(--space-sm) + 40px);
|
top: var(--space-sm);
|
||||||
left: var(--space-sm);
|
left: var(--space-sm);
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
+3
-1
@@ -8,7 +8,9 @@
|
|||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
'map filter'
|
'map filter'
|
||||||
'map list';
|
'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 {
|
.map-panel {
|
||||||
|
|||||||
@@ -42,5 +42,4 @@
|
|||||||
|
|
||||||
/* Layout */
|
/* Layout */
|
||||||
--breakpoint-desktop: 1024px;
|
--breakpoint-desktop: 1024px;
|
||||||
--header-height: 64px;
|
|
||||||
}
|
}
|
||||||
|
|||||||
+25
-11
@@ -23,25 +23,24 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="app-header">
|
<header class="app-header">
|
||||||
|
<div class="app-header__row">
|
||||||
|
<div>
|
||||||
<h1 class="app-header__title">EventMap</h1>
|
<h1 class="app-header__title">EventMap</h1>
|
||||||
<p class="app-header__subtitle">Familienfreundliche Ausflugsziele auf der Karte</p>
|
<p class="app-header__subtitle">Familienfreundliche Ausflugsziele auf der Karte</p>
|
||||||
</header>
|
</div>
|
||||||
|
|
||||||
<div id="app-status" class="app-status" role="alert" hidden>
|
|
||||||
<p id="app-status-text" class="app-status__text"></p>
|
|
||||||
<button
|
<button
|
||||||
id="app-status-close"
|
id="menu-toggle-btn"
|
||||||
type="button"
|
type="button"
|
||||||
class="app-status__close"
|
class="app-header__menu-toggle"
|
||||||
aria-label="Meldung schließen"
|
aria-expanded="false"
|
||||||
|
aria-controls="app-menu"
|
||||||
|
aria-label="Menü öffnen"
|
||||||
>
|
>
|
||||||
✕
|
<span aria-hidden="true">☰</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main class="app-layout">
|
<nav id="app-menu" class="app-menu" aria-label="Aktionen" hidden>
|
||||||
<section class="map-panel" aria-label="Karte">
|
|
||||||
<div class="map-panel__toolbar">
|
|
||||||
<button id="locate-btn" type="button" class="btn btn--secondary">
|
<button id="locate-btn" type="button" class="btn btn--secondary">
|
||||||
Meinen Standort verwenden
|
Meinen Standort verwenden
|
||||||
</button>
|
</button>
|
||||||
@@ -63,8 +62,23 @@
|
|||||||
<button id="open-backup-btn" type="button" class="btn btn--secondary">
|
<button id="open-backup-btn" type="button" class="btn btn--secondary">
|
||||||
💾 Daten sichern/wiederherstellen
|
💾 Daten sichern/wiederherstellen
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
|
<main class="app-layout">
|
||||||
|
<section class="map-panel" aria-label="Karte">
|
||||||
<p id="map-picking-hint" class="map-picking-hint" hidden>
|
<p id="map-picking-hint" class="map-picking-hint" hidden>
|
||||||
Klicke auf die Karte, um den Standort auszuwählen.
|
Klicke auf die Karte, um den Standort auszuwählen.
|
||||||
<button id="map-picking-cancel-btn" type="button" class="map-picking-hint__cancel">
|
<button id="map-picking-cancel-btn" type="button" class="map-picking-hint__cancel">
|
||||||
|
|||||||
+52
@@ -47,6 +47,57 @@
|
|||||||
closeBtn.addEventListener('click', hideStatus);
|
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() {
|
function setupGeolocationButton() {
|
||||||
const button = document.getElementById('locate-btn');
|
const button = document.getElementById('locate-btn');
|
||||||
if (!button) return;
|
if (!button) return;
|
||||||
@@ -183,6 +234,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
setupStatusClose();
|
setupStatusClose();
|
||||||
|
setupMenuToggle();
|
||||||
|
|
||||||
bootstrap().catch((err) => {
|
bootstrap().catch((err) => {
|
||||||
console.error('EventMap: Initialisierung fehlgeschlagen.', err);
|
console.error('EventMap: Initialisierung fehlgeschlagen.', err);
|
||||||
|
|||||||
@@ -165,7 +165,12 @@
|
|||||||
map = L.map(containerId, {
|
map = L.map(containerId, {
|
||||||
center: [DEFAULT_MAP_CENTER.lat, DEFAULT_MAP_CENTER.lng],
|
center: [DEFAULT_MAP_CENTER.lat, DEFAULT_MAP_CENTER.lng],
|
||||||
zoom: DEFAULT_MAP_CENTER.zoom,
|
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.openstreetmap.org verlangt seit 2024 einen gültigen HTTP-Referer
|
||||||
// (Tile Usage Policy). Seiten, die per file:// geöffnet werden, senden
|
// (Tile Usage Policy). Seiten, die per file:// geöffnet werden, senden
|
||||||
|
|||||||
Reference in New Issue
Block a user