From d4438fd21512923022ae2cf6084a608b703a23bc Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 2 Sep 2023 18:53:23 +0200
Subject: [PATCH] station filters active indicator

---
 src/components/StationsView/StationFilterCard.vue | 12 +++++-------
 src/styles/filters_options.scss                   |  9 ---------
 src/styles/global.scss                            |  9 +++++++++
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index 5504862..3b4d8e2 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/src/components/StationsView/StationFilterCard.vue
@@ -4,6 +4,7 @@
       <button class="btn--filled btn--image" @click="toggleCard">
         <img class="button_icon" :src="getIcon('filter2')" alt="filter icon" />
         {{ $t('options.filters') }} [F]
+        <span class="active-indicator" v-if="!filterStore.areFiltersAtDefault"></span>
       </button>
 
       <label for="scenery-search">
@@ -176,6 +177,10 @@ export default defineComponent({
         .filter((s) => s.name.toLocaleLowerCase().includes(this.chosenSearchScenery.toLocaleLowerCase()))
         .sort((s1, s2) => (s1.name > s2.name ? 1 : -1));
     },
+
+    currentOptionsActive() {
+      return true;
+    },
   },
 
   watch: {
@@ -442,16 +447,9 @@ export default defineComponent({
 
   .section-inputs {
     display: grid;
-    // flex-wrap: wrap;
     grid-template-columns: repeat(3, minmax(0, 1fr));
-    // grid-template-rows: repeat(3, 1fr);
     gap: 0.5em;
     margin: 1em 0;
-
-    // @include smallScreen() {
-    //   grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
-    //   grid-template-rows: auto;
-    // }
   }
 }
 
diff --git a/src/styles/filters_options.scss b/src/styles/filters_options.scss
index adcab45..6aa716c 100644
--- a/src/styles/filters_options.scss
+++ b/src/styles/filters_options.scss
@@ -11,15 +11,6 @@
   gap: 0.5em;
 }
 
-.filter-button .active-indicator {
-  width: 7px;
-  height: 7px;
-  background-color: lightgreen;
-  border-radius: 50%;
-
-  margin-left: 10px;
-}
-
 h1.option-title {
   position: relative;
   font-size: 1.1em;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 3e4efc6..383c3a0 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -138,6 +138,15 @@ input {
   padding: 0.35em 0;
 }
 
+.active-indicator {
+  width: 7px;
+  height: 7px;
+  background-color: lightgreen;
+  border-radius: 50%;
+
+  margin-left: 10px;
+}
+
 a {
   display: inline-block;