koehleestell/Social_Cooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accordion Filter (ohne Styling)

Browse Source
This commit is contained in:
Simona Oswald 2026-04-25 17:38:51 +02:00
parent 848242b10b
commit ffee29d57e
3 changed files with 35 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/event_overview.css
View File

@ -42,15 +42,12 @@
.filter-row {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
gap: var(--space-16);
margin-bottom: var(--space-2);
}
.category-group {
display: flex;
gap: var(--space-8);
gap: var(--space-12);
margin-bottom: 0;
flex-wrap: wrap;
flex: 1;
@ -70,7 +67,7 @@
.meta-filter-group {
display: flex;
flex-wrap: nowrap;
gap: var(--space-16);
gap: var(--space-12);
margin-bottom: 0;
}
@ -938,11 +935,21 @@
.meta-filter-group {
width: auto;
flex-wrap: wrap;
gap: 10px;
}
.meta-filter {
flex: 1 1 160px;
min-width: 140px;
}
}
.filter-section {
display: flex;
flex-direction: column;
}
.filter-box summary {
cursor: pointer;
margin-bottom: var(--space-8);
}

2
css/stylesheet_global.css
View File

@ -572,7 +572,7 @@ label {
font-weight: 400;
font-size: 1.125rem;
line-height: 1;
padding: var(--space-6) var(--space-20);
padding: var(--space-8) var(--space-20);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}

38
event_overview.html
View File

@ -65,27 +65,29 @@
</label>
</div>
</div>
<p class="filter-label">Ernährungsform</p>
<div class="filter-row">
<!-- Primary category filter buttons -->
<div class="category-group">
<button class="category-item" type="button" data-diet="Fleisch">Fleisch</button>
<button class="category-item" type="button" data-diet="Fisch">Fisch</button>
<button class="category-item" type="button" data-diet="Vegetarisch">Vegetarisch</button>
<button class="category-item" type="button" data-diet="Vegan">Vegan</button>
</div>
<details class="filter-box">
<summary>Nach Ernährungform filtern</summary>
<div class="filter-row">
<div class="category-group">
<button class="category-item" type="button" data-diet="Fleisch">Fleisch</button>
<button class="category-item" type="button" data-diet="Fisch">Fisch</button>
<button class="category-item" type="button" data-diet="Vegetarisch">Vegetarisch</button>
<button class="category-item" type="button" data-diet="Vegan">Vegan</button>
</div>
</div>
</details>
<p class="filter-label">Allergene</p>
<div class="filter-row">
<!-- Allergen filter buttons -->
<div class="category-group">
<button class="category-item" type="button" data-allergie="glutenfrei">glutenfrei</button>
<button class="category-item" type="button" data-allergie="laktosefrei">laktosefrei</button>
<button class="category-item" type="button" data-allergie="ohne Nüsse">ohne Nüsse</button>
</div>
<details class="filter-box">
<summary>Nach Allergenen filtern</summary>
<div class="filter-row">
<div class="category-group">
<button class="category-item" type="button" data-allergie="glutenfrei">glutenfrei</button>
<button class="category-item" type="button" data-allergie="laktosefrei">laktosefrei</button>
<button class="category-item" type="button" data-allergie="ohne Nüsse">ohne Nüsse</button>
</div>
</div>
</details>
</section>