Desktop-Layout: Filter & Suche rechts neben Ausflugsziele statt darüber
Schließt Issue #3 ("Übersichtlicher Gestalten"). Karte, Ausflugsziele und Filter stehen ab 1024px jetzt in einer Zeile nebeneinander statt Filter über der Liste. Filter & Suche bleibt über das native <details>-Element auf-/zuklappbar, die Zwangs-Offen-Regel für Desktop entfällt dafür. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
+3
-19
@@ -1,8 +1,9 @@
|
|||||||
/* Filter- und Suchpanel (Phase 4). Struktur wird von
|
/* Filter- und Suchpanel (Phase 4). Struktur wird von
|
||||||
js/filters/filterPanel.js in #filter-panel eingehängt.
|
js/filters/filterPanel.js in #filter-panel eingehängt.
|
||||||
|
|
||||||
Mobile: <details>/<summary> als einfaches, JS-freies Auf-/Zuklappen.
|
<details>/<summary> übernimmt das Auf-/Zuklappen JS-frei - sowohl mobil
|
||||||
Desktop (>=1024px, siehe css/responsive.css): immer sichtbar/offen. */
|
(Panel oberhalb der Liste) als auch auf Desktop (>=1024px, Panel als
|
||||||
|
eigene Spalte rechts neben der Ergebnisliste, siehe css/responsive.css). */
|
||||||
|
|
||||||
.filter-panel {
|
.filter-panel {
|
||||||
background: var(--color-surface);
|
background: var(--color-surface);
|
||||||
@@ -162,22 +163,5 @@
|
|||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
.filter-panel {
|
.filter-panel {
|
||||||
border-bottom: none;
|
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+14
-12
@@ -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 <details>-Element auf-/zuklappbar (siehe css/filters.css) - so
|
||||||
|
verdrängt ein geöffneter Filter nicht mehr die Ergebnisliste nach unten. */
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
.app-layout {
|
.app-layout {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 65% 35%;
|
grid-template-columns: 1fr 320px 300px;
|
||||||
grid-template-rows: auto 1fr;
|
grid-template-rows: 1fr;
|
||||||
grid-template-areas:
|
grid-template-areas: 'map list filter';
|
||||||
'map filter'
|
|
||||||
'map list';
|
|
||||||
/* Höhe ergibt sich aus flex:1 auf .app-layout (siehe css/layout.css) -
|
/* 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
|
damit passt sich die Höhe automatisch an, egal ob der Header gerade
|
||||||
durch ein geöffnetes Menü höher ist. */
|
durch ein geöffnetes Menü höher ist. */
|
||||||
@@ -19,16 +20,17 @@
|
|||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-panel {
|
|
||||||
grid-area: filter;
|
|
||||||
border-left: 1px solid var(--color-border);
|
|
||||||
max-height: 45vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-panel {
|
.list-panel {
|
||||||
grid-area: list;
|
grid-area: list;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border-left: 1px solid var(--color-border);
|
border-left: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.filter-panel {
|
||||||
|
grid-area: filter;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user