From c2a42ebdf9002db1ffab007ca61467d545e89773 Mon Sep 17 00:00:00 2001
From: Marius Johan Holm Johansen <marius.jh.johansen@gmail.com>
Date: Tue, 25 Jun 2024 11:40:03 +0200
Subject: [PATCH] DIT-49: Mobile Filter.

- Changed and implemented new design after talks with Andreas
---
 src/vue/components/Button.vue        | 15 ++++++++
 src/vue/components/CardFilter.vue    | 57 ++++++++++++++++++++--------
 src/vue/components/icon/iconPaths.js |  2 +
 src/vue/design/override-mobile.scss  | 28 +++++++++++++-
 4 files changed, 85 insertions(+), 17 deletions(-)

diff --git a/src/vue/components/Button.vue b/src/vue/components/Button.vue
index 220c899a..6b843834 100644
--- 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
index d6708d4b..d46d8e45 100644
--- 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
index ee5b6001..b45d2182 100644
--- a/src/vue/components/icon/iconPaths.js
+++ b/src/vue/components/icon/iconPaths.js
@@ -28,6 +28,8 @@ export const IconPaths = {
   feedback:
     'M480-360q17 0 28.5-11.5T520-400q0-17-11.5-28.5T480-440q-17 0-28.5 11.5T440-400q0 17 11.5 28.5T480-360Zm-40-160h80v-240h-80v240ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z',
   flag: 'M200-120v-680h360l16 80h224v400H520l-16-80H280v280h-80Zm300-440Zm86 160h134v-240H510l-16-80H280v240h290l16 80Z',
+  filter: 'M440-120v-240h80v80h320v80H520v80h-80Zm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160v-240h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z',
+  filter_reset: 'M520-330v-60h160v60H520Zm60 210v-50h-60v-60h60v-50h60v160h-60Zm100-50v-60h160v60H680Zm40-110v-160h60v50h60v60h-60v50h-60Zm111-280h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z',
   format_list_numbered:
     'M120-80v-60h100v-30h-60v-60h60v-30H120v-60h120q17 0 28.5 11.5T280-280v40q0 17-11.5 28.5T240-200q17 0 28.5 11.5T280-160v40q0 17-11.5 28.5T240-80H120Zm0-280v-110q0-17 11.5-28.5T160-510h60v-30H120v-60h120q17 0 28.5 11.5T280-560v70q0 17-11.5 28.5T240-450h-60v30h100v60H120Zm60-280v-180h-60v-60h120v240h-60Zm180 440v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360Z',
   grade:
diff --git a/src/vue/design/override-mobile.scss b/src/vue/design/override-mobile.scss
index 26d2ecd3..932f642e 100644
--- 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;
+    }
+  }
 }