Revert nav: Original-Layout restauriert + overscroll-behavior:none — SW by-v535, APP_VER 512
This commit is contained in:
parent
9506eea0d9
commit
5a6ca5496b
4 changed files with 23 additions and 38 deletions
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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')
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue