diff --git a/css/filters.css b/css/filters.css index 2417887..ced2713 100644 --- a/css/filters.css +++ b/css/filters.css @@ -1,8 +1,9 @@ /* Filter- und Suchpanel (Phase 4). Struktur wird von js/filters/filterPanel.js in #filter-panel eingehängt. - Mobile:
/ als einfaches, JS-freies Auf-/Zuklappen. - Desktop (>=1024px, siehe css/responsive.css): immer sichtbar/offen. */ +
/ übernimmt das Auf-/Zuklappen JS-frei - sowohl mobil + (Panel oberhalb der Liste) als auch auf Desktop (>=1024px, Panel als + eigene Spalte rechts neben der Ergebnisliste, siehe css/responsive.css). */ .filter-panel { background: var(--color-surface); @@ -162,22 +163,5 @@ @media (min-width: 1024px) { .filter-panel { border-bottom: none; - overflow-y: auto; - } - - .filter-panel__summary { - cursor: default; - } - - /* Details-Inhalt unabhängig vom open-Attribut immer anzeigen, damit das - Panel auf Desktop nicht eingeklappt werden kann/muss (überschreibt die - UA-Default-Regel "details:not([open]) > *:not(summary){display:none}"). */ - .filter-panel__body { - display: grid !important; - grid-template-columns: repeat(2, 1fr); - } - - .filter-panel__actions { - grid-column: 1 / -1; } } diff --git a/css/responsive.css b/css/responsive.css index 691e834..a82d30f 100644 --- a/css/responsive.css +++ b/css/responsive.css @@ -1,13 +1,14 @@ -/* Desktop-Layout ab 1024px: Karte und Liste nebeneinander (Grid). */ +/* Desktop-Layout ab 1024px: Karte, Ausflugsziele und Filter nebeneinander + (Grid, eine Zeile). Filter & Suche steht rechts und bleibt über das + native
-Element auf-/zuklappbar (siehe css/filters.css) - so + verdrängt ein geöffneter Filter nicht mehr die Ergebnisliste nach unten. */ @media (min-width: 1024px) { .app-layout { display: grid; - grid-template-columns: 65% 35%; - grid-template-rows: auto 1fr; - grid-template-areas: - 'map filter' - 'map list'; + grid-template-columns: 1fr 320px 300px; + grid-template-rows: 1fr; + grid-template-areas: 'map list filter'; /* Höhe ergibt sich aus flex:1 auf .app-layout (siehe css/layout.css) - damit passt sich die Höhe automatisch an, egal ob der Header gerade durch ein geöffnetes Menü höher ist. */ @@ -19,16 +20,17 @@ min-height: 0; } - .filter-panel { - grid-area: filter; - border-left: 1px solid var(--color-border); - max-height: 45vh; - } - .list-panel { grid-area: list; height: 100%; overflow-y: auto; border-left: 1px solid var(--color-border); } + + .filter-panel { + grid-area: filter; + height: 100%; + overflow-y: auto; + border-left: 1px solid var(--color-border); + } }