rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Nav als Flex-Kind in #app{height:100dvh} — kein position:fixed, Desktop-Scroll repariert, SW by-v534

Browse source
This commit is contained in:
rene 2026-04-30 08:52:39 +02:00
parent 03508f8aa3
commit 9506eea0d9
4 changed files with 49 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

52
backend/static/css/layout.css
View file

@ -14,34 +14,34 @@
overflow: hidden;
}
/* Content-Bereich scrollt intern */
/* Content-Bereich scrollt intern — kein padding-bottom nötig da Nav Flex-Kind */
#page-content {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: none; /* verhindert iOS-Bounce → fixed Nav bleibt stabil */
padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px);
overscroll-behavior-y: none;
}
/* Vollbild-Seiten: #page-content kein Scroll */
body.page-fullscreen #page-content {
overflow: hidden;
padding-bottom: 0;
overflow: hidden;
}
/* Desktop: normaler Dokumentfluss, Sidebar-Layout */
/* Desktop: window-scroll, Sidebar-Layout */
@media (min-width: 768px) {
#app {
height: auto;
min-height: 100dvh;
overflow: visible;
height: auto;
min-height: 100dvh;
overflow: visible;
flex-direction: row;
}
#page-content {
flex: unset;
min-height: unset;
overflow-y: visible;
overflow-x: visible;
padding-bottom: 0;
padding-left: var(--nav-sidebar-width);
}
@ -174,23 +174,19 @@ body.page-fullscreen #page-content {
3. BOTTOM NAVIGATION (Mobile)
------------------------------------------------------------ */
#bottom-nav {
/* position:fixed relativ zum Viewport — da #app kein transform hat,
ist dies stabil. Scroll passiert in #page-content (overflow-y:auto),
nicht im window → kein iOS-Drift. */
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 700;
min-height: calc(var(--nav-bottom-height) + var(--safe-bottom));
/* Flex-Kind von #app{height:100dvh} — kein position:fixed nötig.
100dvh auf iOS inkludiert Safe Areas → Nav endet am physischen Rand. */
flex-shrink: 0;
z-index: 700;
min-height: calc(var(--nav-bottom-height) + var(--safe-bottom));
padding-top: var(--space-1);
padding-bottom: calc(var(--safe-bottom) + var(--space-1));
background: var(--c-surface);
border-top: 1px solid var(--c-border-light);
display: flex;
align-items: stretch;
box-shadow: 0 -2px 12px rgba(42, 31, 20, 0.08);
transition: border-top-color 0.4s ease;
background: var(--c-surface);
border-top: 1px solid var(--c-border-light);
display: flex;
align-items: stretch;
box-shadow: 0 -2px 12px rgba(42, 31, 20, 0.08);
transition: border-top-color 0.4s ease;
}
@keyframes nav-alert-pulse {

47
backend/static/index.html
View file

@ -434,33 +434,32 @@
</main>
<!-- MOBILE BOTTOM NAVIGATION — Flex-Kind von #app (height:100dvh) -->
<nav id="bottom-nav" role="navigation" aria-label="Hauptnavigation">
<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>
<span class="nav-item-label">Routen</span>
</div>
<!-- Mittlerer + Button -->
<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>
</nav>
</div><!-- #app -->
<!-- MOBILE BOTTOM NAVIGATION — außerhalb #app damit position:fixed zum echten Viewport -->
<nav id="bottom-nav" role="navigation" aria-label="Hauptnavigation">
<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>
<span class="nav-item-label">Routen</span>
</div>
<!-- Mittlerer + Button -->
<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>
</nav>
<!-- TOAST CONTAINER (außerhalb der App, immer sichtbar) -->
<div class="toast-container" id="toast-container" role="alert" aria-live="polite"></div>

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '510'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '511'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.0.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app';

2
backend/static/sw.js
View file

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