Opcje filtrów: animacja i poprawki

src/components/JournalView/JournalOptions.vue

@@ -7,10 +7,10 @@
       FILTRY
     </button>
 
+    <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)">
@@ -18,9 +18,7 @@
               </button>
             </div>
           </div>
-
           <h1 v-if="filters.length != 0">FILTRUJ WG:</h1>
-
           <div class="options_filters">
             <button
               v-for="filter in filters"
@@ -32,9 +30,7 @@
               {{ $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
@@ -44,27 +40,24 @@
                 :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>
         </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 {

src/components/TrainsView/TrainOptions.vue

@@ -7,10 +7,10 @@
       FILTRY
     </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)">
@@ -18,9 +18,7 @@
               </button>
             </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)">
@@ -28,31 +26,24 @@
               </button>
             </div>
           </div>
-
           <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>
-
           <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>
@@ -60,6 +51,7 @@
           </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;

src/components/TrainsView/TrainTable.vue

@@ -139,8 +139,6 @@ img.train-image {
   &-list {
     overflow: auto;
 
-    margin-top: 1em;
-
     @include smallScreen() {
       width: 100%;
     }