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

UX: Offline-Pfote über FAB + nur in Welten sichtbar, SW by-v1080

Browse source 
- Position: bottom-right über dem #worlds-fab (right:20px, bottom-
  Berechnung folgt FAB + 12px Abstand). Gleiche horizontale Achse
  wie FAB → ergibt eine 'Pfoten-Säule' (Indikator oben, FAB unten)
- Sichtbarkeit per CSS-Sibling-Selektor:
  #worlds-overlay.worlds-visible ~ #offline-indicator { display:flex }
  → Indikator nur sichtbar wenn Welten aktiv sind. Auf Detail-Seiten
  (Tagebuch, Karte, Admin etc.) bleibt er aus.
- z-index 61 (eine Stufe über dem FAB, unter Modals)
This commit is contained in:
rene 2026-05-26 14:30:57 +02:00
parent 06b91dc54b
commit 521b7b6bee
5 changed files with 20 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/main.py
View file

@ -410,7 +410,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 = "1079" # muss mit APP_VER in app.js übereinstimmen APP_VER = "1080" # 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():

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

@ -8867,13 +8867,15 @@ svg.empty-state-icon {
} }
/* ============================================================ /* ============================================================
Offline-Bereitschafts-Indikator — schwebend oben rechts Offline-Bereitschafts-Indikator — schwebend über dem Welten-FAB
Sichtbar NUR wenn Welten aktiv sind (Sibling-Selektor)
5 Pfade — Score 0 (grau) bis 5 (grün, gefüllt) 5 Pfade — Score 0 (grau) bis 5 (grün, gefüllt)
============================================================ */ ============================================================ */
#offline-indicator { #offline-indicator {
display: none; /* Default: aus */
position: fixed; position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 8px); right: 20px; /* gleicher right wie #worlds-fab */
right: 12px; bottom: calc(env(safe-area-inset-bottom, 16px) + 16px + 54px + 12px); /* FAB-Bottom + FAB-Höhe + 12px */
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
@ -8882,14 +8884,16 @@ svg.empty-state-icon {
-webkit-backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 2px 8px rgba(0,0,0,0.12); box-shadow: 0 2px 8px rgba(0,0,0,0.12);
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
z-index: 9000; /* unter Modals (~9999), über allem anderen */ z-index: 61; /* knapp über dem FAB (60), unter Modals */
transition: transform 0.12s, box-shadow 0.12s; transition: transform 0.12s, box-shadow 0.12s;
} }
/* Welten aktiv → Indikator sichtbar */
#worlds-overlay.worlds-visible ~ #offline-indicator { display: flex; }
[data-theme="dark"] #offline-indicator { [data-theme="dark"] #offline-indicator {
background: rgba(31,41,55,0.85); background: rgba(31,41,55,0.85);
border-color: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.08);

16
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=1079"> <link rel="stylesheet" href="/css/design-system.css?v=1080">
<link rel="stylesheet" href="/css/layout.css?v=1079"> <link rel="stylesheet" href="/css/layout.css?v=1080">
<link rel="stylesheet" href="/css/components.css?v=1079"> <link rel="stylesheet" href="/css/components.css?v=1080">
</head> </head>
<body> <body>
@ -630,11 +630,11 @@
<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=1079"></script> <script src="/js/api.js?v=1080"></script>
<script src="/js/ui.js?v=1079"></script> <script src="/js/ui.js?v=1080"></script>
<script src="/js/app.js?v=1079"></script> <script src="/js/app.js?v=1080"></script>
<script src="/js/worlds.js?v=1079"></script> <script src="/js/worlds.js?v=1080"></script>
<script src="/js/offline-indicator.js?v=1079"></script> <script src="/js/offline-indicator.js?v=1080"></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 = '1079'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '1080'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt const APP_VERSION = '1.6.0'; // ← 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.

2
backend/static/sw.js
View file

@ -4,7 +4,7 @@
============================================================ */ ============================================================ */
// ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
const VER = '1079'; const VER = '1080';
const CACHE_VERSION = `by-v${VER}`; const CACHE_VERSION = `by-v${VER}`;
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