Fix: Design-System-Regression v1102 — .hidden(!important) vs style.display app-weit

Rene: 'Tagebuch Kalenderansicht/Karte nicht mehr da' — Root-Cause: 459cd42
ersetzte style="display:none" durch class="hidden", aber die Show-Pfade
setzten weiter style.display. .hidden hat !important und gewinnt immer
(gleiche Klasse wie Filter-Panel-Hotfix v1242). Prod-Logs bewiesen: kein
einziger /diary/calendar- oder /locations-Request kam je an.

Unsichtbar seit v1102, jetzt per classList gefixt:
- diary: Stats-Bar mit View-Switcher (Liste/Medien/Kalender/Karte) + Medien-Grid neuer Eintrag
- health: KI-Tierarzt-Ergebnis erschien nie
- walks: Challenge-/Stamm-Gassi-Tabs leer
- welcome: iOS-Panel der Desktop-Install-Anleitung
- wiki: Fotos-Mod-Badge + Foto-Fallback (via app.js data-fb show-el/sibling-Handler)
- routes: Filter-Badge; breeder: Fotos-Section

Zweite Fehlerklasse aus demselben Sprint: doppelte class-Attribute
(class="x" id=… class="hidden") — Browser verwirft das zweite Attribut.
87 Vorkommen in 23 Dateien zusammengeführt; betroffene Show/Hide-Pfade
(ev-map, rk-mine/nearby-group, chat-partner-dot, eh-panel, zh-section)
auf classList umgestellt.
This commit is contained in:
rene 2026-06-07 15:09:43 +02:00
parent 5acbaaa97b
commit 178aef7fb0
32 changed files with 197 additions and 188 deletions

View file

@ -341,8 +341,8 @@ window.Page_zuchthunde = (() => {
title="Bearbeiten">
${UI.icon('pencil-simple')}
</button>
<button class="btn btn-ghost btn-sm zh-delete-btn" data-id="${h.id}"
title="Löschen" class="text-danger">
<button class="btn btn-ghost btn-sm zh-delete-btn text-danger" data-id="${h.id}"
title="Löschen">
${UI.icon('trash')}
</button>
</div>
@ -360,7 +360,7 @@ window.Page_zuchthunde = (() => {
</button>
</div>
<div class="zh-section-wrap" id="zh-section-${h.id}" class="hidden"></div>
<div class="zh-section-wrap hidden" id="zh-section-${h.id}"></div>
</div>`;
}
@ -379,7 +379,7 @@ window.Page_zuchthunde = (() => {
function _closeSection(hundId) {
const wrap = document.getElementById(`zh-section-${hundId}`);
if (wrap) wrap.style.display = 'none';
if (wrap) wrap.classList.add('hidden'); // .hidden hat !important → nur classList
_openSections[hundId] = null;
_updateSectionButtons(hundId, null);
}
@ -389,7 +389,7 @@ window.Page_zuchthunde = (() => {
_updateSectionButtons(hundId, section);
const wrap = document.getElementById(`zh-section-${hundId}`);
if (!wrap) return;
wrap.style.display = '';
wrap.classList.remove('hidden');
wrap.innerHTML = `<p style="color:var(--c-text-muted);font-size:var(--text-sm);padding:var(--space-2)">Lädt…</p>`;
if (section === 'health') _loadHealthSection(hundId, wrap);
if (section === 'genetic') _loadGeneticSection(hundId, wrap);
@ -427,8 +427,8 @@ window.Page_zuchthunde = (() => {
${t.untersuch_am ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_fmtDate(t.untersuch_am)}</span>` : ''}
${t.labor ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${UI.escape(t.labor)}</span>` : ''}
</div>
<button class="btn btn-ghost btn-xs zh-health-del-btn" data-tid="${t.id}" title="Löschen"
class="text-danger">${UI.icon('trash')}</button>
<button class="btn btn-ghost btn-xs zh-health-del-btn text-danger" data-tid="${t.id}" title="Löschen"
>${UI.icon('trash')}</button>
</div>`).join('')
: `<p class="text-sm-muted">Noch keine Gesundheitstests eingetragen.</p>`;
@ -490,8 +490,8 @@ window.Page_zuchthunde = (() => {
${t.getestet_am ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_fmtDate(t.getestet_am)}</span>` : ''}
${t.labor ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${UI.escape(t.labor)}</span>` : ''}
</div>
<button class="btn btn-ghost btn-xs zh-genetic-del-btn" data-tid="${t.id}" title="Löschen"
class="text-danger">${UI.icon('trash')}</button>
<button class="btn btn-ghost btn-xs zh-genetic-del-btn text-danger" data-tid="${t.id}" title="Löschen"
>${UI.icon('trash')}</button>
</div>`).join('')
: `<p class="text-sm-muted">Noch keine Gentests eingetragen.</p>`;
@ -555,8 +555,8 @@ window.Page_zuchthunde = (() => {
${t.richter ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${UI.escape(t.richter)}</span>` : ''}
${t.formwert ? `<span class="zh-badge" style="background:#3B82F6">${UI.escape(t.formwert)}</span>` : ''}
</div>
<button class="btn btn-ghost btn-xs zh-title-del-btn" data-tid="${t.id}" title="Löschen"
class="text-danger">${UI.icon('trash')}</button>
<button class="btn btn-ghost btn-xs zh-title-del-btn text-danger" data-tid="${t.id}" title="Löschen"
>${UI.icon('trash')}</button>
</div>`).join('')
: `<p class="text-sm-muted">Noch keine Titel eingetragen.</p>`;