DIT-49: Mobile Filter.

- Changed and implemented new design after talks with Andreas
matematikk-mooc · Jun 25, 2024 · c2a42eb · c2a42eb
1 parent 58728a6
commit c2a42eb
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 17 deletions.
diff --git a/src/vue/components/Button.vue b/src/vue/components/Button.vue
@@ -14,6 +14,8 @@
     <img class="feide-symbol" v-if="type === 'feideLogin'" :src="`${server}feide_white-symbol.svg`"/>
     <slot></slot>
     <Icon v-if="type === 'next'" name="chevron_right" size="1.5em" />
+    <Icon v-if="type === 'filter'" name="filter" size="1.5em" />
+    <Icon v-if="type === 'filter_reset'" name="filter_reset" size="1.5em" />
   </button>
 </template>
 
@@ -108,6 +110,19 @@ const isDropdown = props.type === 'dropdown';
   }
 }
 
+.filter-button, .reset-button {
+      svg {
+        margin-left: 10px;
+        height:1.3rem;
+        width:1.3rem;
+      }
+    }
+    .reset-button {
+      background-color: white;
+      color: black;
+      border: 1px solid black;
+    }
+
 .feide-symbol{
   width: 1em;
   height: 1em;

diff --git a/src/vue/components/CardFilter.vue b/src/vue/components/CardFilter.vue
@@ -1,23 +1,34 @@
 <template>
-  <div class="filter-container">
-    <Button :type="'outlined'" :size="'md'" @click="clearFilters">Tilbakestill filter</Button>
-    <div class="filter-group" v-for="item in filters">
-      <div class="filter-title">
-        {{ item.name }}
-      </div>
+  <div class="filter-wrapper">
 
-      <ul class="cardfilter-list">
-        <li v-for="filter in item.filter" :key="filter.id">
-          <label class="checkbox-label" :for="filter.id">
-            {{ filter.filter_name }}
-            <input :id="filter.id" :value="filter" :name="filter" type="checkbox" v-model="selectedFilters" /><span
-              class="checkmark"
-            ></span
-          ></label>
-        </li>
-      </ul>
+    <div class="filter-buttons">
+      <Button class="desktop-hide filter-button" :type="'filter'" :size="'md'" @click="toggleFilters">Filter</Button>
+    <Button class="reset-button" :type="'filter_reset'" :size="'md'" @click="clearFilters">Tilbakestill</Button>
+  </div>
+  <div class="filter-modal">
+  <div class="filter-container mobile-hide">
+    <div class="filter-groups">
+      <div class="filter-group" v-for="item in filters">
+        <div class="filter-title">
+            {{ item.name }}
+          </div>
+          <ul class="cardfilter-list">
+            <li v-for="filter in item.filter" :key="filter.id">
+              <label class="checkbox-label" :for="filter.id">
+                {{ filter.filter_name }}
+                <input :id="filter.id" :value="filter" :name="filter" type="checkbox" v-model="selectedFilters" /><span
+                class="checkmark"
+                ></span
+                ></label>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <Button class="desktop-hide" :type="'filled'" :size="'md'" @click="toggleFilters">Vis treff</Button>
+      </div>
     </div>
   </div>
+
 </template>
 
 <script setup lang="js">
@@ -56,6 +67,16 @@ const clearFilters = () => {
   selectedFilters.value = []
 }
 
+const toggleFilters = () => {
+  const filterContainers = document.getElementsByClassName('filter-container');
+  const filterModal = document.getElementsByClassName('filter-modal');
+  for (let i = 0; i < filterContainers.length; i++) {
+    filterContainers[i].classList.toggle('mobile-hide');
+    filterModal[i].classList.toggle('backdrop');
+  }
+}
+
+
 </script>
 
 <style lang="scss">
@@ -88,6 +109,10 @@ const clearFilters = () => {
   user-select: none;
 }
 
+.filter-wrapper {
+  width:100%;
+}
+
 .checkbox-label input {
   position: absolute;
   opacity: 0;

diff --git a/src/vue/components/icon/iconPaths.js b/src/vue/components/icon/iconPaths.js
diff --git a/src/vue/design/override-mobile.scss b/src/vue/design/override-mobile.scss
@@ -200,7 +200,6 @@
       .filter-container {
         display: flex;
         flex-direction: column;
-        width: 80%;
         margin: 0 auto;
         button {
           max-width: 50%;
@@ -323,4 +322,31 @@
       border-radius: 12px !important;
     }
   }
+
+  // CardFilter
+  .filter-buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 100%;
+    gap: 1.5rem;
+    margin-bottom: 16px;
+  }
+  .filter-container {
+    position: fixed;
+    bottom: 0;
+    z-index: 9999;
+    width: 100%;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    background-color: #F1F1F1;
+    .filter-groups {
+      margin-left: 50px;
+      margin-top: 0;
+    }
+    button {
+      margin: 0 auto;
+      margin-bottom: 26px;
+    }
+  }
 }