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.eventFilter} data-show={isVisible}>
<div className={styles.filterContent}> <div className={styles.filterContent}>
<div className={styles.filterItem}> <div className={styles.filterItem}>
<span className={`suphead ${styles.heading}`}>Kategori</span> <span className={styles.filterHeading}>Kategori</span>
<ul> <ul>
{eventCategories {eventCategories
.filter((x) => x.showInFilters) .filter((x) => x.showInFilters)
@ -72,42 +72,38 @@ export const EventFilter = ({
</ul> </ul>
</div> </div>
<div className={styles.filterItem}> <div className={styles.filterItem}>
<label htmlFor="venue" className={`suphead ${styles.heading}`}> <label htmlFor="venue" className={styles.filterHeading}>
Lokale Lokale
</label> </label>
<div> <select
<select name="venue"
name="venue" value={activeVenue ?? ""}
value={activeVenue ?? ""} onChange={onVenueSelect}
onChange={onVenueSelect} >
> <option value="">Vis alle</option>
<option value="">Vis alle</option> {venues.map((venue) => (
{venues.map((venue) => ( <option key={venue.slug} value={venue.slug}>
<option key={venue.slug} value={venue.slug}> {venue.title}
{venue.title} </option>
</option> ))}
))} </select>
</select>
</div>
</div> </div>
<div className={styles.filterItem}> <div className={styles.filterItem}>
<label htmlFor="organizer" className={`suphead ${styles.heading}`}> <label htmlFor="organizer" className={styles.filterHeading}>
Arrangør Arrangør
</label> </label>
<div> <select
<select name="organizer"
name="organizer" value={activeOrganizer ?? ""}
value={activeOrganizer ?? ""} onChange={onOrganizerSelect}
onChange={onOrganizerSelect} >
> <option value="">Vis alle</option>
<option value="">Vis alle</option> {eventOrganizers.map((organizer) => (
{eventOrganizers.map((organizer) => ( <option key={organizer.slug} value={organizer.slug}>
<option key={organizer.slug} value={organizer.slug}> {organizer.name}
{organizer.name} </option>
</option> ))}
))} </select>
</select>
</div>
</div> </div>
{(activeCategory || activeOrganizer || activeVenue) && ( {(activeCategory || activeOrganizer || activeVenue) && (
<div className={styles.filterItem}> <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; margin: 0 calc(var(--spacing-sitepadding-inline)*-1) 0;
transition: margin .5s ease; 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 { ul {
list-style: none; list-style: none;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--spacing-xs); gap: var(--spacing-xs);
align-items: flex-start;
} }
button { 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 { .eventFilterExplained {
padding: var(--spacing-sitepadding-block) 0; padding: var(--spacing-sitepadding-block) 0;
}
@media (max-width: 1000px) {
.filterContent {
grid-template-columns: 1fr;
}
} }

10
web/src/css/base.scss
View File

@ -144,6 +144,16 @@ select {
font-size: var(--font-size-body); font-size: var(--font-size-body);
font-weight: 500; font-weight: 500;
transition: opacity var(--transition-easing); transition: opacity var(--transition-easing);
width: 100%;
max-width: 16rem;
padding-right: 2rem;
position: relative;
appearance: none;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem top 50%;
background-size: 0.65rem auto;
} }
.number { .number {