From 359d46d9bc9b75a924d0989d0ece5274943939bd Mon Sep 17 00:00:00 2001 From: rene Date: Thu, 30 Apr 2026 07:43:11 +0200 Subject: [PATCH 01/19] =?UTF-8?q?Fix:=20Bottom-Nav=20iOS=20=E2=80=94=20win?= =?UTF-8?q?dow=20scrollt=20statt=20#page-content?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- backend/static/css/layout.css | 35 ++++++++++++++++++++++++++++------- backend/static/js/app.js | 7 ++++++- backend/static/sw.js | 2 +- 3 files changed, 35 insertions(+), 9 deletions(-) diff --git a/backend/static/css/layout.css b/backend/static/css/layout.css index 8ffa323..0d9e322 100644 --- a/backend/static/css/layout.css +++ b/backend/static/css/layout.css @@ -13,26 +13,47 @@ 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 { flex: 1; - min-height: 0; /* iOS-Flex-Bug: ohne das scrollt body statt #page-content */ - overflow-y: auto; - overflow-x: hidden; + overflow: visible; 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) { #app { flex-direction: row; } #page-content { - min-height: unset; padding-bottom: 0; padding-left: var(--nav-sidebar-width); } + body.page-fullscreen, + body.page-fullscreen #app, + body.page-fullscreen #page-content { + height: auto; + overflow: visible; + } } /* ------------------------------------------------------------ diff --git a/backend/static/js/app.js b/backend/static/js/app.js index e3584f8..476fe49 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -3,7 +3,7 @@ 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 IS_STAGING = location.hostname === 'staging.banyaro.app'; @@ -88,9 +88,14 @@ const App = (() => { // ---------------------------------------------------------- // ROUTER // ---------------------------------------------------------- + const _FULLSCREEN_PAGES = new Set(['map', 'routes', 'walks', 'sitting', 'chat']); + function navigate(pageId, pushHistory = true, params = {}) { 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 document.querySelector('.page.active')?.classList.remove('active'); document.querySelectorAll('.nav-item.active, .sidebar-item.active') diff --git a/backend/static/sw.js b/backend/static/sw.js index 69c63d8..011719c 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -3,7 +3,7 @@ Offline-Cache + Push Notifications + Tile-Cache ============================================================ */ -const CACHE_VERSION = 'by-v526'; +const CACHE_VERSION = 'by-v527'; 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 From 1056824be3df4e43b3974450df479326cd2a571d Mon Sep 17 00:00:00 2001 From: rene Date: Thu, 30 Apr 2026 07:53:33 +0200 Subject: [PATCH 02/19] =?UTF-8?q?Fix:=20Routen-Seite=20aus=20FULLSCREEN=5F?= =?UTF-8?q?PAGES=20=E2=80=94=20window-scroll=20statt=20interner=20Containe?= =?UTF-8?q?r,=20SW=20by-v528?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/static/css/components.css | 3 +-- backend/static/css/layout.css | 11 ++--------- backend/static/js/app.js | 4 ++-- backend/static/sw.js | 2 +- 4 files changed, 6 insertions(+), 14 deletions(-) diff --git a/backend/static/css/components.css b/backend/static/css/components.css index 073821a..703a489 100644 --- a/backend/static/css/components.css +++ b/backend/static/css/components.css @@ -2590,8 +2590,7 @@ html.modal-open { .rk-layout { display: flex; flex-direction: column; - height: 100%; - overflow: hidden; + min-height: 100dvh; background: var(--c-bg); } .rk-header { diff --git a/backend/static/css/layout.css b/backend/static/css/layout.css index 0d9e322..1b8711e 100644 --- a/backend/static/css/layout.css +++ b/backend/static/css/layout.css @@ -171,16 +171,9 @@ body.page-fullscreen #page-content { position: relative; } -/* Routen: volle Höhe damit .rk-layout height:100% auflöst und - das Grid intern scrollt (nicht die gesamte Seite via #page-content) */ -#page-routes { - height: 100%; - overflow: hidden; -} +/* Routen: window-scroll (kein overflow:hidden), padding entfernt */ #page-routes > .page-body { - padding: 0 !important; - overflow: hidden; - height: 100%; + padding: 0 !important; } /* ------------------------------------------------------------ diff --git a/backend/static/js/app.js b/backend/static/js/app.js index 476fe49..b79430f 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -3,7 +3,7 @@ Router, State-Management, Navigation, Initialisierung. ============================================================ */ -const APP_VER = '504'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '505'; // ← 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'; @@ -88,7 +88,7 @@ const App = (() => { // ---------------------------------------------------------- // ROUTER // ---------------------------------------------------------- - const _FULLSCREEN_PAGES = new Set(['map', 'routes', 'walks', 'sitting', 'chat']); + const _FULLSCREEN_PAGES = new Set(['map', 'walks', 'sitting', 'chat']); function navigate(pageId, pushHistory = true, params = {}) { if (!pages[pageId]) return; diff --git a/backend/static/sw.js b/backend/static/sw.js index 011719c..e950a91 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -3,7 +3,7 @@ Offline-Cache + Push Notifications + Tile-Cache ============================================================ */ -const CACHE_VERSION = 'by-v527'; +const CACHE_VERSION = 'by-v528'; 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 From cd5688ae8fbc035a76bdb955276082989f741016 Mon Sep 17 00:00:00 2001 From: rene Date: Thu, 30 Apr 2026 08:04:11 +0200 Subject: [PATCH 03/19] =?UTF-8?q?Fix:=20iOS=20Bottom-Nav=20=E2=80=94=20#ap?= =?UTF-8?q?p=20position:fixed+inset:0,=20Nav=20als=20Flex-Kind?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit position:fixed auf #bottom-nav funktioniert in iOS PWA-Standalone-Mode nicht zuverlässig (driftet beim Scrollen). Fix: #app selbst position:fixed;inset:0 → Nav ist normales Flex-Kind am unteren Rand → kein iOS-Fixed-Bug möglich. Desktop: #app position:static via Media Query. SW by-v529, APP_VER 506 --- backend/static/css/layout.css | 55 +++++++++++++++-------------------- backend/static/js/app.js | 2 +- backend/static/sw.js | 2 +- 3 files changed, 25 insertions(+), 34 deletions(-) diff --git a/backend/static/css/layout.css b/backend/static/css/layout.css index 1b8711e..5203654 100644 --- a/backend/static/css/layout.css +++ b/backend/static/css/layout.css @@ -7,51 +7,48 @@ /* ------------------------------------------------------------ 1. APP SHELL ------------------------------------------------------------ */ +/* Mobile: #app als fixed Container — einzig zuverlässiger iOS-PWA-Fix. + #bottom-nav braucht dann kein position:fixed mehr, er ist Flex-Kind + am unteren Rand des fixierten Containers. */ #app { + position: fixed; + inset: 0; display: flex; flex-direction: column; - min-height: 100dvh; + overflow: hidden; } -/* 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. */ +/* Content-Bereich scrollt intern */ #page-content { flex: 1; - overflow: visible; - padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px); + min-height: 0; + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + padding-bottom: var(--space-4); } -/* 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; -} +/* Vollbild-Seiten: #page-content kein Scroll */ body.page-fullscreen #page-content { - flex: 1; - min-height: 0; - overflow: hidden; + overflow: hidden; padding-bottom: 0; } -/* Desktop: Sidebar-Layout — kein Bottom-Nav */ +/* Desktop: normaler Dokumentfluss, Sidebar-Layout */ @media (min-width: 768px) { #app { + position: static; + min-height: 100dvh; + overflow: visible; flex-direction: row; } #page-content { + min-height: unset; + overflow-y: visible; padding-bottom: 0; padding-left: var(--nav-sidebar-width); } - body.page-fullscreen, - body.page-fullscreen #app, body.page-fullscreen #page-content { - height: auto; overflow: visible; } } @@ -180,15 +177,9 @@ body.page-fullscreen #page-content { 3. BOTTOM NAVIGATION (Mobile) ------------------------------------------------------------ */ #bottom-nav { - position: fixed; - bottom: 0; - left: 0; - right: 0; - z-index: 700; /* über Leaflet-Panes (~400) */ - /* GPU-Layer erzwingen → iOS Safari fixed-position Stabilität */ - transform: translateZ(0); - -webkit-transform: translateZ(0); - will-change: transform; + /* Flex-Kind statt position:fixed — kein iOS-Drift mehr */ + 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)); diff --git a/backend/static/js/app.js b/backend/static/js/app.js index b79430f..9630580 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -3,7 +3,7 @@ Router, State-Management, Navigation, Initialisierung. ============================================================ */ -const APP_VER = '505'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '506'; // ← 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'; diff --git a/backend/static/sw.js b/backend/static/sw.js index e950a91..3edc30b 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -3,7 +3,7 @@ Offline-Cache + Push Notifications + Tile-Cache ============================================================ */ -const CACHE_VERSION = 'by-v528'; +const CACHE_VERSION = 'by-v529'; 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 From b62d1ba93358ab05676a00c23a863a0e843437bd Mon Sep 17 00:00:00 2001 From: rene Date: Thu, 30 Apr 2026 08:21:25 +0200 Subject: [PATCH 04/19] =?UTF-8?q?Fix:=20Bottom-Nav=20position:fixed=20zur?= =?UTF-8?q?=C3=BCck=20=E2=80=94=20#app=20fixed+inset:0=20verhindert=20Drif?= =?UTF-8?q?t,=20nav=20erreicht=20Bildschirmrand,=20SW=20by-v530?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/static/css/layout.css | 11 ++++++++--- backend/static/js/app.js | 2 +- backend/static/sw.js | 2 +- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/backend/static/css/layout.css b/backend/static/css/layout.css index 5203654..adea5fb 100644 --- a/backend/static/css/layout.css +++ b/backend/static/css/layout.css @@ -25,7 +25,7 @@ overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; - padding-bottom: var(--space-4); + padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px); } /* Vollbild-Seiten: #page-content kein Scroll */ @@ -177,8 +177,13 @@ body.page-fullscreen #page-content { 3. BOTTOM NAVIGATION (Mobile) ------------------------------------------------------------ */ #bottom-nav { - /* Flex-Kind statt position:fixed — kein iOS-Drift mehr */ - flex-shrink: 0; + /* 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)); padding-top: var(--space-1); diff --git a/backend/static/js/app.js b/backend/static/js/app.js index 9630580..9c2a3da 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -3,7 +3,7 @@ Router, State-Management, Navigation, Initialisierung. ============================================================ */ -const APP_VER = '506'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '507'; // ← 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'; diff --git a/backend/static/sw.js b/backend/static/sw.js index 3edc30b..77a27bd 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -3,7 +3,7 @@ Offline-Cache + Push Notifications + Tile-Cache ============================================================ */ -const CACHE_VERSION = 'by-v529'; +const CACHE_VERSION = 'by-v530'; 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 From 460cc4784422503fae108cc84d4d1ff0320b3fe1 Mon Sep 17 00:00:00 2001 From: rene Date: Thu, 30 Apr 2026 08:29:55 +0200 Subject: [PATCH 05/19] =?UTF-8?q?Fix:=20overscroll-behavior:none=20auf=20h?= =?UTF-8?q?tml/body/#page-content=20=E2=80=94=20iOS=20Bounce=20bewegt=20ke?= =?UTF-8?q?inen=20fixed=20Nav=20mehr,=20SW=20by-v531?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/static/css/design-system.css | 2 ++ backend/static/css/layout.css | 11 ++++++----- backend/static/js/app.js | 2 +- backend/static/sw.js | 2 +- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/backend/static/css/design-system.css b/backend/static/css/design-system.css index 5b6f1e0..e3f5166 100644 --- a/backend/static/css/design-system.css +++ b/backend/static/css/design-system.css @@ -197,6 +197,7 @@ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; height: 100%; + overscroll-behavior: none; /* kein Window-Bounce auf iOS */ } body { @@ -207,6 +208,7 @@ body { color: var(--c-text); background-color: var(--c-bg); min-height: 100%; + overscroll-behavior: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } diff --git a/backend/static/css/layout.css b/backend/static/css/layout.css index adea5fb..05f8d15 100644 --- a/backend/static/css/layout.css +++ b/backend/static/css/layout.css @@ -20,12 +20,13 @@ /* Content-Bereich scrollt intern */ #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; - padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px); + overscroll-behavior-y: none; /* verhindert iOS-Bounce → fixed Nav bleibt stabil */ + padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px); } /* Vollbild-Seiten: #page-content kein Scroll */ diff --git a/backend/static/js/app.js b/backend/static/js/app.js index 9c2a3da..32c9369 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -3,7 +3,7 @@ Router, State-Management, Navigation, Initialisierung. ============================================================ */ -const APP_VER = '507'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '508'; // ← 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'; diff --git a/backend/static/sw.js b/backend/static/sw.js index 77a27bd..1411929 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -3,7 +3,7 @@ Offline-Cache + Push Notifications + Tile-Cache ============================================================ */ -const CACHE_VERSION = 'by-v530'; +const CACHE_VERSION = 'by-v531'; 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 From 6e938b9fa113a08b1cf0281f76eae56f2f090dae Mon Sep 17 00:00:00 2001 From: rene Date: Thu, 30 Apr 2026 08:34:25 +0200 Subject: [PATCH 06/19] =?UTF-8?q?Fix:=20#bottom-nav=20aus=20#app=20heraus?= =?UTF-8?q?=20=E2=80=94=20position:fixed=20relativ=20zum=20echten=20Viewpo?= =?UTF-8?q?rt,=20SW=20by-v532?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/static/index.html | 47 ++++++++++++++++++++------------------- backend/static/js/app.js | 2 +- backend/static/sw.js | 2 +- 3 files changed, 26 insertions(+), 25 deletions(-) diff --git a/backend/static/index.html b/backend/static/index.html index 688dd83..1df386e 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -434,32 +434,33 @@ - - + + + diff --git a/backend/static/js/app.js b/backend/static/js/app.js index 32c9369..edb8943 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -3,7 +3,7 @@ Router, State-Management, Navigation, Initialisierung. ============================================================ */ -const APP_VER = '508'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '509'; // ← 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'; diff --git a/backend/static/sw.js b/backend/static/sw.js index 1411929..0025901 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -3,7 +3,7 @@ Offline-Cache + Push Notifications + Tile-Cache ============================================================ */ -const CACHE_VERSION = 'by-v531'; +const CACHE_VERSION = 'by-v532'; 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 From 03508f8aa31b59925c4a2a2b7911a07c71412a32 Mon Sep 17 00:00:00 2001 From: rene Date: Thu, 30 Apr 2026 08:41:41 +0200 Subject: [PATCH 07/19] =?UTF-8?q?Fix:=20#app=20height:100dvh=20statt=20pos?= =?UTF-8?q?ition:fixed+inset:0=20=E2=80=94=20dvh=20inkl.=20safe=20areas,?= =?UTF-8?q?=20SW=20by-v533?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/static/css/layout.css | 8 ++------ backend/static/js/app.js | 2 +- backend/static/sw.js | 2 +- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/backend/static/css/layout.css b/backend/static/css/layout.css index 05f8d15..175ad72 100644 --- a/backend/static/css/layout.css +++ b/backend/static/css/layout.css @@ -7,14 +7,10 @@ /* ------------------------------------------------------------ 1. APP SHELL ------------------------------------------------------------ */ -/* Mobile: #app als fixed Container — einzig zuverlässiger iOS-PWA-Fix. - #bottom-nav braucht dann kein position:fixed mehr, er ist Flex-Kind - am unteren Rand des fixierten Containers. */ #app { - position: fixed; - inset: 0; display: flex; flex-direction: column; + height: 100dvh; /* dvh = dynamic viewport inkl. safe areas */ overflow: hidden; } @@ -38,7 +34,7 @@ body.page-fullscreen #page-content { /* Desktop: normaler Dokumentfluss, Sidebar-Layout */ @media (min-width: 768px) { #app { - position: static; + height: auto; min-height: 100dvh; overflow: visible; flex-direction: row; diff --git a/backend/static/js/app.js b/backend/static/js/app.js index edb8943..1c82b56 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -3,7 +3,7 @@ Router, State-Management, Navigation, Initialisierung. ============================================================ */ -const APP_VER = '509'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '510'; // ← 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'; diff --git a/backend/static/sw.js b/backend/static/sw.js index 0025901..1fd0053 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -3,7 +3,7 @@ Offline-Cache + Push Notifications + Tile-Cache ============================================================ */ -const CACHE_VERSION = 'by-v532'; +const CACHE_VERSION = 'by-v533'; 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 From 9506eea0d92fe77890f3ee01d01eaaf5a001abfb Mon Sep 17 00:00:00 2001 From: rene Date: Thu, 30 Apr 2026 08:52:39 +0200 Subject: [PATCH 08/19] =?UTF-8?q?Fix:=20Nav=20als=20Flex-Kind=20in=20#app{?= =?UTF-8?q?height:100dvh}=20=E2=80=94=20kein=20position:fixed,=20Desktop-S?= =?UTF-8?q?croll=20repariert,=20SW=20by-v534?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/static/css/layout.css | 52 ++++++++++++++++------------------- backend/static/index.html | 47 ++++++++++++++++--------------- backend/static/js/app.js | 2 +- backend/static/sw.js | 2 +- 4 files changed, 49 insertions(+), 54 deletions(-) diff --git a/backend/static/css/layout.css b/backend/static/css/layout.css index 175ad72..21572ad 100644 --- a/backend/static/css/layout.css +++ b/backend/static/css/layout.css @@ -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 { diff --git a/backend/static/index.html b/backend/static/index.html index 1df386e..16a5b81 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -434,33 +434,32 @@ + + - - - diff --git a/backend/static/js/app.js b/backend/static/js/app.js index 1c82b56..b5a6d90 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -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'; diff --git a/backend/static/sw.js b/backend/static/sw.js index 1fd0053..0bc32de 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -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 From 5a6ca5496b0532ef92d3e2a0a9683742f9c4e598 Mon Sep 17 00:00:00 2001 From: rene Date: Thu, 30 Apr 2026 09:00:30 +0200 Subject: [PATCH 09/19] =?UTF-8?q?Revert=20nav:=20Original-Layout=20restaur?= =?UTF-8?q?iert=20+=20overscroll-behavior:none=20=E2=80=94=20SW=20by-v535,?= =?UTF-8?q?=20APP=5FVER=20512?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/static/css/layout.css | 50 ++++++++++++++--------------------- backend/static/index.html | 2 +- backend/static/js/app.js | 7 +---- backend/static/sw.js | 2 +- 4 files changed, 23 insertions(+), 38 deletions(-) diff --git a/backend/static/css/layout.css b/backend/static/css/layout.css index 21572ad..b5aa03e 100644 --- a/backend/static/css/layout.css +++ b/backend/static/css/layout.css @@ -10,44 +10,30 @@ #app { display: flex; flex-direction: column; - height: 100dvh; /* dvh = dynamic viewport inkl. safe areas */ - overflow: hidden; + min-height: 100dvh; } -/* 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 { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; + padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px); -webkit-overflow-scrolling: touch; - overscroll-behavior-y: none; + overscroll-behavior-y: none; /* iOS-Bounce verhindert fixed-Nav-Drift */ } -/* Vollbild-Seiten: #page-content kein Scroll */ -body.page-fullscreen #page-content { - overflow: hidden; -} - -/* Desktop: window-scroll, Sidebar-Layout */ +/* Desktop: Sidebar-Layout */ @media (min-width: 768px) { #app { - 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); } - body.page-fullscreen #page-content { - overflow: visible; - } } /* ------------------------------------------------------------ @@ -174,19 +160,23 @@ body.page-fullscreen #page-content { 3. BOTTOM NAVIGATION (Mobile) ------------------------------------------------------------ */ #bottom-nav { - /* 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)); + position: fixed; + bottom: 0; + left: 0; + right: 0; + 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-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 { diff --git a/backend/static/index.html b/backend/static/index.html index 16a5b81..688dd83 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -434,7 +434,7 @@ - +