diff --git a/css/filters.css b/css/filters.css index ced2713..d9dc6b5 100644 --- a/css/filters.css +++ b/css/filters.css @@ -19,6 +19,9 @@ } .filter-panel__summary { + display: flex; + align-items: center; + gap: var(--space-sm); padding: var(--space-md) 0; font-weight: 700; cursor: pointer; @@ -37,6 +40,15 @@ content: '▾ '; } +/* Nur im eingeklappten Desktop-Zustand als eigenständiges Icon sichtbar + (siehe Media-Query unten) - sonst steckt das Icon unauffällig neben dem + Text, ohne das Mobile-Layout zu verändern. */ +.filter-panel__summary-icon { + display: none; + font-size: 1.3rem; + line-height: 1; +} + .filter-panel__body { display: flex; flex-direction: column; @@ -164,4 +176,21 @@ .filter-panel { border-bottom: none; } + + /* Eingeklappt: Spalte auf Icon-Breite schrumpfen lassen (Grid-Breite + siehe css/responsive.css) statt nur den Inhalt zu verstecken - sonst + bleibt die leere Spalte trotzdem in voller Breite stehen. */ + .filter-panel__details:not([open]) .filter-panel__summary { + justify-content: center; + padding: var(--space-md) 0; + } + + .filter-panel__details:not([open]) .filter-panel__summary-icon { + display: block; + } + + .filter-panel__details:not([open]) .filter-panel__summary-text, + .filter-panel__details:not([open]) .filter-panel__summary::before { + display: none; + } } diff --git a/css/responsive.css b/css/responsive.css index a82d30f..014a3b5 100644 --- a/css/responsive.css +++ b/css/responsive.css @@ -14,6 +14,13 @@ durch ein geöffnetes Menü höher ist. */ } + /* Filter-Spalte auf Icon-Breite schrumpfen, sobald das
-Element + darin geschlossen ist (siehe css/filters.css) - sonst bleibt die Spalte + trotz leerem Inhalt in voller Breite stehen. */ + .app-layout:has(.filter-panel__details:not([open])) { + grid-template-columns: 1fr 320px 56px; + } + .map-panel { grid-area: map; height: 100%; @@ -31,6 +38,7 @@ grid-area: filter; height: 100%; overflow-y: auto; + overflow-x: hidden; border-left: 1px solid var(--color-border); } } diff --git a/js/filters/filterPanel.js b/js/filters/filterPanel.js index 628fabf..ecd9586 100644 --- a/js/filters/filterPanel.js +++ b/js/filters/filterPanel.js @@ -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); }