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

Verwaltung: Auswertungs-Kisten sind jetzt selbst der Klick-Auslöser (Accordion statt Extra-Knopf

Browse Source 
Der separate "Auswertung anzeigen"-Knopf war nicht der Plan — stattdessen sind
jetzt die drei Kisten (Bestseller je Kategorie / Herkunft der Bestellungen /
Stammkundschaft) selbst klickbar und klappen unabhängig voneinander ihren
eigenen Inhalt auf, per sanfter CSS-Grid-Animation und rotierendem Chevron.
Startzustand: alle drei eingeklappt (nur Kopfzeile sichtbar).

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 23:12:52 +02:00
co-authored by Claude Sonnet 5
parent 03a9fa234c
commit 76db073cb0
2 changed files with 102 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+45 -14
View File
@@ -2937,21 +2937,52 @@ a:focus-visible, button:focus-visible {
.verwaltung-box-empty p { margin: 0; }
.verwaltung-box-empty p:first-of-type { color: var(--c-text); font-weight: 600; font-size: 1.02rem; }
/* Ein-/Ausklapp-Knopf für die Auswertung — steht direkt unter der Bestellstatus-/Kennzahlen-
Kiste, die Auswertungs-Kisten selbst bleiben bis zum Klick unsichtbar (siehe [hidden] auf
#verwaltung-auswertung-wrapper), damit sie nicht permanent Platz beanspruchen. */
.verwaltung-auswertung-toggle {
display: inline-flex;
align-items: center;
gap: 0.5em;
border-color: color-mix(in srgb, #e3b23c 45%, transparent);
color: var(--c-text);
}
.verwaltung-auswertung-toggle:hover { border-color: #e3b23c; background: color-mix(in srgb, #e3b23c 12%, transparent); }
.verwaltung-toggle-chevron { transition: transform 0.2s var(--ease); }
.verwaltung-auswertung-toggle.is-open .verwaltung-toggle-chevron { transform: rotate(180deg); }
/* Auswertungs-Kisten (Bestseller/Herkunft/Stammkundschaft) sind jetzt SELBST der Klick-Auslöser
für ihren eigenen Inhalt (Wunsch: "es sollten Kisten sein wo man drauf drückt und dann gehen
die anderen Sachen auf") — kein separater Knopf mehr davor. Jede startet eingeklappt (nur
Kopfzeile sichtbar) und lässt sich unabhängig von den anderen beiden öffnen/schließen. */
#verwaltung-auswertung-wrapper { margin-top: 1rem; }
#verwaltung-auswertung-wrapper[hidden] { display: none; }
.verwaltung-box-collapsible .verwaltung-box-body {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.25s var(--ease);
}
.verwaltung-box-collapsible .verwaltung-box-body-inner {
min-height: 0;
overflow: hidden;
opacity: 1;
transition: opacity 0.2s var(--ease);
}
.verwaltung-box-collapsible.is-collapsed .verwaltung-box-body { grid-template-rows: 0fr; }
.verwaltung-box-collapsible.is-collapsed .verwaltung-box-body-inner { opacity: 0; }
.verwaltung-box-collapsible.is-collapsed .verwaltung-box-head-btn { margin-bottom: 0; }
.verwaltung-box-head-btn {
display: flex;
align-items: center;
gap: 0.8rem;
width: 100%;
background: transparent;
border: none;
padding: 0;
margin: 0 0 1.1rem;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.verwaltung-box-head-btn h2 { flex: 1; }
.verwaltung-box-chevron {
flex-shrink: 0;
font-size: 1.1rem;
color: var(--c-text-muted);
transition: transform 0.25s var(--ease);
}
.verwaltung-box-collapsible.is-collapsed .verwaltung-box-chevron { transform: rotate(-90deg); }
.verwaltung-box-collapsible:not(.is-collapsed) .verwaltung-box-head-btn { color: var(--c-text); }
@media (prefers-reduced-motion: reduce) {
.verwaltung-box-collapsible .verwaltung-box-body,
.verwaltung-box-chevron { transition: none; }
}
/* Hero-Kopf: dieselbe "besondere" Formsprache wie die anderen Premium-Karten der Seite
(wanderndes Verlaufslicht + pulsierender Rand + Funkeln), passend zu einer Seite, die "alles