From 99cdb3442a71e58d84e43123a82adc7fa410cb98 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 8 Sep 2022 23:15:54 +0200
Subject: [PATCH] =?UTF-8?q?Opcje=20filtr=C3=B3w:=20animacja=20i=20poprawki?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JournalView/JournalOptions.vue | 114 +++++++++---------
 src/components/TrainsView/TrainOptions.vue    |  99 +++++++--------
 src/components/TrainsView/TrainTable.vue      |   2 -
 3 files changed, 111 insertions(+), 104 deletions(-)

diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index 674c16c..2ad5fc8 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -7,64 +7,57 @@
       FILTRY
     </button>
 
-    <div class="options_wrapper" v-if="showOptions">
-      <div class="options_content">
-        <h1>SORTUJ WG:</h1>
-
-        <div class="options_sorters">
-          <div v-for="opt in translatedSorterOptions">
-            <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
-              {{ opt.value.toUpperCase() }}
+    <transition name="options-anim">
+      <div class="options_wrapper" v-if="showOptions">
+        <div class="options_content">
+          <h1>SORTUJ WG:</h1>
+          <div class="options_sorters">
+            <div v-for="opt in translatedSorterOptions">
+              <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
+                {{ opt.value.toUpperCase() }}
+              </button>
+            </div>
+          </div>
+          <h1 v-if="filters.length != 0">FILTRUJ WG:</h1>
+          <div class="options_filters">
+            <button
+              v-for="filter in filters"
+              class="filter-option btn--option"
+              :class="{ checked: journalFilterActive.id === filter.id }"
+              :id="filter.id"
+              @click="onFilterChange(filter)"
+            >
+              {{ $t(`options.filter-${filter.id}`) }}
             </button>
           </div>
-        </div>
-
-        <h1 v-if="filters.length != 0">FILTRUJ WG:</h1>
-
-        <div class="options_filters">
-          <button
-            v-for="filter in filters"
-            class="filter-option btn--option"
-            :class="{ checked: journalFilterActive.id === filter.id }"
-            :id="filter.id"
-            @click="onFilterChange(filter)"
-          >
-            {{ $t(`options.filter-${filter.id}`) }}
-          </button>
-        </div>
-
-        <h1>SZUKAJ:</h1>
-
-        <div class="content_search">
-          <div class="search-box" v-for="(_, propName) in searchersValues" :key="propName">
-            <input
-              class="search-input"
-              :type="propName == 'search-date' ? 'date' : 'input'"
-              @keydown.enter="onSearchConfirm"
-              :placeholder="$t(`options.${propName}`)"
-              v-model="searchersValues[propName]"
-            />
-
-            <button class="search-exit">
-              <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
-            </button>
+          <h1>SZUKAJ:</h1>
+          <div class="content_search">
+            <div class="search-box" v-for="(_, propName) in searchersValues" :key="propName">
+              <input
+                class="search-input"
+                :type="propName == 'search-date' ? 'date' : 'input'"
+                @keydown.enter="onSearchConfirm"
+                :placeholder="$t(`options.${propName}`)"
+                v-model="searchersValues[propName]"
+              />
+              <button class="search-exit">
+                <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
+              </button>
+            </div>
+            <!-- <label for="">Data</label>
+            <div class="search-box">
+              <input class="search-input" placeholder="Data" type="date" v-model="searchDate" />
+              <button class="search-exit">
+                <img :src="getIcon('exit')" alt="exit-icon" />
+              </button>
+            </div> -->
+            <action-button class="search-button" @click="onSearchConfirm">
+              {{ $t('options.search-button') }}
+            </action-button>
           </div>
-
-          <!-- <label for="">Data</label>
-          <div class="search-box">
-            <input class="search-input" placeholder="Data" type="date" v-model="searchDate" />
-
-            <button class="search-exit">
-              <img :src="getIcon('exit')" alt="exit-icon" />
-            </button>
-          </div> -->
-
-          <action-button class="search-button" @click="onSearchConfirm">
-            {{ $t('options.search-button') }}
-          </action-button>
         </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 
