Navigation, Karten-FABs, Nearby-Alerts

- Bottom-Nav neu: Karte | Routen | + | Tagebuch | Forum
- + reduziert auf: Giftköder, Gassi-Treffen, Verlorener Hund
- Notification-Badge auf User-Avatar (Header)
- Nearby-Alerts: Nav-Leiste pulsiert rot/orange bei Giftköder/vermisstm Hund in 20km
- SW postMessage bei poison/lost_alert → sofortiger Alert-Check
- Karten-FABs: nur Marker setzen + Standort (Route aufzeichnen + Offline entfernt)
- SW by-v272, APP_VER 262
This commit is contained in:
rene 2026-04-20 19:46:34 +02:00
parent 5141ba9969
commit 65d1cf6c7f
7 changed files with 105 additions and 27 deletions

View file

@ -168,6 +168,11 @@
style="width:18px;height:18px;color:var(--c-text-muted)">
<use href="/icons/phosphor.svg#user"></use>
</svg>
<span id="notif-nav-badge" class="hidden"
style="position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;
border-radius:8px;background:var(--c-danger);color:#fff;font-size:10px;
font-weight:700;line-height:16px;text-align:center;padding:0 3px;
pointer-events:none;z-index:1"></span>
</button>
<button class="header-menu-btn" id="header-menu-btn" aria-label="Menü"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#list"></use></svg></button>
</header>
@ -290,9 +295,9 @@
<!-- MOBILE BOTTOM NAVIGATION -->
<nav id="bottom-nav" role="navigation" aria-label="Hauptnavigation">
<div class="nav-item active" data-page="diary">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg>
<span class="nav-item-label">Tagebuch</span>
<div class="nav-item" data-page="map">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-trifold"></use></svg>
<span class="nav-item-label">Karte</span>
</div>
<div class="nav-item" data-page="routes">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#path"></use></svg>
@ -302,17 +307,14 @@
<div class="nav-item nav-item-center" id="nav-add">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#plus"></use></svg>
</div>
<div class="nav-item active" data-page="diary">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg>
<span class="nav-item-label">Tagebuch</span>
</div>
<div class="nav-item" data-page="forum">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#push-pin"></use></svg>
<span class="nav-item-label">Forum</span>
</div>
<div class="nav-item" data-page="notifications">
<span style="position:relative;display:inline-flex">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#bell"></use></svg>
<span class="nav-badge hidden" id="notif-nav-badge">0</span>
</span>
<span class="nav-item-label">Aktuelles</span>
</div>
</nav>
</div><!-- #app -->
@ -376,6 +378,11 @@
navigator.serviceWorker.addEventListener('controllerchange', () => {
window.location.reload();
});
navigator.serviceWorker.addEventListener('message', e => {
if (e.data?.type === 'CHECK_NEARBY_ALERTS') {
window.App?._checkNearbyAlerts?.();
}
});
}
</script>