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

Shop-Filter: Tier-Unterkategorien im Kategorie-Dropdown jetzt klar sichtbar

Browse Source 
Der native <select> mit optgroups zeigte Kuh/Hase/Wal/Oktopus/Schildkroete/
Pinguin zwar technisch an, aber in der schmucklosen Browser-eigenen Liste
kaum erkennbar (kein Kontrast, keine Struktur). Ersetzt durch ein eigenes,
zum Rest der Seite passendes Dropdown (Verlaufsrand-Look wie beim
Sprach-Umschalter): Hauptkategorien mit Icon als Gruppen-Header, Tier-
Unterkategorien darunter eingerueckt mit denselben freundlichen Namen wie auf
den Kategorie-Seiten ("Kuh „Frieda"", "Hase „HasiDog"" usw.) statt schlichtem
Kategorienamen. Filterlogik, URL-Preset (?kategorie=) und Barrierefreiheit
(role=listbox/option, aria-selected) unveraendert erhalten. Gilt fuer alle 4
Sprachen, gebaut und per Screenshot in offenem und geschlossenem Zustand
geprueft.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 02:49:10 +02:00
co-authored by Claude Sonnet 5
parent af0093e401
commit 22c475d6a5
5 changed files with 344 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+76 -1
View File
@@ -801,12 +801,87 @@ a:focus-visible, button:focus-visible {
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: start; }
.filters h3 { margin-bottom: 1rem; }
.filter-group { margin-bottom: 1.2rem; }
.filter-group label { display: block; font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.4rem; }
.filter-group label, #f-kategorie-label { display: block; font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.4rem; }
.filter-group select, .filter-group input[type="range"] { width: 100%; }
.filters select, .shop-toolbar select {
background: var(--c-anthracite); color: var(--c-text);
border: 1px solid rgba(244,241,247,0.15); border-radius: var(--radius-s); padding: 0.5em 0.7em;
}
/* Kategorie-Filter im Shop: eigenes Dropdown statt nativem <select> mit optgroups. Grund: die
Tier-Unterkategorien (Kuh, Hase, Wal, ...) waren in der schmucklosen Browser-eigenen
Optgroup-Liste zwar technisch vorhanden, aber kaum als eigene, auswählbare Zeilen zu erkennen.
Hier bekommen sie denselben "Karte mit Verlaufsrand"-Look wie der Rest der Seite, klar
eingerückt unter ihrer Hauptkategorie, mit demselben Namen wie auf den Kategorie-Seiten. */
.cat-filter { position: relative; width: 100%; }
.cat-filter-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6em;
width: 100%;
background: var(--c-anthracite);
color: var(--c-text);
border: 1.5px solid transparent;
background:
linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
linear-gradient(135deg, rgba(95, 211, 236, 0.5), rgba(155, 127, 214, 0.4) 45%, rgba(231, 135, 154, 0.32)) border-box;
border-radius: var(--radius-s);
padding: 0.55em 0.8em;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
text-align: left;
transition: box-shadow 0.2s var(--ease);
}
.cat-filter-btn:hover { box-shadow: var(--shadow-card); }
.cat-filter-btn .chevron { font-size: 0.65rem; opacity: 0.7; color: var(--c-accent); transition: transform 0.2s var(--ease); flex-shrink: 0; }
.cat-filter.open .cat-filter-btn .chevron { transform: rotate(180deg); }
.cat-filter-menu {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
max-height: min(60vh, 420px);
overflow-y: auto;
background: var(--c-anthracite-light);
border: 1px solid rgba(244, 241, 247, 0.12);
border-radius: var(--radius-m);
box-shadow: var(--shadow-card);
padding: 0.5rem;
display: none;
flex-direction: column;
gap: 0.1rem;
z-index: 60;
}
.cat-filter.open .cat-filter-menu { display: flex; }
.cat-filter-group { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.5rem; }
.cat-filter-group:first-of-type { margin-top: 0.2rem; }
.cat-filter-group-label {
padding: 0.3em 0.6em 0.1em;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-accent);
font-weight: 700;
}
.cat-filter-option {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
color: var(--c-text);
padding: 0.5em 0.6em;
border-radius: var(--radius-s);
font-size: 0.9rem;
cursor: pointer;
transition: background 0.15s var(--ease);
}
.cat-filter-option:hover { background: color-mix(in srgb, var(--c-accent) 14%, transparent); }
.cat-filter-option[aria-selected="true"] { background: color-mix(in srgb, var(--c-accent) 20%, transparent); font-weight: 700; }
.cat-filter-option.cat-filter-sub { padding-left: 1.4em; font-size: 0.88rem; opacity: 0.92; }
.cat-filter-option.cat-filter-sub::before { content: "— "; opacity: 0.6; }
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.legal-hint { margin-top: 2rem; }
.breadcrumb { margin-bottom: 0.6rem; font-size: 0.95rem; }