@@ -143,6 +136,19 @@ export default defineComponent({
 @import '../../styles/search_box.scss';
 @import '../../styles/variables.scss';
 
+.options-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease;
+  }
+}
+
 .bg {
   position: fixed;
   top: 0;
@@ -155,8 +161,6 @@ export default defineComponent({
 
 .journal-options {
   position: relative;
-
-  margin-bottom: 0.5em;
 }
 
 .options_wrapper {
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index 94e305c..d7910c1 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -7,59 +7,51 @@
       FILTRY
     </button>
 
-    <div class="options_wrapper" v-if="showOptions">
-      <div class="options_content">
-        <h1>{{ $t('options.sort-title') }}</h1>
-
-        <div class="options_sorters">
-          <div v-for="opt in translatedSorterOptions">
-            <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
-              {{ opt.value.toUpperCase() }}
-            </button>
+    <transition name="options-anim">
+      <div class="options_wrapper" v-if="showOptions">
+        <div class="options_content">
+          <h1>{{ $t('options.sort-title') }}</h1>
+          <div class="options_sorters">
+            <div v-for="opt in translatedSorterOptions">
+              <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
+                {{ opt.value.toUpperCase() }}
+              </button>
+            </div>
           </div>
-        </div>
-
-        <h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
-
-        <div class="options_filters">
-          <div class="filter-option" v-for="filter in trainFilterList">
-            <button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
-              {{ $t(`options.filter-${filter.id}`) }}
-            </button>
+          <h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
+          <div class="options_filters">
+            <div class="filter-option" v-for="filter in trainFilterList">
+              <button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
+                {{ $t(`options.filter-${filter.id}`) }}
+              </button>
+            </div>
           </div>
-        </div>
-
-        <div class="options_filters">
-          <div class="filter-option">
-            <button @click="clearAllFilters">WYŁĄCZ WSZYSTKIE FILTRY</button>
+          <div class="options_filters">
+            <div class="filter-option">
+              <button @click="clearAllFilters">WYŁĄCZ WSZYSTKIE FILTRY</button>
+            </div>
+            <div class="filter-option">
+              <button @click="resetAllFilters">ZRESETUJ FILTRY</button>
+            </div>
           </div>
-
-          <div class="filter-option">
-            <button @click="resetAllFilters">ZRESETUJ FILTRY</button>
-          </div>
-        </div>
-
-        <h1>{{ $t('options.search-title') }}</h1>
-
-        <div class="content_search">
-          <div class="search-box">
-            <input class="search-input" :placeholder="$t(`options.search-train`)" v-model="searchedTrain" />
-
-            <button class="search-exit">
-              <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" />
-            </button>
-          </div>
-
-          <div class="search-box">
-            <input class="search-input" :placeholder="$t(`options.search-driver`)" v-model="searchedDriver" />
-
-            <button class="search-exit">
-              <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('driver')" />
-            </button>
+          <h1>{{ $t('options.search-title') }}</h1>
+          <div class="content_search">
+            <div class="search-box">
+              <input class="search-input" :placeholder="$t(`options.search-train`)" v-model="searchedTrain" />
+              <button class="search-exit">
+                <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" />
+              </button>
+            </div>
+            <div class="search-box">
+              <input class="search-input" :placeholder="$t(`options.search-driver`)" v-model="searchedDriver" />
+              <button class="search-exit">
+                <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('driver')" />
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 
@@ -145,6 +137,19 @@ export default defineComponent({
 @import '../../styles/search_box.scss';
 @import '../../styles/variables.scss';
 
+.options-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease;
+  }
+}
+
 .bg {
   position: fixed;
   top: 0;
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index b42ac36..ba1dc09 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -139,8 +139,6 @@ img.train-image {
   &-list {
     overflow: auto;
 
-    margin-top: 1em;
-
     @include smallScreen() {
       width: 100%;
     }