Design-System Sprint A: utilities.css + 948 Inline-Styles → Utility-Klassen, SW by-v1102
PHASE 1 — Sofort-Cleanup ohne Risiko: - Neue Datei utilities.css mit ~25 Klassen für häufige Kombinationen: * text-xs-muted, text-xs-secondary, text-sm-muted, text-sm-secondary * flex-gap-2/3, flex-col-gap-2/3/4, flex-center-gap-1/2/3 * flex-between, flex-1-min, mb-1/3, mt-1/3 * icon-xs/sm/md/lg, label-block, caption - index.html bindet utilities.css ein - mb-3/mt-3 ergänzt (waren in design-system.css unvollständig) PHASE 2 — .by-tab Modifier für Vereinheitlichung: - .by-tabs.grid (mit --tab-cols Variable für Admin/Health/etc.) - .by-tabs.sticky (Desktop vertikale Tabs für Admin) - .by-tabs.wrap (Zuchthunde, flex-wrap statt scroll) - .by-tabs.separated (Sitting, mit eigenem Hintergrund + Border) PHASE 3 — Inline-Style → Klassen-Migration (Python-Script): - 948 Inline-Styles entfernt (5101 → 4153, -18%) - 962 Migrationen über 47 Page-Dateien - Top-Treffer: admin.js (180), health.js (67), dog-profile.js (67), litters.js (62), settings.js (61), zuchthunde.js (51) - Patterns: text-muted, text-secondary, text-danger, text-xs-muted, text-sm-muted, grid-2 (Duplikat-Bug behoben!), flex-col-gap-3, p-3/4, mb-2/3/4, hidden, w-full, flex-1, ... - Bewahrt bestehende class-Attribute (mergt korrekt) Alle 19 Tests grün. Kein visueller Diff erwartet (gleiche Property-Werte).
This commit is contained in:
parent
279f76714e
commit
459cd425f2
54 changed files with 1809 additions and 956 deletions
|
|
@ -166,7 +166,7 @@ window.Page_ernaehrung = (() => {
|
|||
</div>
|
||||
|
||||
<!-- Aktivität als Pill-Buttons -->
|
||||
<div style="margin-bottom:var(--space-4)">
|
||||
<div class="mb-4">
|
||||
<div class="ern-section-label">🏃 Aktivität</div>
|
||||
<div class="ern-pill-group">
|
||||
<button class="ern-pill" data-akt="gering">🛋️ Gemütlich</button>
|
||||
|
|
@ -288,13 +288,13 @@ window.Page_ernaehrung = (() => {
|
|||
<div style="background:var(--c-surface);border-radius:var(--radius-md);
|
||||
padding:var(--space-3);border:1px solid var(--c-border)">
|
||||
<div style="font-weight:600;margin-bottom:4px">🌾 Trockenfutter</div>
|
||||
<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
|
||||
<div class="text-sm-secondary">
|
||||
(~350 kcal/100g)
|
||||
</div>
|
||||
<div style="font-size:var(--text-lg);font-weight:600;margin-top:6px">
|
||||
${trocken} g / Tag
|
||||
</div>
|
||||
<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
|
||||
<div class="text-sm-secondary">
|
||||
= ${Math.round(trocken/2)} g morgens + ${Math.round(trocken/2)} g abends
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -302,13 +302,13 @@ window.Page_ernaehrung = (() => {
|
|||
<div style="background:var(--c-surface);border-radius:var(--radius-md);
|
||||
padding:var(--space-3);border:1px solid var(--c-border)">
|
||||
<div style="font-weight:600;margin-bottom:4px">🥫 Nassfutter</div>
|
||||
<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
|
||||
<div class="text-sm-secondary">
|
||||
(~85 kcal/100g)
|
||||
</div>
|
||||
<div style="font-size:var(--text-lg);font-weight:600;margin-top:6px">
|
||||
${nass} g / Tag
|
||||
</div>
|
||||
<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
|
||||
<div class="text-sm-secondary">
|
||||
= ${Math.round(nass/2)} g morgens + ${Math.round(nass/2)} g abends
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -316,13 +316,13 @@ window.Page_ernaehrung = (() => {
|
|||
<div style="background:var(--c-surface);border-radius:var(--radius-md);
|
||||
padding:var(--space-3);border:1px solid var(--c-border)">
|
||||
<div style="font-weight:600;margin-bottom:4px">🥩 BARF</div>
|
||||
<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
|
||||
<div class="text-sm-secondary">
|
||||
(~150 kcal/100g)
|
||||
</div>
|
||||
<div style="font-size:var(--text-lg);font-weight:600;margin-top:6px">
|
||||
${barf} g / Tag
|
||||
</div>
|
||||
<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
|
||||
<div class="text-sm-secondary">
|
||||
= ${Math.round(barf/2)} g morgens + ${Math.round(barf/2)} g abends
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -525,7 +525,7 @@ window.Page_ernaehrung = (() => {
|
|||
].map(q => `
|
||||
<button class="btn btn-sm btn-secondary ern-ki-vorschlag"
|
||||
data-q="${_esc(q)}"
|
||||
style="font-size:var(--text-xs)">${_esc(q)}</button>
|
||||
class="text-xs">${_esc(q)}</button>
|
||||
`).join('')}
|
||||
</div>
|
||||
|
||||
|
|
@ -533,7 +533,7 @@ window.Page_ernaehrung = (() => {
|
|||
<div id="ern-ki-chat" style="min-height:80px;margin-bottom:var(--space-3)"></div>
|
||||
|
||||
<!-- Eingabe -->
|
||||
<div style="display:flex;gap:var(--space-2)">
|
||||
<div class="flex-gap-2">
|
||||
<textarea id="ern-ki-frage" class="by-input" rows="2"
|
||||
placeholder="Deine Frage zur Ernährung..."
|
||||
style="flex:1;resize:vertical"></textarea>
|
||||
|
|
@ -586,7 +586,7 @@ window.Page_ernaehrung = (() => {
|
|||
// KI-Antwort Placeholder
|
||||
const placeholderId = `ern-ki-placeholder-${Date.now()}`;
|
||||
chatEl.insertAdjacentHTML('beforeend', `
|
||||
<div id="${placeholderId}" style="margin-bottom:var(--space-3)">
|
||||
<div id="${placeholderId}" class="mb-3">
|
||||
<div style="background:var(--c-surface);border:1px solid var(--c-border);
|
||||
border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);
|
||||
font-size:var(--text-sm);color:var(--c-text-muted)">
|
||||
|
|
@ -905,7 +905,7 @@ window.Page_ernaehrung = (() => {
|
|||
try {
|
||||
data = await API.dogs.futterAnalyse(dog.id);
|
||||
} catch (_) {
|
||||
analyseEl.innerHTML = `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Analyse nicht verfügbar.</p>`;
|
||||
analyseEl.innerHTML = `<p class="text-sm-muted">Analyse nicht verfügbar.</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -990,7 +990,7 @@ window.Page_ernaehrung = (() => {
|
|||
white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
|
||||
${_esc(f.name)}
|
||||
</div>
|
||||
<div style="font-size:var(--text-xs);color:var(--c-text-muted)">
|
||||
<div class="text-xs-muted">
|
||||
${_esc(TYP_LABELS[f.typ] || f.typ)} · ${f.mahlzeiten} Mahlzeit${f.mahlzeiten !== 1 ? 'en' : ''}
|
||||
${f.status !== 'neu' ? `· <span style="color:var(--c-success,#22c55e)">+${f.positiv}</span> / <span style="color:var(--c-danger,#ef4444)">-${f.negativ}</span>` : ''}
|
||||
</div>
|
||||
|
|
@ -1084,9 +1084,9 @@ window.Page_ernaehrung = (() => {
|
|||
<svg class="ph-icon" aria-hidden="true" style="flex-shrink:0;color:var(--c-primary)">
|
||||
<use href="/icons/phosphor.svg#bowl-food"></use>
|
||||
</svg>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div class="flex-1-min">
|
||||
<div style="font-weight:600;font-size:var(--text-sm)">${_esc(item.futter_name)}</div>
|
||||
<div style="font-size:var(--text-xs);color:var(--c-text-muted)">
|
||||
<div class="text-xs-muted">
|
||||
${_esc(item.datum)} ${_esc(item.uhrzeit)}
|
||||
${item.menge_g ? ` · ${item.menge_g} g` : ''}
|
||||
</div>
|
||||
|
|
@ -1110,12 +1110,12 @@ window.Page_ernaehrung = (() => {
|
|||
<svg class="ph-icon" aria-hidden="true" style="flex-shrink:0;color:${col}">
|
||||
<use href="/icons/phosphor.svg#heartbeat"></use>
|
||||
</svg>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div class="flex-1-min">
|
||||
<div style="font-weight:600;font-size:var(--text-sm);color:${col}">
|
||||
${_esc(REAK_LABELS[item.reaktion_typ] || item.reaktion_typ)}
|
||||
<span style="font-weight:400;color:var(--c-text-muted)">(${item.intensitaet}/5)</span>
|
||||
</div>
|
||||
<div style="font-size:var(--text-xs);color:var(--c-text-muted)">
|
||||
<div class="text-xs-muted">
|
||||
${_esc(item.datum)} ${_esc(item.uhrzeit)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue