chore: APPS-3112 unify styles between datefilter and filterdropdown (#…

…669) * chore: unify styles between datefilter and filterdropdown * chore: cleanup comment * chore: tweak styles * chore: more style tweaks --------- Co-authored-by: Jess Divers <[email protected]>
UCLALibrary · Dec 19, 2024 · cee21bd · cee21bd · github-actions · Dec 19, 2024
1 parent a2d099c
commit cee21bd
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 16 deletions.
diff --git a/src/lib-components/DateFilter.vue b/src/lib-components/DateFilter.vue
@@ -228,9 +228,9 @@ onMounted(() => {
     >
       <template #input-icon>
         <SvgIconFTVACalender />
-        <span :class="inputIconClass">
+        <!-- <span :class="inputIconClass">
           <SvgIconFTVADropTriangle />
-        </span>
+        </span> -->
       </template>
 
       <template #clear-icon="{ clear }">
@@ -477,9 +477,17 @@ onMounted(() => {
     // Input styling
     :deep(.dp__input) {
       height: 59px;
-      font-family: var(--font-secondary);
+      font-family: var(--font-primary);
+      font-weight: 500;
       font-size: 18px;
       color: $medium-grey;
+      border-radius: 8px;
+      &:hover, &:focus {
+        border-color: #ddd;
+      }
+      &:hover {
+        background-color: #f1f1f1;
+      }
 
       @media #{$small} {
         padding-inline-start: 57px;
@@ -496,7 +504,7 @@ onMounted(() => {
 
       svg {
         position: absolute;
-        right: 40px;
+        right: 30px;
         transform: translateY(-50%);
 
         @media #{$small} {
@@ -817,7 +825,7 @@ onMounted(() => {
     .mobile-button {
       width: 166px;
       padding: 6px;
-      border-radius: 4px;
+      // border: none;
 
       &:active {
         color: white;

diff --git a/src/lib-components/FiltersDropdown.vue b/src/lib-components/FiltersDropdown.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import type { PropType } from 'vue'
 import SvgGlyphX from 'ucla-library-design-tokens/assets/svgs/icon-ftva-xtag.svg'
 import SvgFilterIcon from 'ucla-library-design-tokens/assets/svgs/icon-ftva-filter.svg'
+import { useWindowSize } from '@vueuse/core'
 import BlockTag from './BlockTag.vue'
 import ButtonLink from './ButtonLink.vue'
 import MobileDrawer from './MobileDrawer.vue'
@@ -57,17 +58,29 @@ function onDoneClick() {
 
 // THEME
 const theme = useTheme()
+const isMobile = ref(false)
 const parsedClasses = computed(() => {
   return ['filters-dropdown', theme?.value || '']
 })
+onMounted(() => {
+  const { width } = useWindowSize()
+  watch(width, (newWidth) => {
+    isMobile.value = newWidth <= 750
+  }, { immediate: true })
+})
 </script>
 
 <template>
   <div :class="parsedClasses">
     <MobileDrawer>
       <template #buttonLabel>
         <div class="filter-summary">
-          Filters ({{ numOfSelectedFilters }} selected )
+          <template v-if="!isMobile">
+            Filters ({{ numOfSelectedFilters }} selected )
+          </template>
+          <template v-else>
+            Filters
+          </template>
         </div>
         <span class="icon-svg">
           <SvgFilterIcon aria-hidden="true" />
@@ -82,8 +95,8 @@ const parsedClasses = computed(() => {
               <label v-for="option in group.options" :key="option" class="pill-label">
                 <!-- Hidden checkbox for managing selection & screen-reader user interaction -->
                 <input
-                  :id="option" v-model="selectedFilters[group.searchField]" type="checkbox" class="pill-checkbox" :name="option"
-                  :value="option"
+                  :id="option" v-model="selectedFilters[group.searchField]" type="checkbox" class="pill-checkbox"
+                  :name="option" :value="option"
                 >
                 <!-- BlockTag component for display -->
                 <BlockTag :label="option" :is-secondary="true">
@@ -96,7 +109,10 @@ const parsedClasses = computed(() => {
             </div>
           </div>
           <div class="action-row">
-            <ButtonLink class="action-row-button select-button" label="Done" icon-name="none" @click="onDoneClick(); removeOverlay();" />
+            <ButtonLink
+              class="action-row-button select-button" label="Done" icon-name="none"
+              @click="onDoneClick(); removeOverlay();"
+            />
             <ButtonLink
               class="action-row-button clear-button" label="Clear" icon-name="icon-close"
               @click="clearFilters"

diff --git a/src/styles/default/_filters-dropdown.scss b/src/styles/default/_filters-dropdown.scss
@@ -2,6 +2,7 @@
     // Dropdown  Window Size & Input
     :deep(.mobile-button) {
         min-width: 380px;
+        border-color: #ddd;
         .toggle-triangle-icon { 
             path.svg__fill--accent-blue {
                 fill: $accent-blue;
@@ -26,6 +27,9 @@
         margin: auto;
         padding: 24px 30px 30px 30px;
         width: 100%; // filters dropdown grows to container width
+        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+        border-radius: 0px 0px 10px 10px;
+        border: none;
     }
 
     // Filter Heading
@@ -123,4 +127,17 @@
             }
         }
     }
+
+    @media #{$small} {
+        :deep(.mobile-button) {
+            width: 166px;
+            min-width: unset;
+            padding: 6px; 
+            // border: none;
+            .button-inner-wrapper {
+                flex-direction: row-reverse;
+                justify-content: center;
+            }
+        }
+    }
 }
diff --git a/src/styles/default/_mobile-drawer.scss b/src/styles/default/_mobile-drawer.scss
@@ -58,12 +58,14 @@
     }
 
     @media #{$has-hover} {
-        .mobile-button:hover {
-            background-color: #f1f1f1;
-        }
+        @media #{$small} {
+            .mobile-button:hover {
+                background-color: #f1f1f1;
+            }
 
-        .svg__icon-close.svg-glyph-close:hover {
-            cursor: pointer;
+            .svg__icon-close.svg-glyph-close:hover {
+                cursor: pointer;
+            }
         }
     }
 

diff --git a/src/styles/ftva/_filters-dropdown.scss b/src/styles/ftva/_filters-dropdown.scss
@@ -1,4 +1,14 @@
 .ftva.filters-dropdown {
+    :deep(.mobile-button) {
+        border-color: #ddd;
+        &:hover, &:focus {
+            border-color: #ddd;
+        }
+        &:hover {
+            background-color: #f1f1f1;
+        }
+    }
+    // Done / Clear Buttons
     .action-row {
         .action-row-button {
             color: $accent-blue;
@@ -31,12 +41,37 @@
             color: white;
         }
     }
-    :deep(.svg__icon-close) {
+    .icon-close {
         path {
             stroke: white;
         }
         circle {
             fill: transparent;
         }
     }
+
+    @media #{$small} { 
+        // Input field / Button on Mobile
+        :deep(.mobile-button) {
+            border-color: $medium-grey;
+            &:hover, &:focus {
+                border-color: $medium-grey;
+            }
+            &.is-expanded {
+                    color: $accent-blue;
+                    border: 2px solid $accent-blue;
+
+                    path.svg__fill--accent-blue {
+                        fill: $accent-blue;
+                    }
+                }
+        }
+        .icon-svg {
+            :deep(svg) {
+                path.svg__fill--accent-blue {
+                    fill: $medium-grey;
+                }
+            }
+        }
+    }
 }