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

UX: Offline-Score direkt im FAB statt separater Pfote, SW by-v1083

Browse source 
User-Feedback: separater Indikator zu viel — die Pfote IM FAB selbst
soll je nach Score grün eingefärbt werden.

- Separater #offline-indicator Button entfernt (HTML + CSS)
- Welten-FAB-Icon: <use phosphor.svg#paw-print> ersetzt durch
  Inline-SVG mit 5 einzelnen paw-elem-Pfaden (1 Ballen + 4 Zehen)
- CSS: Default weiß (wie bisher), .filled wird leuchtendes Grün
  (#16a34a) — überzeichnet auf orangem FAB klar erkennbar
- offline-indicator.js: zeigt jetzt nur noch die FAB-Pfade ein/aus,
  kein eigenes Element mehr; Klick-Status-Modal als window.OfflineIndicator.openStatus() weiter verfügbar (kann
  später bei Bedarf an Long-Press oder Menüpunkt gehängt werden)
This commit is contained in:
rene 2026-05-26 14:57:19 +02:00
parent 53c80b9bf6
commit b9fe5b5bc3
6 changed files with 61 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

41
backend/static/index.html
View file

@ -101,9 +101,9 @@
</script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=1082">
<link rel="stylesheet" href="/css/layout.css?v=1082">
<link rel="stylesheet" href="/css/components.css?v=1082">
<link rel="stylesheet" href="/css/design-system.css?v=1083">
<link rel="stylesheet" href="/css/layout.css?v=1083">
<link rel="stylesheet" href="/css/components.css?v=1083">
</head>
<body>
@ -602,27 +602,22 @@
<div class="world-panel" id="wp-welt"><div id="ww-content"></div></div>
</div>
<button id="worlds-fab" aria-label="Hinzufügen">
<svg class="ph-icon" style="width:22px;height:22px"><use href="/icons/phosphor.svg#paw-print"></use></svg>
<svg class="offline-paw" viewBox="0 0 256 256" aria-hidden="true" style="width:24px;height:24px">
<!-- 5 Sub-Pfade einzeln einfärbbar via .paw-elem; Default: weiß auf orange -->
<path class="paw-elem" data-step="1"
d="M128,104A36,36,0,0,0,93.43,130a43.49,43.49,0,0,1-20.67,25.9,32,32,0,0,0,27.73,57.62,72.49,72.49,0,0,1,55,0,32,32,0,0,0,27.73-57.62A43.46,43.46,0,0,1,162.57,130,36,36,0,0,0,128,104Z"
fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
<circle class="paw-elem" data-step="2" cx="44" cy="108" r="20" fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="3" cx="92" cy="60" r="20" fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="4" cx="164" cy="60" r="20" fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="5" cx="212" cy="108" r="20" fill="none" stroke="currentColor" stroke-width="16"/>
</svg>
</button>
</div>
<div id="worlds-back" aria-label="Zurück zur Welten-Navigation">
<svg class="ph-icon" style="width:22px;height:22px"><use href="/icons/phosphor.svg#arrow-left"></use></svg>
</div>
<!-- OFFLINE-BEREITSCHAFTS-INDIKATOR — schwebend oben rechts, immer sichtbar -->
<button id="offline-indicator"
aria-label="Offline-Bereitschaft" title="Offline-Bereitschaft wird geprüft …">
<svg class="offline-paw" viewBox="0 0 256 256" aria-hidden="true">
<path class="paw-elem" data-step="1"
d="M128,104A36,36,0,0,0,93.43,130a43.49,43.49,0,0,1-20.67,25.9,32,32,0,0,0,27.73,57.62,72.49,72.49,0,0,1,55,0,32,32,0,0,0,27.73-57.62A43.46,43.46,0,0,1,162.57,130,36,36,0,0,0,128,104Z"
fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
<circle class="paw-elem" data-step="2" cx="44" cy="108" r="20" fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="3" cx="92" cy="60" r="20" fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="4" cx="164" cy="60" r="20" fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="5" cx="212" cy="108" r="20" fill="none" stroke="currentColor" stroke-width="16"/>
</svg>
</button>
<!-- TOAST CONTAINER (außerhalb der App, immer sichtbar) -->
<div class="toast-container" id="toast-container" role="alert" aria-live="polite"></div>
@ -630,11 +625,11 @@
<div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=1082"></script>
<script src="/js/ui.js?v=1082"></script>
<script src="/js/app.js?v=1082"></script>
<script src="/js/worlds.js?v=1082"></script>
<script src="/js/offline-indicator.js?v=1082"></script>
<script src="/js/api.js?v=1083"></script>
<script src="/js/ui.js?v=1083"></script>
<script src="/js/app.js?v=1083"></script>
<script src="/js/worlds.js?v=1083"></script>
<script src="/js/offline-indicator.js?v=1083"></script>
<!-- Feature-Seiten werden lazy geladen -->