Fix: Bottom-Nav iOS — window scrollt statt #page-content
position:fixed funktioniert auf iOS nur stabil wenn der window-scroll aktiv ist. Innere Scroll-Container lassen fixed-Elemente während des Scrollens 'driften'. - #page-content: overflow:visible (window scrollt) - body.page-fullscreen: Klasse für Karte/Routen/Chat/Gassi/Sitting → dort overflow:hidden + interner Scroll wie bisher - navigate(): setzt/entfernt page-fullscreen bei jedem Seitenwechsel - SW by-v527, APP_VER 504
This commit is contained in:
parent
61be87f29e
commit
359d46d9bc
3 changed files with 35 additions and 9 deletions
|
|
@ -13,26 +13,47 @@
|
||||||
min-height: 100dvh;
|
min-height: 100dvh;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Content-Bereich: füllt den Raum zwischen Header und Bottom-Nav */
|
/* Content-Bereich: window scrollt — kein overflow-y hier.
|
||||||
|
position:fixed auf #bottom-nav funktioniert auf iOS nur zuverlässig
|
||||||
|
wenn der window-scroll aktiv ist, nicht ein innerer Scroll-Container. */
|
||||||
#page-content {
|
#page-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0; /* iOS-Flex-Bug: ohne das scrollt body statt #page-content */
|
overflow: visible;
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px);
|
padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px);
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Desktop: Sidebar-Layout — kein Bottom-Nav, natürliche Höhe */
|
/* Vollbild-Seiten (Karte, Routen, Chat, Gassi, Sitting):
|
||||||
|
window-scroll deaktivieren, intern scrollen */
|
||||||
|
body.page-fullscreen {
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100dvh;
|
||||||
|
}
|
||||||
|
body.page-fullscreen #app {
|
||||||
|
height: 100dvh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
body.page-fullscreen #page-content {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Desktop: Sidebar-Layout — kein Bottom-Nav */
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
#app {
|
#app {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
#page-content {
|
#page-content {
|
||||||
min-height: unset;
|
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
padding-left: var(--nav-sidebar-width);
|
padding-left: var(--nav-sidebar-width);
|
||||||
}
|
}
|
||||||
|
body.page-fullscreen,
|
||||||
|
body.page-fullscreen #app,
|
||||||
|
body.page-fullscreen #page-content {
|
||||||
|
height: auto;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ------------------------------------------------------------
|
/* ------------------------------------------------------------
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
Router, State-Management, Navigation, Initialisierung.
|
Router, State-Management, Navigation, Initialisierung.
|
||||||
============================================================ */
|
============================================================ */
|
||||||
|
|
||||||
const APP_VER = '503'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
const APP_VER = '504'; // ← 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,9 +88,14 @@ const App = (() => {
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
// ROUTER
|
// ROUTER
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
|
const _FULLSCREEN_PAGES = new Set(['map', 'routes', '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-v526';
|
const CACHE_VERSION = 'by-v527';
|
||||||
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