From 92dfb2afa94f7b05e570e12b8180d3e6eb7e1cb0 Mon Sep 17 00:00:00 2001
From: elise <hei@elisejakob.no>
Date: Mon, 15 Jul 2024 20:22:34 +0200
Subject: [PATCH] style event filter select menus ++

---
 web/src/components/events/EventFilter.tsx     | 58 +++++++++----------
 .../components/events/eventFilter.module.scss | 51 ++++++++++------
 web/src/css/base.scss                         | 10 ++++
 3 files changed, 70 insertions(+), 49 deletions(-)

diff --git a/web/src/components/events/EventFilter.tsx b/web/src/components/events/EventFilter.tsx
index cd92499..7ecb25f 100644
--- a/web/src/components/events/EventFilter.tsx
+++ b/web/src/components/events/EventFilter.tsx
@@ -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}>
diff --git a/web/src/components/events/eventFilter.module.scss b/web/src/components/events/eventFilter.module.scss
index 473d36f..a465498 100644
--- a/web/src/components/events/eventFilter.module.scss
+++ b/web/src/components/events/eventFilter.module.scss
@@ -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;
+  }
 }
\ No newline at end of file
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
index 74aa927..3280a5c 100644
--- a/web/src/css/base.scss
+++ b/web/src/css/base.scss
@@ -144,6 +144,16 @@ select {
   font-size: var(--font-size-body);
   font-weight: 500;
   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 {