Shop-Filter: Tier-Unterkategorien im Kategorie-Dropdown jetzt klar sichtbar
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
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
af0093e401
commit
22c475d6a5
@@ -1,7 +1,7 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout.astro";
|
||||
import ProductCard from "../../../components/ProductCard.astro";
|
||||
import { categories } from "../../../data/categories";
|
||||
import { categories, subcategoryChipLabel } from "../../../data/categories";
|
||||
import { products } from "../../../data/products";
|
||||
import type { Locale } from "../../../i18n/config";
|
||||
import { useTranslations } from "../../../i18n/ui";
|
||||
@@ -25,20 +25,30 @@ const t = useTranslations(lang);
|
||||
<aside class="filters card" aria-label={t.shop.filters}>
|
||||
<h3>{t.shop.filters}</h3>
|
||||
<div class="filter-group">
|
||||
<label for="f-kategorie">{t.shop.categoryLabel}</label>
|
||||
<select id="f-kategorie">
|
||||
<option value="">{t.shop.allCategories}</option>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<optgroup label={c.name[lang]}>
|
||||
<option value={c.slug}>{c.name[lang]} ({t.shop.allCategories})</option>
|
||||
{c.subcategories.map((s) => <option value={`sub:${s.slug}`}>— {s.name[lang]}</option>)}
|
||||
</optgroup>
|
||||
) : (
|
||||
<option value={c.slug}>{c.name[lang]}</option>
|
||||
)
|
||||
))}
|
||||
</select>
|
||||
<span id="f-kategorie-label">{t.shop.categoryLabel}</span>
|
||||
<div class="cat-filter" id="cat-filter">
|
||||
<input type="hidden" id="f-kategorie" value="" />
|
||||
<button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span id="cat-filter-current">{t.shop.allCategories}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
|
||||
<button type="button" class="cat-filter-option" data-value="" data-label={t.shop.allCategories} role="option" aria-selected="true">{t.shop.allCategories}</button>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<div class="cat-filter-group">
|
||||
<span class="cat-filter-group-label" aria-hidden="true">{c.icon} {c.name[lang]}</span>
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{t.shop.allCategories} – {c.name[lang]}</button>
|
||||
{c.subcategories.map((s) => (
|
||||
<button type="button" class="cat-filter-option cat-filter-sub" data-value={`sub:${s.slug}`} data-label={subcategoryChipLabel(s, lang)} role="option" aria-selected="false">{subcategoryChipLabel(s, lang)}</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{c.icon} {c.name[lang]}</button>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="f-preis">{t.shop.priceUpTo}</label>
|
||||
@@ -134,11 +144,49 @@ const t = useTranslations(lang);
|
||||
sorted.forEach((el) => grid.appendChild(el));
|
||||
}
|
||||
|
||||
[kategorieSel, preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
[preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
|
||||
const catFilter = document.getElementById("cat-filter");
|
||||
const catFilterBtn = document.getElementById("cat-filter-btn");
|
||||
const catFilterCurrent = document.getElementById("cat-filter-current");
|
||||
const catFilterOptions = Array.from(catFilter.querySelectorAll(".cat-filter-option"));
|
||||
|
||||
function selectKategorie(value, label) {
|
||||
kategorieSel.value = value;
|
||||
catFilterCurrent.textContent = label;
|
||||
catFilterOptions.forEach((opt) => opt.setAttribute("aria-selected", String(opt.dataset.value === value)));
|
||||
apply();
|
||||
}
|
||||
|
||||
catFilterBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const open = catFilter.classList.toggle("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
});
|
||||
catFilterOptions.forEach((opt) => {
|
||||
opt.addEventListener("click", () => {
|
||||
selectKategorie(opt.dataset.value, opt.dataset.label);
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
});
|
||||
document.addEventListener("click", () => {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
});
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
const preset = params.get("kategorie");
|
||||
if (preset) kategorieSel.value = preset;
|
||||
if (preset) {
|
||||
const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
|
||||
if (match) selectKategorie(preset, match.dataset.label);
|
||||
}
|
||||
|
||||
apply();
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout.astro";
|
||||
import ProductCard from "../../../components/ProductCard.astro";
|
||||
import { categories } from "../../../data/categories";
|
||||
import { categories, subcategoryChipLabel } from "../../../data/categories";
|
||||
import { products } from "../../../data/products";
|
||||
import type { Locale } from "../../../i18n/config";
|
||||
import { useTranslations } from "../../../i18n/ui";
|
||||
@@ -25,20 +25,30 @@ const t = useTranslations(lang);
|
||||
<aside class="filters card" aria-label={t.shop.filters}>
|
||||
<h3>{t.shop.filters}</h3>
|
||||
<div class="filter-group">
|
||||
<label for="f-kategorie">{t.shop.categoryLabel}</label>
|
||||
<select id="f-kategorie">
|
||||
<option value="">{t.shop.allCategories}</option>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<optgroup label={c.name[lang]}>
|
||||
<option value={c.slug}>{c.name[lang]} ({t.shop.allCategories})</option>
|
||||
{c.subcategories.map((s) => <option value={`sub:${s.slug}`}>— {s.name[lang]}</option>)}
|
||||
</optgroup>
|
||||
) : (
|
||||
<option value={c.slug}>{c.name[lang]}</option>
|
||||
)
|
||||
))}
|
||||
</select>
|
||||
<span id="f-kategorie-label">{t.shop.categoryLabel}</span>
|
||||
<div class="cat-filter" id="cat-filter">
|
||||
<input type="hidden" id="f-kategorie" value="" />
|
||||
<button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span id="cat-filter-current">{t.shop.allCategories}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
|
||||
<button type="button" class="cat-filter-option" data-value="" data-label={t.shop.allCategories} role="option" aria-selected="true">{t.shop.allCategories}</button>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<div class="cat-filter-group">
|
||||
<span class="cat-filter-group-label" aria-hidden="true">{c.icon} {c.name[lang]}</span>
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{t.shop.allCategories} – {c.name[lang]}</button>
|
||||
{c.subcategories.map((s) => (
|
||||
<button type="button" class="cat-filter-option cat-filter-sub" data-value={`sub:${s.slug}`} data-label={subcategoryChipLabel(s, lang)} role="option" aria-selected="false">{subcategoryChipLabel(s, lang)}</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{c.icon} {c.name[lang]}</button>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="f-preis">{t.shop.priceUpTo}</label>
|
||||
@@ -134,11 +144,49 @@ const t = useTranslations(lang);
|
||||
sorted.forEach((el) => grid.appendChild(el));
|
||||
}
|
||||
|
||||
[kategorieSel, preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
[preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
|
||||
const catFilter = document.getElementById("cat-filter");
|
||||
const catFilterBtn = document.getElementById("cat-filter-btn");
|
||||
const catFilterCurrent = document.getElementById("cat-filter-current");
|
||||
const catFilterOptions = Array.from(catFilter.querySelectorAll(".cat-filter-option"));
|
||||
|
||||
function selectKategorie(value, label) {
|
||||
kategorieSel.value = value;
|
||||
catFilterCurrent.textContent = label;
|
||||
catFilterOptions.forEach((opt) => opt.setAttribute("aria-selected", String(opt.dataset.value === value)));
|
||||
apply();
|
||||
}
|
||||
|
||||
catFilterBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const open = catFilter.classList.toggle("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
});
|
||||
catFilterOptions.forEach((opt) => {
|
||||
opt.addEventListener("click", () => {
|
||||
selectKategorie(opt.dataset.value, opt.dataset.label);
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
});
|
||||
document.addEventListener("click", () => {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
});
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
const preset = params.get("kategorie");
|
||||
if (preset) kategorieSel.value = preset;
|
||||
if (preset) {
|
||||
const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
|
||||
if (match) selectKategorie(preset, match.dataset.label);
|
||||
}
|
||||
|
||||
apply();
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout.astro";
|
||||
import ProductCard from "../../../components/ProductCard.astro";
|
||||
import { categories } from "../../../data/categories";
|
||||
import { categories, subcategoryChipLabel } from "../../../data/categories";
|
||||
import { products } from "../../../data/products";
|
||||
import type { Locale } from "../../../i18n/config";
|
||||
import { useTranslations } from "../../../i18n/ui";
|
||||
@@ -25,20 +25,30 @@ const t = useTranslations(lang);
|
||||
<aside class="filters card" aria-label={t.shop.filters}>
|
||||
<h3>{t.shop.filters}</h3>
|
||||
<div class="filter-group">
|
||||
<label for="f-kategorie">{t.shop.categoryLabel}</label>
|
||||
<select id="f-kategorie">
|
||||
<option value="">{t.shop.allCategories}</option>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<optgroup label={c.name[lang]}>
|
||||
<option value={c.slug}>{c.name[lang]} ({t.shop.allCategories})</option>
|
||||
{c.subcategories.map((s) => <option value={`sub:${s.slug}`}>— {s.name[lang]}</option>)}
|
||||
</optgroup>
|
||||
) : (
|
||||
<option value={c.slug}>{c.name[lang]}</option>
|
||||
)
|
||||
))}
|
||||
</select>
|
||||
<span id="f-kategorie-label">{t.shop.categoryLabel}</span>
|
||||
<div class="cat-filter" id="cat-filter">
|
||||
<input type="hidden" id="f-kategorie" value="" />
|
||||
<button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span id="cat-filter-current">{t.shop.allCategories}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
|
||||
<button type="button" class="cat-filter-option" data-value="" data-label={t.shop.allCategories} role="option" aria-selected="true">{t.shop.allCategories}</button>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<div class="cat-filter-group">
|
||||
<span class="cat-filter-group-label" aria-hidden="true">{c.icon} {c.name[lang]}</span>
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{t.shop.allCategories} – {c.name[lang]}</button>
|
||||
{c.subcategories.map((s) => (
|
||||
<button type="button" class="cat-filter-option cat-filter-sub" data-value={`sub:${s.slug}`} data-label={subcategoryChipLabel(s, lang)} role="option" aria-selected="false">{subcategoryChipLabel(s, lang)}</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{c.icon} {c.name[lang]}</button>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="f-preis">{t.shop.priceUpTo}</label>
|
||||
@@ -134,11 +144,49 @@ const t = useTranslations(lang);
|
||||
sorted.forEach((el) => grid.appendChild(el));
|
||||
}
|
||||
|
||||
[kategorieSel, preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
[preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
|
||||
const catFilter = document.getElementById("cat-filter");
|
||||
const catFilterBtn = document.getElementById("cat-filter-btn");
|
||||
const catFilterCurrent = document.getElementById("cat-filter-current");
|
||||
const catFilterOptions = Array.from(catFilter.querySelectorAll(".cat-filter-option"));
|
||||
|
||||
function selectKategorie(value, label) {
|
||||
kategorieSel.value = value;
|
||||
catFilterCurrent.textContent = label;
|
||||
catFilterOptions.forEach((opt) => opt.setAttribute("aria-selected", String(opt.dataset.value === value)));
|
||||
apply();
|
||||
}
|
||||
|
||||
catFilterBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const open = catFilter.classList.toggle("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
});
|
||||
catFilterOptions.forEach((opt) => {
|
||||
opt.addEventListener("click", () => {
|
||||
selectKategorie(opt.dataset.value, opt.dataset.label);
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
});
|
||||
document.addEventListener("click", () => {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
});
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
const preset = params.get("kategorie");
|
||||
if (preset) kategorieSel.value = preset;
|
||||
if (preset) {
|
||||
const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
|
||||
if (match) selectKategorie(preset, match.dataset.label);
|
||||
}
|
||||
|
||||
apply();
|
||||
</script>
|
||||
|
||||
+73
-17
@@ -1,7 +1,7 @@
|
||||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import ProductCard from "../../components/ProductCard.astro";
|
||||
import { categories } from "../../data/categories";
|
||||
import { categories, subcategoryChipLabel } from "../../data/categories";
|
||||
import { products } from "../../data/products";
|
||||
import type { Locale } from "../../i18n/config";
|
||||
import { useTranslations } from "../../i18n/ui";
|
||||
@@ -25,20 +25,35 @@ const t = useTranslations(lang);
|
||||
<aside class="filters card" aria-label={t.shop.filters}>
|
||||
<h3>{t.shop.filters}</h3>
|
||||
<div class="filter-group">
|
||||
<label for="f-kategorie">{t.shop.categoryLabel}</label>
|
||||
<select id="f-kategorie">
|
||||
<option value="">{t.shop.allCategories}</option>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<optgroup label={c.name[lang]}>
|
||||
<option value={c.slug}>{c.name[lang]} ({t.shop.allCategories})</option>
|
||||
{c.subcategories.map((s) => <option value={`sub:${s.slug}`}>— {s.name[lang]}</option>)}
|
||||
</optgroup>
|
||||
) : (
|
||||
<option value={c.slug}>{c.name[lang]}</option>
|
||||
)
|
||||
))}
|
||||
</select>
|
||||
<span id="f-kategorie-label">{t.shop.categoryLabel}</span>
|
||||
{/* Eigens gestaltetes Dropdown statt eines nativen <select> — bei einem nativen Select
|
||||
mit optgroups (wie vorher) waren die Tier-Unterkategorien (Kuh, Hase, Wal, ...)
|
||||
zwar technisch da, aber in der schmucklosen Browser-eigenen Liste kaum zu erkennen.
|
||||
Hier stehen sie als eigene, klar lesbare Zeilen mit demselben Namen wie auf den
|
||||
Kategorie-Seiten ("Kuh „Frieda"" usw.), damit man sie auf einen Blick sieht. */}
|
||||
<div class="cat-filter" id="cat-filter">
|
||||
<input type="hidden" id="f-kategorie" value="" />
|
||||
<button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span id="cat-filter-current">{t.shop.allCategories}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
|
||||
<button type="button" class="cat-filter-option" data-value="" data-label={t.shop.allCategories} role="option" aria-selected="true">{t.shop.allCategories}</button>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<div class="cat-filter-group">
|
||||
<span class="cat-filter-group-label" aria-hidden="true">{c.icon} {c.name[lang]}</span>
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{t.shop.allCategories} – {c.name[lang]}</button>
|
||||
{c.subcategories.map((s) => (
|
||||
<button type="button" class="cat-filter-option cat-filter-sub" data-value={`sub:${s.slug}`} data-label={subcategoryChipLabel(s, lang)} role="option" aria-selected="false">{subcategoryChipLabel(s, lang)}</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{c.icon} {c.name[lang]}</button>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="f-preis">{t.shop.priceUpTo}</label>
|
||||
@@ -134,11 +149,52 @@ const t = useTranslations(lang);
|
||||
sorted.forEach((el) => grid.appendChild(el));
|
||||
}
|
||||
|
||||
[kategorieSel, preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
[preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
|
||||
// Eigenes Kategorie-Dropdown (statt nativem <select>): Klick auf den Button öffnet/schließt
|
||||
// die Liste, Klick auf eine Zeile setzt den Filter, aktualisiert die Anzeige-Beschriftung und
|
||||
// schließt die Liste wieder — gleiches Verhalten wie der Sprach-Umschalter im Header.
|
||||
const catFilter = document.getElementById("cat-filter");
|
||||
const catFilterBtn = document.getElementById("cat-filter-btn");
|
||||
const catFilterCurrent = document.getElementById("cat-filter-current");
|
||||
const catFilterOptions = Array.from(catFilter.querySelectorAll(".cat-filter-option"));
|
||||
|
||||
function selectKategorie(value, label) {
|
||||
kategorieSel.value = value;
|
||||
catFilterCurrent.textContent = label;
|
||||
catFilterOptions.forEach((opt) => opt.setAttribute("aria-selected", String(opt.dataset.value === value)));
|
||||
apply();
|
||||
}
|
||||
|
||||
catFilterBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const open = catFilter.classList.toggle("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
});
|
||||
catFilterOptions.forEach((opt) => {
|
||||
opt.addEventListener("click", () => {
|
||||
selectKategorie(opt.dataset.value, opt.dataset.label);
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
});
|
||||
document.addEventListener("click", () => {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
});
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
const preset = params.get("kategorie");
|
||||
if (preset) kategorieSel.value = preset;
|
||||
if (preset) {
|
||||
const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
|
||||
if (match) selectKategorie(preset, match.dataset.label);
|
||||
}
|
||||
|
||||
apply();
|
||||
</script>
|
||||
|
||||
+76
-1
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user