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

Sprint 12: UI-Vereinheitlichung + Läufigkeits-Tracker

Browse source 
- by-tabs/by-tab: einheitliche Tab/Pill-Navigation in allen Seiten
- by-section-label, by-toolbar: einheitliche Section-Labels und Toolbars
- Design-Tokens: fehlende --c-amber, --c-primary-soft ergänzt, Fallback-Werte entfernt
- sitting.js: sitting-layout für konsistentes flush-Layout (wie walks)
- Läufigkeits-Tracker: neuer Health-Tab für Hündinnen mit Zyklusvorhersage,
  Timeline vergangener Läufigkeiten, Erinnerungen und auto-berechnetem Nächst-Datum
- emptyState-Bug: icon-Parameter muss SVG sein, nicht Icon-Name (dog/bell/warning gefixt)
- SW-Cache: by-v103, APP_VER: 79
This commit is contained in:
rene 2026-04-16 22:31:33 +02:00
parent 32d630d5a1
commit b58789373c
30 changed files with 4344 additions and 523 deletions
Download patch file Download diff file Expand all files Collapse all files

48
backend/static/index.html
View file

@ -22,8 +22,8 @@
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/layout.css?v=65">
<link rel="stylesheet" href="/css/components.css?v=65">
<link rel="stylesheet" href="/css/layout.css?v=79">
<link rel="stylesheet" href="/css/components.css?v=79">
</head>
<body>
@ -33,7 +33,7 @@
<nav id="sidebar" role="navigation" aria-label="Hauptnavigation">
<div class="sidebar-logo" id="sidebar-dog-switcher">
<img class="sidebar-logo-img" src="/icons/icon-180.png" alt="Ban Yaro">
<span class="sidebar-logo-text">Ban Yaro</span>
<span class="sidebar-logo-text" style="cursor:pointer" title="Über Ban Yaro">Ban Yaro</span>
</div>
<div class="sidebar-add">
@ -88,6 +88,14 @@
<span class="sidebar-item-badge" id="lost-badge" style="display:none">0</span>
</div>
<span class="sidebar-section-label">Training</span>
<div class="sidebar-item" data-page="uebungen">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#target"></use></svg> Übungen
</div>
<div class="sidebar-item" data-page="trainingsplaene">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#clipboard-text"></use></svg> Trainingspläne
</div>
<span class="sidebar-section-label">Wissen</span>
<div class="sidebar-item" data-page="wiki">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#books"></use></svg> Wiki
@ -98,6 +106,14 @@
<div class="sidebar-item" data-page="movies">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#film-slate"></use></svg> Filme
</div>
<div class="sidebar-item" data-page="erste-hilfe">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#first-aid"></use></svg> Erste Hilfe
</div>
<div class="sidebar-item" data-page="admin" id="sidebar-admin"
style="display:none;color:var(--c-danger,#ef4444)">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#shield"></use></svg> Admin
</div>
<div class="sidebar-item sidebar-item--user" id="sidebar-user">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#user"></use></svg>
@ -125,6 +141,10 @@
<main id="page-content" role="main">
<!-- Jede Seite ist ein <section class="page"> -->
<section class="page" id="page-welcome">
<div class="page-body page-container"></div>
</section>
<section class="page active" id="page-diary">
<div class="page-body page-container">
<!-- wird von diary.js befüllt -->
@ -179,6 +199,18 @@
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-uebungen">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-trainingsplaene">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-erste-hilfe">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-lost">
<div class="page-body page-container"></div>
</section>
@ -187,6 +219,10 @@
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-admin">
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-friends">
<div class="page-body page-container"></div>
</section>
@ -233,9 +269,9 @@
<div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=65"></script>
<script src="/js/ui.js?v=65"></script>
<script src="/js/app.js?v=65"></script>
<script src="/js/api.js?v=79"></script>
<script src="/js/ui.js?v=79"></script>
<script src="/js/app.js?v=79"></script>
<!-- Feature-Seiten werden lazy geladen -->