DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Bestellstatus im Kundenkonto deutlich sichtbar unterscheiden (unterwegs vs. angekommen)

Browse Source 
Bisher unterschied sich der Status nur durch eine kleine, ähnlich gefärbte
Pille — auf einen Blick kaum zu erkennen. Jetzt bekommt jede Bestellkarte
einen eigenen farbigen Rand plus dezenten Farbschein passend zum Status
(Blau = versendet/unterwegs, Grün = abgeschlossen/angekommen, Gold = in
Bearbeitung/Versand wird vorbereitet, Violett = bezahlt), zusätzlich ein
Icon direkt in der Status-Pille (🚚 unterwegs, ✅ angekommen, usw.) — genau
wie schon bei den Zahlungskarten im Checkout.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 13:19:52 +02:00
co-authored by Claude Sonnet 5
parent 5b14630986
commit 3c0747eb5b
5 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+34 -2
View File
@@ -1341,8 +1341,40 @@ a:focus-visible, button:focus-visible {
.order-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.order-no { display: block; font-weight: 700; font-size: 1.02rem; }
.order-meta { color: var(--c-text-muted); }
/* Bestellstatus in den Farben der jeweiligen Phase (siehe Pflichtenheft Punkt 12): unterwegs =
Akzentfarbe, abgeschlossen = ruhiges Grün, in Arbeit = neutral. */
/* Bestellstatus muss auf einen Blick klar unterscheidbar sein — "noch unterwegs" vs. "schon
angekommen" sind bewusst NICHT nur an der kleinen Textfarbe der Pille erkennbar, sondern an
der GANZEN Karte: eigene Randfarbe + dezenter Farbschein an der linken Kante + ein Icon direkt
in der Status-Pille. Genau wie bei den Zahlungskarten im Checkout (siehe .pay-card) — kräftig
genug, um sofort aufzufallen, aber gedeckt genug fürs dunkle Gesamtbild. */
.order-card { position: relative; border-left: 4px solid var(--status-color, rgba(244, 241, 247, 0.2)); }
.order-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, color-mix(in srgb, var(--status-color, transparent) 14%, transparent), transparent 45%);
pointer-events: none;
border-radius: inherit;
}
.order-card > * { position: relative; z-index: 1; }
.order-card-bezahlt { --status-color: #9b7fd6; }
.order-card-bearbeitung { --status-color: #e3b23c; }
.order-card-versandVorbereitet { --status-color: #e3b23c; }
.order-card-versendet { --status-color: var(--c-accent); }
.order-card-abgeschlossen { --status-color: #7ec8a0; }
.order-status { display: inline-flex; align-items: center; gap: 0.4em; }
.order-status::before { font-size: 0.95em; }
.order-status-bezahlt::before { content: "💳"; }
.order-status-bearbeitung::before { content: "⚙️"; }
.order-status-versandVorbereitet::before { content: "📦"; }
.order-status-versendet::before { content: "🚚"; }
.order-status-abgeschlossen::before { content: "✅"; }
.order-status-bezahlt { background: color-mix(in srgb, #9b7fd6 32%, transparent); border-color: color-mix(in srgb, #9b7fd6 55%, transparent); color: #d9cdf5; }
.order-status-bearbeitung { background: color-mix(in srgb, #e3b23c 30%, transparent); border-color: color-mix(in srgb, #e3b23c 55%, transparent); color: #f6dda0; }
.order-status-versandVorbereitet { background: color-mix(in srgb, #e3b23c 30%, transparent); border-color: color-mix(in srgb, #e3b23c 55%, transparent); color: #f6dda0; }
.order-status-versendet { background: color-mix(in srgb, var(--c-accent) 34%, transparent); border-color: color-mix(in srgb, var(--c-accent) 55%, transparent); }
.order-status-abgeschlossen { background: rgba(126, 200, 160, 0.28); border-color: rgba(126, 200, 160, 0.5); color: #cfeee0; }
.order-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }