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

Fix: Gassi Desktop-Layout — Liste links + Karte rechts, Toggle ausgeblendet (SW by-v881)

Browse source
This commit is contained in:
rene 2026-05-12 17:32:44 +02:00
parent bf1087c5e1
commit 79cfd63ea6
6 changed files with 59 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/main.py
View file

@ -447,7 +447,7 @@ async def serve_media(path: str, request: _Request):
raise _HE(404, "Nicht gefunden.") raise _HE(404, "Nicht gefunden.")
return _media_response(filepath) return _media_response(filepath)
APP_VER = "880" # muss mit APP_VER in app.js übereinstimmen APP_VER = "881" # muss mit APP_VER in app.js übereinstimmen
@app.get("/.well-known/assetlinks.json") @app.get("/.well-known/assetlinks.json")
async def assetlinks(): async def assetlinks():

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

@ -3539,6 +3539,50 @@ html.modal-open {
#walks-map-view { #walks-map-view {
overflow: hidden; overflow: hidden;
} }
/* ── Desktop ≥1024px: Liste links, Karte rechts nebeneinander ── */
@media (min-width: 1024px) {
/* Tab-Treffen: horizontal splitten */
#walks-tab-treffen {
flex-direction: row;
overflow: hidden;
}
/* Toolbar über beiden Spalten → eigene Zeile */
#walks-tab-treffen .by-toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
background: var(--c-bg);
border-bottom: 1px solid var(--c-border);
padding: var(--space-2) var(--space-4);
}
/* Platz für die fixe Toolbar oben */
#walks-tab-treffen {
padding-top: 52px;
position: relative;
}
/* Liste: feste Breite links, scrollbar */
#walks-list-view {
display: block !important;
width: 380px;
min-width: 320px;
flex-shrink: 0;
border-right: 1px solid var(--c-border);
overflow-y: auto;
}
/* Karte: Rest des Platzes, sticky */
#walks-map-view {
display: block !important;
flex: 1;
min-width: 0;
}
/* Liste/Karte-Toggle auf Desktop ausblenden */
.walks-view-toggle {
display: none;
}
}
.walks-participant { .walks-participant {
display: flex; display: flex;
align-items: center; align-items: center;

14
backend/static/index.html
View file

@ -101,9 +101,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=880"> <link rel="stylesheet" href="/css/design-system.css?v=881">
<link rel="stylesheet" href="/css/layout.css?v=880"> <link rel="stylesheet" href="/css/layout.css?v=881">
<link rel="stylesheet" href="/css/components.css?v=880"> <link rel="stylesheet" href="/css/components.css?v=881">
</head> </head>
<body> <body>
@ -583,10 +583,10 @@
<div id="modal-container"></div> <div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features --> <!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=880"></script> <script src="/js/api.js?v=881"></script>
<script src="/js/ui.js?v=880"></script> <script src="/js/ui.js?v=881"></script>
<script src="/js/app.js?v=880"></script> <script src="/js/app.js?v=881"></script>
<script src="/js/worlds.js?v=880"></script> <script src="/js/worlds.js?v=881"></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 = '880'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '881'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.5.1'; // ← semantische Version, wird bei make release gesetzt const APP_VERSION = '1.5.1'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app'; const IS_STAGING = location.hostname === 'staging.banyaro.app';
// Cache-Bust-Parameter nach Update-Reload sofort entfernen // Cache-Bust-Parameter nach Update-Reload sofort entfernen

7
backend/static/js/pages/walks.js
View file

@ -55,6 +55,8 @@ window.Page_walks = (() => {
_container = container; _container = container;
_appState = appState; _appState = appState;
_render(); _render();
// Desktop: Leaflet sofort laden damit Karte bereit ist wenn Daten kommen
if (window.innerWidth >= 1024) UI.loadLeaflet();
try { _userPos = await API.getLocation(); } catch {} try { _userPos = await API.getLocation(); } catch {}
_loadData(); _loadData();
} }
@ -101,8 +103,9 @@ window.Page_walks = (() => {
<p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-8)">Lädt…</p> <p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-8)">Lädt…</p>
</div> </div>
</div> </div>
<!-- Karte --> <!-- Karte (auf Desktop immer sichtbar via CSS) -->
<div id="walks-map-view" class="walks-content" style="display:none"> <div id="walks-map-view" class="walks-content"
style="${window.innerWidth >= 1024 ? '' : 'display:none'}">
<div id="walks-map" class="walks-map"></div> <div id="walks-map" class="walks-map"></div>
</div> </div>
</div> </div>

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-v880'; const CACHE_VERSION = 'by-v881';
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