edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style event filter select menus ++

Browse Source
This commit is contained in:
elise
2024-07-15 20:22:34 +02:00
parent a7589440ba
commit 92dfb2afa9
3 changed files with 70 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
web/src/components/events/EventFilter.tsx
View File

@ -48,7 +48,7 @@ export const EventFilter = ({
<div className={styles.eventFilter} data-show={isVisible}>
<div className={styles.filterContent}>
<div className={styles.filterItem}>
<span className={`suphead ${styles.heading}`}>Kategori</span>
<span className={styles.filterHeading}>Kategori</span>
<ul>
{eventCategories
.filter((x) => x.showInFilters)
@ -72,42 +72,38 @@ export const EventFilter = ({
</ul>
</div>
<div className={styles.filterItem}>
<label htmlFor="venue" className={`suphead ${styles.heading}`}>
<label htmlFor="venue" className={styles.filterHeading}>
Lokale
</label>
<div>
<select
name="venue"
value={activeVenue ?? ""}
onChange={onVenueSelect}
>
<option value="">Vis alle</option>
{venues.map((venue) => (
<option key={venue.slug} value={venue.slug}>
{venue.title}
</option>
))}
</select>
</div>
<select
name="venue"
value={activeVenue ?? ""}
onChange={onVenueSelect}
>
<option value="">Vis alle</option>
{venues.map((venue) => (
<option key={venue.slug} value={venue.slug}>
{venue.title}
</option>
))}
</select>
</div>
<div className={styles.filterItem}>
<label htmlFor="organizer" className={`suphead ${styles.heading}`}>
<label htmlFor="organizer" className={styles.filterHeading}>
Arrangør
</label>
<div>
<select
name="organizer"
value={activeOrganizer ?? ""}
onChange={onOrganizerSelect}
>
<option value="">Vis alle</option>
{eventOrganizers.map((organizer) => (
<option key={organizer.slug} value={organizer.slug}>
{organizer.name}
</option>
))}
</select>
</div>
<select
name="organizer"
value={activeOrganizer ?? ""}
onChange={onOrganizerSelect}
>
<option value="">Vis alle</option>
{eventOrganizers.map((organizer) => (
<option key={organizer.slug} value={organizer.slug}>
{organizer.name}
</option>
))}
</select>
</div>
{(activeCategory || activeOrganizer || activeVenue) && (
<div className={styles.filterItem}>

51
web/src/components/events/eventFilter.module.scss
View File

@ -5,29 +5,12 @@
margin: 0 calc(var(--spacing-sitepadding-inline)*-1) 0;
transition: margin .5s ease;
.filterContent {
background-color: var(--color-background);
padding: 0 var(--spacing-sitepadding-inline);
min-height: 0;
visibility: hidden;
opacity: 0;
transition: visibility .5s ease, padding .5s ease, opacity .5s ease, background-color .5s ease;
}
.filterItem {
display: flex;
align-items: center;
gap: var(--spacing-s);
margin-bottom: var(--spacing-s);
}
ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
align-items: flex-start;
}
button {
@ -47,6 +30,38 @@
}
}
.filterContent {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: flex-start;
gap: var(--spacing-gap-column);
background-color: var(--color-background);
padding: 0 var(--spacing-sitepadding-inline);
min-height: 0;
visibility: hidden;
opacity: 0;
transition: visibility .5s ease, padding .5s ease, opacity .5s ease, background-color .5s ease;
}
.filterItem {
display: flex;
align-items: flex-start;
gap: var(--spacing-xs);
flex-wrap: wrap;
margin-bottom: var(--spacing-s);
}
.filterHeading {
width: 100%;
font-weight: 600;
}
.eventFilterExplained {
padding: var(--spacing-sitepadding-block) 0;
}
@media (max-width: 1000px) {
.filterContent {
grid-template-columns: 1fr;
}
}