Revert nav: Original-Layout restauriert + overscroll-behavior:none — SW by-v535, APP_VER 512

This commit is contained in:
rene 2026-04-30 09:00:30 +02:00
parent 9506eea0d9
commit 5a6ca5496b
4 changed files with 23 additions and 38 deletions

View file

@ -10,44 +10,30 @@
#app { #app {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100dvh; /* dvh = dynamic viewport inkl. safe areas */ min-height: 100dvh;
overflow: hidden;
} }
/* Content-Bereich scrollt intern — kein padding-bottom nötig da Nav Flex-Kind */ /* Content-Bereich: füllt den Raum zwischen Header und Bottom-Nav */
#page-content { #page-content {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
overscroll-behavior-y: none; overscroll-behavior-y: none; /* iOS-Bounce verhindert fixed-Nav-Drift */
} }
/* Vollbild-Seiten: #page-content kein Scroll */ /* Desktop: Sidebar-Layout */
body.page-fullscreen #page-content {
overflow: hidden;
}
/* Desktop: window-scroll, Sidebar-Layout */
@media (min-width: 768px) { @media (min-width: 768px) {
#app { #app {
height: auto;
min-height: 100dvh;
overflow: visible;
flex-direction: row; flex-direction: row;
} }
#page-content { #page-content {
flex: unset;
min-height: unset; min-height: unset;
overflow-y: visible;
overflow-x: visible;
padding-bottom: 0; padding-bottom: 0;
padding-left: var(--nav-sidebar-width); padding-left: var(--nav-sidebar-width);
} }
body.page-fullscreen #page-content {
overflow: visible;
}
} }
/* ------------------------------------------------------------ /* ------------------------------------------------------------
@ -174,19 +160,23 @@ body.page-fullscreen #page-content {
3. BOTTOM NAVIGATION (Mobile) 3. BOTTOM NAVIGATION (Mobile)
------------------------------------------------------------ */ ------------------------------------------------------------ */
#bottom-nav { #bottom-nav {
/* Flex-Kind von #app{height:100dvh} kein position:fixed nötig. position: fixed;
100dvh auf iOS inkludiert Safe Areas Nav endet am physischen Rand. */ bottom: 0;
flex-shrink: 0; left: 0;
z-index: 700; right: 0;
min-height: calc(var(--nav-bottom-height) + var(--safe-bottom)); z-index: 700;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
min-height: calc(var(--nav-bottom-height) + var(--safe-bottom));
padding-top: var(--space-1); padding-top: var(--space-1);
padding-bottom: calc(var(--safe-bottom) + var(--space-1)); padding-bottom: calc(var(--safe-bottom) + var(--space-1));
background: var(--c-surface); background: var(--c-surface);
border-top: 1px solid var(--c-border-light); border-top: 1px solid var(--c-border-light);
display: flex; display: flex;
align-items: stretch; align-items: stretch;
box-shadow: 0 -2px 12px rgba(42, 31, 20, 0.08); box-shadow: 0 -2px 12px rgba(42, 31, 20, 0.08);
transition: border-top-color 0.4s ease; transition: border-top-color 0.4s ease;
} }
@keyframes nav-alert-pulse { @keyframes nav-alert-pulse {

View file

@ -434,7 +434,7 @@
</main> </main>
<!-- MOBILE BOTTOM NAVIGATION — Flex-Kind von #app (height:100dvh) --> <!-- MOBILE BOTTOM NAVIGATION -->
<nav id="bottom-nav" role="navigation" aria-label="Hauptnavigation"> <nav id="bottom-nav" role="navigation" aria-label="Hauptnavigation">
<div class="nav-item" data-page="map"> <div class="nav-item" data-page="map">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-trifold"></use></svg> <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-trifold"></use></svg>

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '511'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '512'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.0.0'; // ← semantische Version, wird bei make release gesetzt const APP_VERSION = '1.0.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app'; const IS_STAGING = location.hostname === 'staging.banyaro.app';
@ -88,14 +88,9 @@ const App = (() => {
// ---------------------------------------------------------- // ----------------------------------------------------------
// ROUTER // ROUTER
// ---------------------------------------------------------- // ----------------------------------------------------------
const _FULLSCREEN_PAGES = new Set(['map', 'walks', 'sitting', 'chat']);
function navigate(pageId, pushHistory = true, params = {}) { function navigate(pageId, pushHistory = true, params = {}) {
if (!pages[pageId]) return; if (!pages[pageId]) return;
// Vollbild-Seiten benötigen window-scroll deaktiviert (iOS fixed-nav Fix)
document.body.classList.toggle('page-fullscreen', _FULLSCREEN_PAGES.has(pageId));
// Aktive Seite ausblenden // Aktive Seite ausblenden
document.querySelector('.page.active')?.classList.remove('active'); document.querySelector('.page.active')?.classList.remove('active');
document.querySelectorAll('.nav-item.active, .sidebar-item.active') document.querySelectorAll('.nav-item.active, .sidebar-item.active')

View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v534'; const CACHE_VERSION = 'by-v535';
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache