Filter-Spalte auf Desktop beim Einklappen auf Icon schrumpfen lassen

Bisher blieb die Filter-Spalte auch bei geschlossenem <details>-Element
in voller Breite stehen, da nur der Inhalt (nicht die Grid-Spalte)
ausgeblendet wurde. Jetzt schrumpft die Spalte per :has()-Selektor auf
56px und zeigt nur noch ein Icon zum Wiederaufklappen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-28 12:43:01 +02:00
co-authored by Claude Sonnet 5
parent dccfeddb0e
commit 3a5348830c
3 changed files with 46 additions and 4 deletions
+9 -4
View File
@@ -316,12 +316,17 @@
el('div', { className: 'filter-panel__actions' }, [refs.countDisplay, refs.resetBtn, refs.zoomToResultsBtn]),
]);
refs.details = el(
'details',
{ className: 'filter-panel__details' },
[el('summary', { className: 'filter-panel__summary', text: 'Filter & Suche' }), body]
const summary = el(
'summary',
{ className: 'filter-panel__summary', attrs: { 'aria-label': 'Filter & Suche ein-/ausblenden' } },
[
el('span', { className: 'filter-panel__summary-icon', attrs: { 'aria-hidden': 'true' }, text: '🔍' }),
el('span', { className: 'filter-panel__summary-text', text: 'Filter & Suche' }),
]
);
refs.details = el('details', { className: 'filter-panel__details' }, [summary, body]);
clearChildren(rootContainer);
rootContainer.appendChild(refs.details);
}