From a3878e137a5c50efe5d188889bbd6fe0ef5729c7 Mon Sep 17 00:00:00 2001
From: Andreas Madsen <andreasmadsen85@gmail.com>
Date: Wed, 26 Jun 2024 11:24:28 +0200
Subject: [PATCH] Revert "DIT-49: Mobile Filter."

This reverts commit c2a42ebdf9002db1ffab007ca61467d545e89773.
---
 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, 17 insertions(+), 85 deletions(-)

diff --git a/src/vue/components/Button.vue b/src/vue/components/Button.vue
index 6b843834..220c899a 100644
--- a/src/vue/components/Button.vue
+++ b/src/vue/components/Button.vue
@@ -14,8 +14,6 @@
     <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>
 
@@ -110,19 +108,6 @@ 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 d46d8e45..d6708d4b 100644
--- a/src/vue/components/CardFilter.vue
+++ b/src/vue/components/CardFilter.vue
@@ -1,34 +1,23 @@
 <template>
-  <div class="filter-wrapper">
-
-    <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 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>
+
+      <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>
-
 </template>
 
 <script setup lang="js">
@@ -67,16 +56,6 @@ 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">
@@ -109,10 +88,6 @@ const toggleFilters = () => {
   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 b45d2182..ee5b6001 100644
--- a/src/vue/components/icon/iconPaths.js
+++ b/src/vue/components/icon/iconPaths.js
@@ -28,8 +28,6 @@ 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 932f642e..26d2ecd3 100644
--- a/src/vue/design/override-mobile.scss
+++ b/src/vue/design/override-mobile.scss
@@ -200,6 +200,7 @@
       .filter-container {
         display: flex;
         flex-direction: column;
+        width: 80%;
         margin: 0 auto;
         button {
           max-width: 50%;
@@ -322,31 +323,4 @@
       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;
-    }
-  }
 }