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

Feature: Welten-Navigation — Bottom-Nav+Header entfernt, Zurück-FAB (rund, dunkel), SW by-v644

Browse source
This commit is contained in:
rene 2026-05-03 10:46:12 +02:00
parent 860de6d2a7
commit 150776eab4
7 changed files with 33 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

36
backend/static/css/components.css
View file

@ -7635,27 +7635,35 @@ svg.empty-state-icon {
} }
#worlds-fab:active { transform: scale(0.92); box-shadow: 0 2px 10px rgba(196,132,58,0.3); } #worlds-fab:active { transform: scale(0.92); box-shadow: 0 2px 10px rgba(196,132,58,0.3); }
/* Back-Button */ /* Header + Bottom-Nav: vollständig entfernt — Welten übernehmen Navigation */
#app-header { display: none !important; }
#bottom-nav { display: none !important; }
/* Zurück-FAB (gleiche Position wie worlds-fab, anderer Stil) */
#worlds-back { #worlds-back {
position: fixed; position: fixed;
top: 0; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 20px);
height: calc(env(safe-area-inset-top, 0px) + 44px); right: 20px;
padding-top: env(safe-area-inset-top, 0px); width: 54px;
height: 54px;
border-radius: 50%;
background: rgba(20, 24, 36, 0.88);
border: 1.5px solid rgba(255, 255, 255, 0.18);
color: white;
cursor: pointer;
z-index: 200;
display: none; display: none;
align-items: center; align-items: center;
gap: 8px; justify-content: center;
padding-left: 16px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.40);
background: var(--c-bg); backdrop-filter: blur(14px);
border-bottom: 1px solid var(--c-border); -webkit-backdrop-filter: blur(14px);
z-index: 200; transition: transform 0.12s, box-shadow 0.12s;
cursor: pointer;
color: var(--c-primary);
font-weight: 600;
font-size: var(--text-sm);
} }
#worlds-back.worlds-back-visible { display: flex; } #worlds-back.worlds-back-visible { display: flex; }
#worlds-back:active { transform: scale(0.92); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
/* Hide existing header + bottom-nav when worlds are active */ /* worlds-hidden bleibt für eventuelle andere Verwendung */
.worlds-hidden { display: none !important; } .worlds-hidden { display: none !important; }
/* ── JETZT WORLD ─────────────────────────────────────────── */ /* ── JETZT WORLD ─────────────────────────────────────────── */

4
backend/static/css/design-system.css
View file

@ -105,9 +105,9 @@
--transition-slow: 320ms ease; --transition-slow: 320ms ease;
/* Navigation */ /* Navigation */
--nav-bottom-height: 64px; --nav-bottom-height: 78px; /* Welten-Zurück-FAB: 54px + 20px bottom + 4px Abstand */
--nav-sidebar-width: 240px; --nav-sidebar-width: 240px;
--header-height: 56px; --header-height: 0px; /* Header entfernt — Welten-Navigation übernimmt */
/* Safe Areas (iPhone Notch/Home Indicator) */ /* Safe Areas (iPhone Notch/Home Indicator) */
--safe-top: env(safe-area-inset-top, 0px); --safe-top: env(safe-area-inset-top, 0px);

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

@ -19,6 +19,7 @@
min-height: 0; /* iOS-Flex-Bug: ohne das scrollt body statt #page-content */ min-height: 0; /* iOS-Flex-Bug: ohne das scrollt body statt #page-content */
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding-top: var(--safe-top);
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; -webkit-overflow-scrolling: touch;
} }

13
backend/static/index.html
View file

@ -93,9 +93,9 @@
</script> </script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung --> <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=545"> <link rel="stylesheet" href="/css/design-system.css?v=644">
<link rel="stylesheet" href="/css/layout.css?v=545"> <link rel="stylesheet" href="/css/layout.css?v=644">
<link rel="stylesheet" href="/css/components.css?v=643"> <link rel="stylesheet" href="/css/components.css?v=644">
</head> </head>
<body> <body>
@ -551,9 +551,8 @@
<svg class="ph-icon" style="width:22px;height:22px"><use href="/icons/phosphor.svg#paw-print"></use></svg> <svg class="ph-icon" style="width:22px;height:22px"><use href="/icons/phosphor.svg#paw-print"></use></svg>
</button> </button>
</div> </div>
<div id="worlds-back"> <div id="worlds-back" aria-label="Zurück zur Welten-Navigation">
<svg class="ph-icon" style="width:18px;height:18px"><use href="/icons/phosphor.svg#arrow-left"></use></svg> <svg class="ph-icon" style="width:22px;height:22px"><use href="/icons/phosphor.svg#arrow-left"></use></svg>
Zurück
</div> </div>
<!-- TOAST CONTAINER (außerhalb der App, immer sichtbar) --> <!-- TOAST CONTAINER (außerhalb der App, immer sichtbar) -->
@ -566,7 +565,7 @@
<script src="/js/api.js?v=94"></script> <script src="/js/api.js?v=94"></script>
<script src="/js/ui.js?v=94"></script> <script src="/js/ui.js?v=94"></script>
<script src="/js/app.js?v=94"></script> <script src="/js/app.js?v=94"></script>
<script src="/js/worlds.js?v=643"></script> <script src="/js/worlds.js?v=644"></script>
<!-- Feature-Seiten werden lazy geladen --> <!-- Feature-Seiten werden lazy geladen -->

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

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

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

@ -81,8 +81,6 @@ window.Worlds = (() => {
ov.classList.remove('worlds-visible'); ov.classList.remove('worlds-visible');
ov.style.display = 'none'; ov.style.display = 'none';
_visible = false; _visible = false;
document.getElementById('app-header')?.classList.remove('worlds-hidden');
document.getElementById('bottom-nav')?.classList.remove('worlds-hidden');
document.getElementById('worlds-back')?.classList.add('worlds-back-visible'); document.getElementById('worlds-back')?.classList.add('worlds-back-visible');
} }

2
backend/static/sw.js
View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v643'; const CACHE_VERSION = 'by-v644';
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