Sprint C: Listen-Familie konsolidiert (Notes/Expenses/Health), SW by-v1104
Neue zentrale CSS-Datei lists.css (~280 Zeilen) mit Listen-Komponenten: - .list-shell, .list-filter-bar, .list-search-wrap - .list-group-header - .list-item-card + Modifier: --clickable, --milestone, --inactive - .list-item-date-col + sub-elements (für Diary-Style) - .list-item-meta-badge mit --meta-color (für Expenses/Health Icons) - .list-item-body, .list-item-title, .list-item-text, .list-item-meta-row - .list-item-chips + .list-item-chip mit --chip-color - .list-item-micro-badges + .list-item-micro-badge - .list-item-thumb (+ .list-item-thumb-count Overlay) - .list-item-amount (+ --positive/--negative/--neutral) - .list-item-actions + .list-item-action-btn (+ --danger) - .list-reminders-banner + .list-reminder-item (+ --urgent/--warning/--success) - .list-fab (FAB mit safe-area-inset) MIGRATIONEN: notes.js — 10+ Klassen ersetzt: - .notes-card → .list-item-card list-item-card--clickable - .notes-rubrik-chip → .list-item-chip mit --chip-color - .notes-card-meta → .list-item-meta-row - .notes-action-btn → .list-item-action-btn - .notes-group-label → .list-group-header - Notes-spezifische Klassen als Modifier behalten (vertikales Layout, pre-wrap text, Top-Zeile mit Actions rechts oben) - Alte CSS-Definitionen im Inline-<style> als TODO markiert expenses.js — komplette Item-Card-Migration: - .exp-entry → .list-item-card list-item-card--clickable - .exp-entry-icon-badge mit --kat-color → .list-item-meta-badge --meta-color - .exp-entry-betrag → .list-item-amount list-item-amount--negative - .exp-entry-del → .list-item-action-btn list-item-action-btn--danger - .exp-recurring-card--inaktiv → .list-item-card--inactive - .exp-fab → .list-fab - UI.moneyInput + UI.parseMoney in beide Forms integriert (€-Prefix, Komma-Dezimal) - Hero-Card + Statistik/Kacheln behalten (spezifisch) health.js — 9 Card-Renderings migriert: - Impfungen/Tierarzt/Gewicht/Läufigkeit/Medikamente/Allergien/ Dokumente/Tierarztpraxis/Befunde - .health-card → .list-item-card list-item-card--clickable - Health-Ampel parallel behalten (.health-card-ampel + Linie links) - Reminder-Banner: .health-reminder-* → .list-reminders-banner + .list-reminder-item--urgent/--warning - Gewicht-Wert: .list-item-amount für kg-Anzeigen - Form-Modals + KI-Buttons + Transponder-Chip unangetastet (anderer Scope) Tests 19/19 grün. Kein visueller Diff erwartet — Modifier-Klassen bewahren spezifische Layouts.
This commit is contained in:
parent
1de39536af
commit
9a066cb24c
9 changed files with 484 additions and 157 deletions
|
|
@ -125,7 +125,7 @@ window.Page_notes = (() => {
|
|||
.filter(([, items]) => items.length > 0)
|
||||
.map(([label, items]) => `
|
||||
<div class="notes-group">
|
||||
<div class="notes-group-label">${_esc(label)}</div>
|
||||
<div class="list-group-header">${_esc(label)}</div>
|
||||
${items.map(_noteCard).join('')}
|
||||
</div>
|
||||
`).join('');
|
||||
|
|
@ -243,21 +243,28 @@ window.Page_notes = (() => {
|
|||
|
||||
/* Gruppen */
|
||||
.notes-group { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
/* TODO nach Migration entfernen: ersetzt durch .list-group-header in lists.css */
|
||||
.notes-group-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .05em; padding: var(--space-1) 0; }
|
||||
|
||||
/* Karten */
|
||||
.notes-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.notes-card-top { display: flex; align-items: flex-start; gap: var(--space-2); }
|
||||
.notes-rubrik-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 2px var(--space-2); border-radius: 999px; flex-shrink: 0; }
|
||||
/* Karten — Notes-spezifischer Override: vertikales Layout statt horizontalem .list-item-card */
|
||||
.notes-card { flex-direction: column; gap: var(--space-2); }
|
||||
.notes-card-top { display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; }
|
||||
/* TODO nach Migration entfernen: ersetzt durch .list-item-chip */
|
||||
/* .notes-rubrik-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 2px var(--space-2); border-radius: 999px; flex-shrink: 0; } */
|
||||
.notes-parent-label { font-size: var(--text-xs); color: var(--c-text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
|
||||
.notes-card-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--c-text-muted); }
|
||||
.notes-card-actions { display: flex; gap: var(--space-2); margin-left: auto; flex-shrink: 0; }
|
||||
.notes-card-text { font-size: var(--text-sm); color: var(--c-text); line-height: 1.55; white-space: pre-wrap; margin: 0; }
|
||||
.notes-micro-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
|
||||
.notes-micro-badge { font-size: var(--text-xs); padding: 2px 6px; border-radius: var(--radius-sm); background: var(--c-surface-2); color: var(--c-text-secondary); }
|
||||
.notes-action-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-muted); cursor: pointer; font-size: 1rem; transition: background .15s, color .15s; }
|
||||
.notes-action-btn:hover { background: var(--c-surface); color: var(--c-text); }
|
||||
.notes-action-btn--danger:hover { background: #fef2f2; color: var(--c-danger); border-color: var(--c-danger); }
|
||||
/* TODO nach Migration entfernen: ersetzt durch .list-item-meta-row */
|
||||
/* .notes-card-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--c-text-muted); } */
|
||||
/* Notes-Override: Actions in Top-Zeile rechts ausrichten (statt align-self:center bei list-item-actions) */
|
||||
.notes-card-actions { margin-left: auto; align-self: flex-start; }
|
||||
/* Notes-Override: Text ohne -webkit-line-clamp (komplett anzeigen) + pre-wrap */
|
||||
.notes-card-text { line-height: 1.55; white-space: pre-wrap; margin: 0; display: block; -webkit-line-clamp: unset; overflow: visible; color: var(--c-text); }
|
||||
/* TODO nach Migration entfernen: ersetzt durch .list-item-micro-badges / .list-item-micro-badge */
|
||||
/* .notes-micro-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); } */
|
||||
/* .notes-micro-badge { font-size: var(--text-xs); padding: 2px 6px; border-radius: var(--radius-sm); background: var(--c-surface-2); color: var(--c-text-secondary); } */
|
||||
/* TODO nach Migration entfernen: ersetzt durch .list-item-action-btn / --danger */
|
||||
/* .notes-action-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-muted); cursor: pointer; font-size: 1rem; transition: background .15s, color .15s; } */
|
||||
/* .notes-action-btn:hover { background: var(--c-surface); color: var(--c-text); } */
|
||||
/* .notes-action-btn--danger:hover { background: #fef2f2; color: var(--c-danger); border-color: var(--c-danger); } */
|
||||
|
||||
.notes-list { display: flex; flex-direction: column; gap: var(--space-4); }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
|
@ -314,11 +321,10 @@ window.Page_notes = (() => {
|
|||
const hasLocation = !!note.location_name;
|
||||
|
||||
return `
|
||||
<div class="notes-card" data-id="${note.id}">
|
||||
<div class="list-item-card list-item-card--clickable notes-card" data-id="${note.id}">
|
||||
<!-- Top-Zeile: Rubrik-Chip + parent_label + Zeit + Buttons -->
|
||||
<div class="notes-card-top">
|
||||
<span class="notes-rubrik-chip"
|
||||
style="background:${rb.color}22;color:${rb.color}">
|
||||
<span class="list-item-chip" style="--chip-color:${rb.color}">
|
||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#${rb.icon}"></use></svg>
|
||||
${_esc(rb.label)}
|
||||
</span>
|
||||
|
|
@ -326,28 +332,28 @@ window.Page_notes = (() => {
|
|||
? `<span class="notes-parent-label" title="${_esc(note.parent_label)}">${_esc(note.parent_label)}</span>`
|
||||
: ''
|
||||
}
|
||||
<div class="notes-card-actions">
|
||||
<button class="notes-action-btn notes-edit-btn" data-id="${note.id}" title="Bearbeiten">
|
||||
<div class="list-item-actions notes-card-actions">
|
||||
<button class="list-item-action-btn notes-edit-btn" data-id="${note.id}" title="Bearbeiten">
|
||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#pencil"></use></svg>
|
||||
</button>
|
||||
<button class="notes-action-btn notes-action-btn--danger notes-delete-btn" data-id="${note.id}" title="Löschen">
|
||||
<button class="list-item-action-btn list-item-action-btn--danger notes-delete-btn" data-id="${note.id}" title="Löschen">
|
||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#trash"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notiztext -->
|
||||
<p class="notes-card-text">${_esc(_truncate(note.text))}</p>
|
||||
<p class="list-item-text notes-card-text">${_esc(_truncate(note.text))}</p>
|
||||
|
||||
<!-- Micro-Badges -->
|
||||
${microBadges.length ? `
|
||||
<div class="notes-micro-badges">
|
||||
${microBadges.map(b => `<span class="notes-micro-badge">${_esc(b)}</span>`).join('')}
|
||||
<div class="list-item-micro-badges">
|
||||
${microBadges.map(b => `<span class="list-item-micro-badge">${_esc(b)}</span>`).join('')}
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- Meta: Zeit + Ort -->
|
||||
<div class="notes-card-meta">
|
||||
<div class="list-item-meta-row">
|
||||
<svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#clock"></use></svg>
|
||||
${_esc(_formatTime(note.updated_at || note.created_at))}
|
||||
${hasLocation ? `<svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#map-pin"></use></svg> ${_esc(note.location_name)}` : ''}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue