Replace the checkbox and label with an option button for the galc form

Author: yzhoubk

src/components/Facets.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useFacetStore } from '../stores/facets'
 import { useSessionStore } from '../stores/session'
 import { useSearchStore } from '../stores/search'
@@ -16,6 +16,31 @@ const { facets } = storeToRefs(useFacetStore())
 const { isAdmin } = storeToRefs(useSessionStore())
 
 const search = useSearchStore()
+const facetsOpen = ref(false)
+const isMobile = ref(window.innerWidth <= 700)
+
+function toggleFacets() {
+  facetsOpen.value = !facetsOpen.value
+}
+
+function handleWindowResize() {
+  isMobile.value = window.innerWidth <= 700
+  if (isMobile.value) {
+    facetsOpen.value = false 
+  }
+  else {
+    facetsOpen.value = true
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleWindowResize)
+  handleWindowResize()
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', handleWindowResize)
+})
+
 const liveMessage = computed(() => {
   const parts: string[] = []
   for (const facetName of search.activeFacetNames) {
@@ -33,12 +58,24 @@ const liveMessage = computed(() => {
 <template>
   <div class="galc-facets">
     <TermDeselection id-prefix="facets"/>
-    <input id="show-facets" type="checkbox">
-    <label class="show-facets-label" for="show-facets">
+
+    <button
+      v-if="isMobile"
+      class="show-facets-button"
+      type="button"
+      @click="toggleFacets"
+      :aria-expanded="facetsOpen.toString()"
+      aria-controls="facet-form"
+    >
       Options
-      <img alt="Options" :src="filter" class="show-facets-icon">
-    </label>
-    <form class="galc-facet-form">
+      <img alt="" :src="filter" class="show-facets-icon">
+    </button>
+
+    <form
+      id="facet-form"
+      class="galc-facet-form"
+      v-show="facetsOpen || !isMobile"
+    >
       <Suppressed v-if="isAdmin"/>
       <InternalFields v-if="isAdmin"/>
       <Facet
@@ -50,134 +87,50 @@ const liveMessage = computed(() => {
     </form>
 
     <!-- Accessible live region -->
-    <span class="sr-only" aria-live="polite" aria-atomic="true">{{ liveMessage }}</span>
-
+    <span class="sr-only" aria-live="polite" aria-atomic="true">
+      {{ liveMessage }}
+    </span>
   </div>
 </template>
 
 <style lang="scss">
-div.galc-facets {
-
-  input#show-facets {
-    display: none;
-  }
-
-  @media only screen and (min-width: 700px) {
-    margin-right: 1em;
-    
-    // TODO: less hacky way to place this differently on desktop and mobile
-    .galc-term-deselection {
-      display: none;
-    }
-
-    label.show-facets-label {
-      display: none;
-    }
-
-    form.galc-facet-form {
-      width: 150px;
+.show-facets-button {
+  display: none;
+}
+@media only screen and (max-width: 700px) {
+  .show-facets-button {
+    display: block;
+    font-size: 1rem;
+    line-height: 1.75rem;
+    font-weight: normal;
+    color: white;
+    background-color: #46535e;
+    padding: 2px 8px;
+    margin: 6px 16px 6px 0;
+    width: fit-content;
+    cursor: pointer;
+    border: none;
+    border-radius: 4px;
+
+    img.show-facets-icon {
+      height: 0.9rem;
+      width: 0.9rem;
+      filter: invert(100%);
+      display: inline;
+      margin-bottom: 4px;
+      margin-left: 4px;
     }
   }
-
-  @media only screen and (max-width: 700px) {
-    input#show-facets {
-      ~ form.galc-facet-form {
-        display: none;
-      }
-
-      &:checked ~ form.galc-facet-form {
-        display: grid;
-      }
-    }
-
-    label.show-facets-label {
-      display: block;
-      font-size: 1rem;
-      line-height: 1.75rem;
-      font-weight: normal;
-      color: white;
-      background-color: #46535e;
-      padding: 2px 8px;
-      margin: 6px 16px 6px 0;
-      width: fit-content;
-      cursor: pointer;
-
-      img.show-facets-icon {
-        height: 0.9rem;
-        width: 0.9rem;
-        filter: invert(100%);
-        display: inline;
-        margin-bottom: -2px;
-        margin-left: 4px;
-      }
-    }
-  }
-
-  form.galc-facet-form {
-    display: grid;
-    grid-template-columns: 1fr;
-    align-items: center;
-    justify-items: start;
-
-    // TODO: rationalize these measurements
-    column-gap: 0.5rem;
-    row-gap: 0;
-    margin-right: 2rem;
-
-    .galc-facet-title {
-      white-space: nowrap;
-      grid-column: 1 / 4;
-      margin-bottom: 0.25em;
-    }
-
-    > fieldset {
-      padding-bottom: 0;
-      width: 100%;
-
-      details {
-        summary {
-          grid-column: 1 / 4;
-        }
-
-        input {
-          grid-column: 1;
-        }
-
-        label {
-          grid-column: 2 / 4;
-        }
-
-        fieldset {
-
-          input {
-            grid-column: 1;
-          }
-
-          label {
-            grid-column: 2 / 4;
-          }
-        }
-      }
-
-      &:not(:first-of-type) {
-        summary {
-          margin-top: 0.25em;
-        }
-      }
-    }
-  }
-
-  .sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-  }
-} 
-
-</style>
+}
+.sr-only {
+position: absolute;
+width: 1px;
+height: 1px;
+padding: 0;
+margin: -1px;
+overflow: hidden;
+clip: rect(0, 0, 0, 0);
+white-space: nowrap;
+border-width: 0;
+}
+</style>