DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 2 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/pages/verwaltung/index.astro
+57 -55
View File
@@ -137,63 +137,70 @@ const lang: Locale = "de";
</div>
</section>
{/* Auswertung (Bestseller/Herkunft/Stammkundschaft) ist standardmäßig eingeklappt und
erscheint per Klick sofort hier, direkt unter den beiden Kisten oben — statt immer
Platz auf der Seite zu belegen, bevor man überhaupt Bestellungen zum Auswerten hat. */}
{/* Auswertung (Bestseller/Herkunft/Stammkundschaft): jede Kiste ist jetzt SELBST der
Klick-Auslöser (Wunsch: "es sollten Kisten sein wo man drauf drückt und dann gehen die
anderen Sachen auf") — kein separater Knopf mehr davor. Jede Box startet eingeklappt
(nur Kopfzeile sichtbar) und klappt beim Klick auf die Kopfzeile ihren eigenen Inhalt auf,
unabhängig von den anderen beiden Kisten. */}
<section class="section-tight">
<div class="container">
<button type="button" class="btn btn-outline verwaltung-auswertung-toggle" id="verwaltung-auswertung-toggle" aria-expanded="false" aria-controls="verwaltung-auswertung-wrapper">
<span aria-hidden="true">📊</span> Auswertung anzeigen <span class="verwaltung-toggle-chevron" aria-hidden="true">▾</span>
</button>
<div id="verwaltung-auswertung-wrapper" hidden>
<div class="verwaltung-box" style="--box-color: #e3b23c;">
<div class="verwaltung-box-head">
<div id="verwaltung-auswertung-wrapper">
<div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #e3b23c;" data-collapsible-box>
<button type="button" class="verwaltung-box-head verwaltung-box-head-btn" aria-expanded="false">
<span class="verwaltung-box-icon" aria-hidden="true">🏆</span>
<h2>Bestseller je Kategorie</h2>
</div>
<span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
</button>
<div class="verwaltung-box-body">
<div class="verwaltung-box-empty" id="verwaltung-kat-empty" style="display:none;">
<span class="verwaltung-box-empty-icon" aria-hidden="true">🧶</span>
<p>Noch keine ausgewerteten Verkäufe.</p>
<p class="small">Hier siehst du bald, welche Produkte je Kategorie am besten laufen (stornierte Bestellungen zählen nicht mit).</p>
<div class="verwaltung-box-body-inner">
<div class="verwaltung-box-empty" id="verwaltung-kat-empty" style="display:none;">
<span class="verwaltung-box-empty-icon" aria-hidden="true">🧶</span>
<p>Noch keine ausgewerteten Verkäufe.</p>
<p class="small">Hier siehst du bald, welche Produkte je Kategorie am besten laufen (stornierte Bestellungen zählen nicht mit).</p>
</div>
{/* Jede Kategorie ist eine eigene Kachel im selben Stil wie die Bestellstatus-
Kacheln oben — Klick öffnet direkt darunter die volle Produktliste. */}
<div class="verwaltung-analyse-grid" id="verwaltung-kat-grid"></div>
<div class="verwaltung-analyse-detail" id="verwaltung-kat-detail" hidden></div>
</div>
{/* Jede Kategorie ist jetzt eine eigene Kachel im selben Stil wie die
Bestellstatus-Kacheln oben — Klick öffnet direkt darunter die volle Produktliste. */}
<div class="verwaltung-analyse-grid" id="verwaltung-kat-grid"></div>
<div class="verwaltung-analyse-detail" id="verwaltung-kat-detail" hidden></div>
</div>
</div>
<div class="verwaltung-box" style="--box-color: #6ecb8f;">
<div class="verwaltung-box-head">
<div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #6ecb8f;" data-collapsible-box>
<button type="button" class="verwaltung-box-head verwaltung-box-head-btn" aria-expanded="false">
<span class="verwaltung-box-icon" aria-hidden="true">🌍</span>
<h2>Herkunft der Bestellungen</h2>
</div>
<span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
</button>
<div class="verwaltung-box-body">
<div class="verwaltung-box-empty" id="verwaltung-land-empty" style="display:none;">
<span class="verwaltung-box-empty-icon" aria-hidden="true">🗺️</span>
<p>Noch keine Bestellungen.</p>
<p class="small">Sobald Bestellungen eingehen, siehst du hier den Anteil je Land (DE/AT/CH/LU).</p>
<div class="verwaltung-box-body-inner">
<div class="verwaltung-box-empty" id="verwaltung-land-empty" style="display:none;">
<span class="verwaltung-box-empty-icon" aria-hidden="true">🗺️</span>
<p>Noch keine Bestellungen.</p>
<p class="small">Sobald Bestellungen eingehen, siehst du hier den Anteil je Land (DE/AT/CH/LU).</p>
</div>
<div class="verwaltung-analyse-grid" id="verwaltung-land-grid"></div>
<div class="verwaltung-analyse-detail" id="verwaltung-land-detail" hidden></div>
</div>
<div class="verwaltung-analyse-grid" id="verwaltung-land-grid"></div>
<div class="verwaltung-analyse-detail" id="verwaltung-land-detail" hidden></div>
</div>
</div>
<div class="verwaltung-box" style="--box-color: var(--c-sale);">
<div class="verwaltung-box-head">
<div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: var(--c-sale);" data-collapsible-box>
<button type="button" class="verwaltung-box-head verwaltung-box-head-btn" aria-expanded="false">
<span class="verwaltung-box-icon" aria-hidden="true">👑</span>
<h2>Stammkundschaft</h2>
</div>
<span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
</button>
<div class="verwaltung-box-body">
<div class="verwaltung-box-empty" id="verwaltung-kunden-empty" style="display:none;">
<span class="verwaltung-box-empty-icon" aria-hidden="true">💌</span>
<p>Noch keine wiederkehrende Kundschaft.</p>
<p class="small">Sobald jemand zum zweiten Mal bestellt, erscheint sie hier — sortiert nach bisherigem Umsatz.</p>
<div class="verwaltung-box-body-inner">
<div class="verwaltung-box-empty" id="verwaltung-kunden-empty" style="display:none;">
<span class="verwaltung-box-empty-icon" aria-hidden="true">💌</span>
<p>Noch keine wiederkehrende Kundschaft.</p>
<p class="small">Sobald jemand zum zweiten Mal bestellt, erscheint sie hier — sortiert nach bisherigem Umsatz.</p>
</div>
<div class="verwaltung-analyse-grid" id="verwaltung-kunden-grid"></div>
<div class="verwaltung-analyse-detail" id="verwaltung-kunden-detail" hidden></div>
</div>
<div class="verwaltung-analyse-grid" id="verwaltung-kunden-grid"></div>
<div class="verwaltung-analyse-detail" id="verwaltung-kunden-detail" hidden></div>
</div>
</div>
</div>
@@ -857,24 +864,19 @@ const lang: Locale = "de";
document.getElementById("verwaltung-new-refresh-btn")?.addEventListener("click", ladeUndRendere);
document.getElementById("verwaltung-retry-btn")?.addEventListener("click", ladeUndRendere);
// ── Auswertung (Bestseller/Herkunft/Stammkundschaft): standardmäßig eingeklappt, erscheint
// per Klick sofort unter der Bestellstatus-/Kennzahlen-Kiste. ──
const auswertungToggleBtn = document.getElementById("verwaltung-auswertung-toggle");
const auswertungWrapper = document.getElementById("verwaltung-auswertung-wrapper");
auswertungToggleBtn?.addEventListener("click", () => {
const eingeklappt = auswertungWrapper.hasAttribute("hidden");
if (eingeklappt) {
auswertungWrapper.removeAttribute("hidden");
auswertungToggleBtn.setAttribute("aria-expanded", "true");
auswertungToggleBtn.classList.add("is-open");
auswertungToggleBtn.innerHTML = '<span aria-hidden="true">📊</span> Auswertung ausblenden <span class="verwaltung-toggle-chevron" aria-hidden="true">▾</span>';
auswertungWrapper.scrollIntoView({ behavior: "smooth", block: "start" });
} else {
auswertungWrapper.setAttribute("hidden", "");
auswertungToggleBtn.setAttribute("aria-expanded", "false");
auswertungToggleBtn.classList.remove("is-open");
auswertungToggleBtn.innerHTML = '<span aria-hidden="true">📊</span> Auswertung anzeigen <span class="verwaltung-toggle-chevron" aria-hidden="true">▾</span>';
}
// ── Auswertung (Bestseller/Herkunft/Stammkundschaft): jede Kiste ist SELBST der Klick-
// Auslöser für ihren eigenen Inhalt — kein separater Knopf mehr davor. Alle drei starten
// eingeklappt (nur Kopfzeile sichtbar) und lassen sich unabhängig voneinander auf-/zuklappen. ──
document.querySelectorAll("[data-collapsible-box] > .verwaltung-box-head-btn").forEach((btn) => {
btn.addEventListener("click", () => {
const box = btn.closest("[data-collapsible-box]");
const wirdJetztGeoeffnet = box.classList.contains("is-collapsed");
box.classList.toggle("is-collapsed");
btn.setAttribute("aria-expanded", String(wirdJetztGeoeffnet));
if (wirdJetztGeoeffnet) {
box.scrollIntoView({ behavior: "smooth", block: "start" });
}
});
});
// ── CSV-Export: exportiert genau die aktuell sichtbare (gefilterte) Liste — für die
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