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

Verwaltung: alles in eigene, farblich unterschiedliche "Kisten" gepackt

Browse Source 
Auf Feedback ("das ist mir zu einfach, ich will das alles in Kisten ist") die komplette
Auswertungsseite umgebaut: jede zusammengehörige Gruppe (Bestellstatus, Kennzahlen, Alle
Bestellungen, Bestseller je Kategorie, Herkunft der Bestellungen, Stammkundschaft) steckt
jetzt in einer eigenen, klar abgegrenzten Box mit eigenem Icon-Abzeichen, eigener
Akzentfarbe (Cyan/Lila/Gold/Grün/Pink) und dezent pulsierendem Glanzrand — statt lose auf
der Seite zu stehen.

Genauso wichtig: die Leerzustände (bevor die erste echte Bestellung eingeht) sehen jetzt
nicht mehr trostlos aus — großes Icon + freundlicher Text statt nacktem Fließtext, jeweils
passend zur Box (📭 Bestellungen, 🧶 Bestseller, 🗺️ Herkunft, 💌 Stammkundschaft). Mit
echtem Screenshot-Vergleich (befüllt UND leer, per fetch-Mock simuliert) verifiziert.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 22:25:09 +02:00
co-authored by Claude Sonnet 5
parent af729ba571
commit e2b89483c2
2 changed files with 230 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+69
View File
@@ -2861,6 +2861,75 @@ a:focus-visible, button:focus-visible {
/* Interne Bestellverwaltung (/verwaltung/) — Status-Kacheln, Filterleiste, Auswertungs-Balken. */
/* "Kisten" — jede zusammengehörige Gruppe (Bestellstatus, Kennzahlen, Bestellliste, Bestseller,
Herkunft, Stammkundschaft) bekommt ihre eigene, klar abgegrenzte Box mit eigener Akzentfarbe
(--box-color, pro Kiste per inline style gesetzt) statt lose auf der Seite zu stehen — auf
Wunsch ("alles was zueinander passt in einer Kiste, richtig geil speziell") deutlich
eigenständiger gestaltet als eine normale .card: eigener farbiger Eckenschein, eigenes
Icon-Abzeichen vor dem Titel, dezent pulsierender Rand. */
.verwaltung-box {
position: relative;
overflow: hidden;
border-radius: var(--radius-l);
border: 1.5px solid color-mix(in srgb, var(--box-color, var(--c-accent)) 38%, transparent);
background: linear-gradient(155deg, color-mix(in srgb, var(--box-color, var(--c-accent)) 9%, var(--c-anthracite-light)), var(--c-anthracite));
padding: 1.6rem 1.7rem;
margin: 1.4rem 0;
animation: verwaltung-box-glow 3.4s ease-in-out infinite;
}
@keyframes verwaltung-box-glow {
0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--box-color, var(--c-accent)) 22%, transparent); }
50% { box-shadow: 0 0 22px -8px color-mix(in srgb, var(--box-color, var(--c-accent)) 55%, transparent); }
}
.verwaltung-box::before {
content: "";
position: absolute;
top: -45%;
right: -15%;
width: 260px;
height: 260px;
background: radial-gradient(circle, color-mix(in srgb, var(--box-color, var(--c-accent)) 30%, transparent), transparent 70%);
pointer-events: none;
}
.verwaltung-box-head {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 1.1rem;
position: relative;
z-index: 1;
}
.verwaltung-box-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
font-size: 1.3rem;
background: color-mix(in srgb, var(--box-color, var(--c-accent)) 24%, transparent);
border: 1px solid color-mix(in srgb, var(--box-color, var(--c-accent)) 55%, transparent);
}
.verwaltung-box-head h2 { margin: 0; font-size: 1.3rem; }
.verwaltung-box-body { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .verwaltung-box { animation: none; } }
/* Leerzustände innerhalb einer Kiste — großes Icon + kurzer, freundlicher Text statt nacktem
Fließtext, damit auch "noch nichts da" nicht trostlos wirkt. */
.verwaltung-box-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.4rem;
padding: 2.2rem 1rem;
color: var(--c-text-muted);
}
.verwaltung-box-empty-icon { font-size: 2.6rem; opacity: 0.75; }
.verwaltung-box-empty p { margin: 0; }
.verwaltung-box-empty p:first-of-type { color: var(--c-text); font-weight: 600; font-size: 1.02rem; }
/* Hero-Kopf: dieselbe "besondere" Formsprache wie die anderen Premium-Karten der Seite
(wanderndes Verlaufslicht + pulsierender Rand + Funkeln), passend zu einer Seite, die "alles
übertrifft" — nur dezenter/edler gehalten, weil es ein Arbeits-Dashboard ist, kein Verkaufs-