dapelzaandClaude Sonnet 5
3a5348830c
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>
45 lines
1.3 KiB
CSS
45 lines
1.3 KiB
CSS
/* 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) {
|
|
.app-layout {
|
|
display: grid;
|
|
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. */
|
|
}
|
|
|
|
/* Filter-Spalte auf Icon-Breite schrumpfen, sobald das <details>-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%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.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;
|
|
overflow-x: hidden;
|
|
border-left: 1px solid var(--color-border);
|
|
}
|
|
}
|