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 { .filter-row {
display: flex; display: flex;
align-items: center; justify-content: flex-start;
justify-content: space-between;
gap: var(--space-16); gap: var(--space-16);
margin-bottom: var(--space-2);
} }
.category-group { .category-group {
display: flex; gap: var(--space-12);
gap: var(--space-8);
margin-bottom: 0; margin-bottom: 0;
flex-wrap: wrap; flex-wrap: wrap;
flex: 1; flex: 1;
@ -70,7 +67,7 @@
.meta-filter-group { .meta-filter-group {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: var(--space-16); gap: var(--space-12);
margin-bottom: 0; margin-bottom: 0;
} }
@ -938,7 +935,6 @@
.meta-filter-group { .meta-filter-group {
width: auto; width: auto;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px;
} }
.meta-filter { .meta-filter {
@ -946,3 +942,14 @@
min-width: 140px; 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-weight: 400;
font-size: 1.125rem; font-size: 1.125rem;
line-height: 1; line-height: 1;
padding: var(--space-6) var(--space-20); padding: var(--space-8) var(--space-20);
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease; transition: background-color 0.2s ease, color 0.2s ease;
} }

38
event_overview.html
View File

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