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
328
backend/static/css/lists.css
Normal file
328
backend/static/css/lists.css
Normal file
|
|
@ -0,0 +1,328 @@
|
|||
/* ============================================================
|
||||
BAN YARO — Listen-Komponenten
|
||||
Wiederverwendbare Klassen für Seiten mit Listen+Detail-Pattern:
|
||||
Notes, Expenses, Health, Diary, Behavior-Log, ...
|
||||
|
||||
Verwendung:
|
||||
<div class="list-shell">
|
||||
<div class="list-filter-bar">...</div>
|
||||
<div class="list-group-header">Mai 2026</div>
|
||||
<div class="list-item-card list-item-card--clickable" data-id="...">
|
||||
<div class="list-item-meta-badge" style="--meta-color:#f97316">🍖</div>
|
||||
<div class="list-item-body">
|
||||
<div class="list-item-title">Titel</div>
|
||||
<div class="list-item-text">Vorschau-Text</div>
|
||||
<div class="list-item-meta-row">
|
||||
<span>10:30</span> · <span>📍 Berlin</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item-amount">25,50 €</div>
|
||||
</div>
|
||||
</div>
|
||||
============================================================ */
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Shell + Header
|
||||
------------------------------------------------------------ */
|
||||
.list-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.list-filter-bar {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-search-wrap {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.list-search-wrap > input { width: 100%; }
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Group-Header (Monat / Datums-Gruppe)
|
||||
------------------------------------------------------------ */
|
||||
.list-group-header {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
color: var(--c-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: var(--space-3) var(--space-4) var(--space-1);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Item-Card (universelle Listen-Karte)
|
||||
------------------------------------------------------------ */
|
||||
.list-item-card {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--c-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--c-border-light);
|
||||
align-items: flex-start;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
}
|
||||
|
||||
.list-item-card--clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-item-card--clickable:hover {
|
||||
background: var(--c-surface-2);
|
||||
}
|
||||
.list-item-card--clickable:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.list-item-card--milestone {
|
||||
border-left: 3px solid #f5c518;
|
||||
}
|
||||
|
||||
.list-item-card--inactive {
|
||||
opacity: 0.55;
|
||||
filter: grayscale(0.8);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Linke Spalte: Date-Col oder Meta-Badge
|
||||
------------------------------------------------------------ */
|
||||
|
||||
/* Date-Column (Diary-Style: Wochentag + Tag) */
|
||||
.list-item-date-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
min-width: 44px;
|
||||
text-align: center;
|
||||
}
|
||||
.list-item-date-col-weekday {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
color: var(--c-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.list-item-date-col-day {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--c-text);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Meta-Badge (Expenses/Health-Style: farbiges Icon im Kreis) */
|
||||
.list-item-meta-badge {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: color-mix(in srgb, var(--meta-color, var(--c-primary)) 15%, transparent);
|
||||
color: var(--meta-color, var(--c-primary));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.4rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Body (Hauptinhalt mittig)
|
||||
------------------------------------------------------------ */
|
||||
.list-item-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.list-item-title {
|
||||
font-weight: 600;
|
||||
font-size: var(--text-base);
|
||||
color: var(--c-text);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.list-item-text {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--c-text-secondary);
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-item-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--c-text-muted);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Chips + Micro-Badges (in Item-Body)
|
||||
------------------------------------------------------------ */
|
||||
.list-item-chips {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.list-item-chip {
|
||||
padding: 2px var(--space-2);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: color-mix(in srgb, var(--chip-color, var(--c-primary)) 15%, transparent);
|
||||
color: var(--chip-color, var(--c-primary));
|
||||
}
|
||||
|
||||
.list-item-micro-badges {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.list-item-micro-badge {
|
||||
padding: 1px 6px;
|
||||
background: var(--c-surface-2);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
color: var(--c-text-secondary);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Rechte Spalte: Thumbnail, Amount, Actions
|
||||
------------------------------------------------------------ */
|
||||
.list-item-thumb {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
background: var(--c-surface-2);
|
||||
position: relative;
|
||||
}
|
||||
.list-item-thumb-count {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
background: rgba(0,0,0,0.65);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
padding: 1px 5px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.list-item-amount {
|
||||
font-weight: 700;
|
||||
font-size: var(--text-base);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
}
|
||||
.list-item-amount--positive { color: var(--c-success); }
|
||||
.list-item-amount--negative { color: var(--c-danger); }
|
||||
.list-item-amount--neutral { color: var(--c-text); }
|
||||
|
||||
.list-item-actions {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
}
|
||||
.list-item-action-btn {
|
||||
padding: 6px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--c-text-muted);
|
||||
cursor: pointer;
|
||||
font-size: var(--text-sm);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.list-item-action-btn:hover {
|
||||
color: var(--c-text);
|
||||
background: var(--c-surface-2);
|
||||
}
|
||||
.list-item-action-btn--danger:hover {
|
||||
color: var(--c-danger);
|
||||
background: color-mix(in srgb, var(--c-danger) 10%, transparent);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Reminder/Hinweis-Banner (Health-Style)
|
||||
------------------------------------------------------------ */
|
||||
.list-reminders-banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
}
|
||||
|
||||
.list-reminder-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: var(--c-surface);
|
||||
border-radius: var(--radius-md);
|
||||
border-left: 3px solid var(--c-text-muted);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.list-reminder-item--urgent { border-left-color: var(--c-danger); }
|
||||
.list-reminder-item--warning { border-left-color: var(--c-warning, #f59e0b); }
|
||||
.list-reminder-item--success { border-left-color: var(--c-success); }
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
FAB (Floating Action Button)
|
||||
------------------------------------------------------------ */
|
||||
.list-fab {
|
||||
position: fixed;
|
||||
bottom: calc(env(safe-area-inset-bottom, 16px) + 16px);
|
||||
right: 20px;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 50%;
|
||||
background: var(--c-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 18px rgba(196,132,58,0.4);
|
||||
font-size: 26px;
|
||||
z-index: 80;
|
||||
transition: transform 0.12s, box-shadow 0.12s;
|
||||
}
|
||||
.list-fab:active {
|
||||
transform: scale(0.92);
|
||||
box-shadow: 0 2px 10px rgba(196,132,58,0.3);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Load-More + Empty-List in Listen-Context
|
||||
------------------------------------------------------------ */
|
||||
.list-load-more {
|
||||
text-align: center;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue