From d6eb2bcf98d1731fac98ea53cb1f0a7855505123 Mon Sep 17 00:00:00 2001 From: rene Date: Sat, 16 May 2026 08:53:14 +0200 Subject: [PATCH] =?UTF-8?q?Layout:=20JETZT/HUND/WELT=20Nav=20nach=20unten,?= =?UTF-8?q?=20Info-Karte=20h=C3=B6her?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - #world-dots: ausgeblendet auf Mobile (Labels dienen als Tab-Indikator) - #world-labels: von top→bottom (safe-area+20px), pill-Style für active right:80px damit FAB nicht überlappt, backdrop-blur auf active label - .world-panel top-padding: 58→32px (Info-Karte startet weiter oben) - Desktop @media 768px: Nav bleibt oben (dots+labels wie vorher) - components.css ?v=1003, SW by-v1004, APP_VER 1004 --- backend/main.py | 2 +- backend/static/css/components.css | 66 +++++++++++++++---------------- backend/static/index.html | 2 +- backend/static/js/app.js | 2 +- backend/static/sw.js | 2 +- 5 files changed, 35 insertions(+), 39 deletions(-) diff --git a/backend/main.py b/backend/main.py index 004809a..6b2bf9e 100644 --- a/backend/main.py +++ b/backend/main.py @@ -410,7 +410,7 @@ async def serve_media(path: str, request: _Request): raise _HE(404, "Nicht gefunden.") return _media_response(filepath) -APP_VER = "1003" # muss mit APP_VER in app.js übereinstimmen +APP_VER = "1004" # muss mit APP_VER in app.js übereinstimmen @app.get("/.well-known/assetlinks.json") async def assetlinks(): diff --git a/backend/static/css/components.css b/backend/static/css/components.css index 2990a5f..e225a0c 100644 --- a/backend/static/css/components.css +++ b/backend/static/css/components.css @@ -7876,58 +7876,53 @@ svg.empty-state-icon { } #wp-welt { overflow: hidden; position: relative; } -/* Navigation-Punkte */ +/* Navigation-Punkte — auf Mobile ausgeblendet, Labels übernehmen */ #world-dots { - position: fixed; - top: calc(env(safe-area-inset-top, 0px) + 14px); - left: 0; right: 0; - display: flex; - justify-content: center; - gap: 5px; - z-index: 60; - pointer-events: none; -} -.wdot { - width: 6px; height: 6px; - border-radius: 50%; - background: var(--c-text); - opacity: 0.2; - transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); - cursor: pointer; -} -.wdot.active { - width: 22px; - border-radius: 3px; - opacity: 1; - background: var(--c-primary); + display: none; } -/* Welt-Labels */ +/* Welt-Labels — jetzt unten als Tab-Bar */ #world-labels { position: fixed; - top: calc(env(safe-area-inset-top, 0px) + 28px); - left: 0; right: 0; + bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); + top: auto; + left: 0; right: 80px; /* Platz für FAB rechts */ display: flex; justify-content: center; - gap: 28px; + gap: 8px; z-index: 59; pointer-events: none; } .wlabel { - font-size: 9px; + font-size: 10px; font-weight: 800; - letter-spacing: 0.12em; + letter-spacing: 0.1em; color: white; - opacity: 0.4; + opacity: 0.45; text-transform: uppercase; - transition: opacity 0.18s; + transition: opacity 0.18s, background 0.18s; + padding: 6px 16px; + border-radius: 20px; +} +.wlabel.active { + opacity: 1; + background: rgba(255, 255, 255, 0.18); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); } -.wlabel.active { opacity: 1; } @media (min-width: 768px) { + /* Desktop: Nav wieder oben, Dots wieder sichtbar */ + #world-dots { + display: flex; + top: calc(env(safe-area-inset-top, 0px) + 14px); + bottom: auto; + } #world-labels { + bottom: auto; + top: calc(env(safe-area-inset-top, 0px) + 28px); + right: 0; gap: 40px; - top: calc(env(safe-area-inset-top, 0px) + 18px); } .wlabel { font-size: 13px; @@ -7936,7 +7931,6 @@ svg.empty-state-icon { padding: 6px 14px; border-radius: 20px; text-shadow: 0 1px 6px rgba(0,0,0,0.7); - transition: opacity 0.18s, background 0.18s; } .wlabel:hover { opacity: 0.85; @@ -7946,6 +7940,8 @@ svg.empty-state-icon { opacity: 1; background: rgba(255, 255, 255, 0.18); text-shadow: 0 1px 8px rgba(0,0,0,0.5); + backdrop-filter: none; + -webkit-backdrop-filter: none; } } @@ -8041,7 +8037,7 @@ svg.empty-state-icon { display: flex; flex-direction: column; justify-content: space-between; /* Info oben, Chips unten */ - padding: calc(env(safe-area-inset-top, 0px) + 58px) 14px + padding: calc(env(safe-area-inset-top, 0px) + 32px) 14px calc(env(safe-area-inset-bottom, 0px) + 76px); overflow-y: auto; overflow-x: hidden; diff --git a/backend/static/index.html b/backend/static/index.html index 49e24a5..d76d13c 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -103,7 +103,7 @@ - + diff --git a/backend/static/js/app.js b/backend/static/js/app.js index 0ce2649..67cc3f7 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 = '1003'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '1004'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt const IS_STAGING = location.hostname === 'staging.banyaro.app'; // Cache-Bust-Parameter nach Update-Reload sofort entfernen diff --git a/backend/static/sw.js b/backend/static/sw.js index d3a6fa9..707206d 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-v1003'; +const CACHE_VERSION = 'by-v1004'; 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