Scarriffle/Vorrania
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Verlauf: Bewegungsart als Sinnbild statt als Wort

Browse Source 
"Eingelagert"/"Ausgelagert"/"Korrektur" standen als Textbadge in einer eigenen
Spalte - in der schmalen Ansicht als dritte beschriftete Zeile je Eintrag. Jetzt
eine getoente Kachel mit Icon: Kiste mit Pfeil hinein, Kiste mit Pfeil heraus,
Stapel mit Stift (aus open-box (1).svg, open-box.svg, edit-server.svg). Die
Farbe traegt dieselbe Bedeutung wie vorher das Badge - gruen rein, orange raus,
neutral Korrektur; Titel und aria-label behalten das Wort.

Die Dashboard-Karte bekommt dabei das Layout aus der Skizze: Kachel links,
Zeitpunkt ueber Produkt, ohne Tabelle. Die Verlaufs-SEITE bleibt eine Tabelle -
dort stehen noch Menge und Benutzer -, dort weicht nur das Wort der Kachel.

Die Icon-Komponente kann jetzt auch GEFUELLTE Grafiken mit eigenem viewBox; die
vorhandenen sind Strichzeichnungen (fill:none, stroke:currentColor) und
vertragen sich damit nicht. Die Pfaddaten sind per Skript aus den SVGs
uebernommen, nicht abgetippt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-08-16 12:38:05 +02:00
co-authored by Claude Opus 5
parent e9a2b70728
commit 9a2dc3a482
8 changed files with 136 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+23
View File
@@ -487,6 +487,28 @@ td select { width: auto; min-width: 0; max-width: 100%; }
background: var(--surface-2); color: var(--muted);
}
.badge.accent { background: var(--accent-soft); color: var(--accent); }
/* Verlauf: die Bewegungsart als Sinnbild statt als Wort. Ein gefuelltes Icon
in einer getoenten Kachel – die Farbe traegt dieselbe Bedeutung wie vorher
das Badge (gruen rein, orange raus, neutral Korrektur). */
.bewegung-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
background: var(--accent-soft); color: var(--accent);
}
.bewegung-icon.ein { background: #e6f4ec; color: var(--ok); }
.bewegung-icon.aus { background: var(--warn-soft); color: var(--warn); }
/* Eine Bewegung als Zeile: Kachel links, Zeitpunkt ueber Produkt. */
.bewegung-liste { display: flex; flex-direction: column; }
.bewegung-zeile {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-2) 0; border-bottom: 1px solid var(--border);
}
.bewegung-zeile:last-child { border-bottom: 0; }
.bewegung-zeile .text { min-width: 0; }
.bewegung-zeile .zeit { color: var(--muted); font-size: 0.82rem; }
.bewegung-zeile .produkt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.ok { background: #e6f4ec; color: var(--ok); }
@@ -996,6 +1018,7 @@ select.zeitraum:hover { color: var(--text); }
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.badge.ok { background: #14301f; }
.bewegung-icon.ein { background: #14301f; }
.alert.ok { background: #14301f; border-color: #21503a; }
}
:root[data-theme="dark"] {