Poprawki w responsywności

src/components/Global/ActionButton.vue

@@ -60,6 +60,7 @@ export default defineComponent({});
 
 .button_content {
   display: flex;
+  justify-content: center;
   align-items: center;
 }
 </style>

src/components/JournalView/JournalOptions.vue

@@ -106,62 +106,34 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive';
 
-.journal-options {
-  @include smallScreen() {
-    width: 100%;
-  }
-}
-
 .options {
   &_wrapper {
     display: flex;
-    flex-wrap: wrap;
-
-    @include smallScreen() {
-      justify-content: center;
-    }
   }
 
   &_content {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
-    align-items: flex-start;
 
     .content_search,
     .content_select {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
-    }
 
-    @include smallScreen() {
+      padding: 0.25em 0.25em 0 0;
-      padding: 0 1em;
-
-      .content_select {
-        margin: 0 auto;
-      }
-
-      .content_search {
-        justify-content: center;
-      }
     }
   }
 }
 
-.content_search .search {
+.search {
   &-box {
     position: relative;
 
     background: #333;
     border-radius: 0.5em;
     min-width: 200px;
-
+    margin-right: 0.25em;
-    margin: 0.5em 0.5em 0.5em 0;
-
-    @include smallScreen() {
-      width: 100%;
-      margin: 0.5em auto;
-    }
   }
 
   &-input {
@@ -182,4 +154,46 @@ export default defineComponent({
     width: 1em;
   }
 }
+
+@include smallScreen() {
+  .journal-options {
+    width: 100%;
+  }
+  .options {
+    &_wrapper {
+      justify-content: center;
+    }
+
+    &_content {
+      padding: 0 1em;
+
+      flex-direction: column;
+
+      .content_select {
+        margin: 0 auto;
+        padding: 0;
+      }
+
+      .content_search {
+        justify-content: center;
+      }
+    }
+  }
+
+  .search {
+    &-box,
+    &-button {
+      margin: 0.5em 0 0 0;
+    }
+
+    &-box {
+      width: 100%;
+    }
+
+    &-button {
+      width: 80%;
+      max-width: 300px;
+    }
+  }
+}
 </style>

src/components/SceneryView/SceneryTimetable.vue

@@ -323,12 +323,6 @@ h3.timetable-header {
     cursor: pointer;
     z-index: 10;
 
-    @include smallScreen() {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
     &.loading,
     &.empty {
       padding: 1rem;
@@ -349,22 +343,12 @@ h3.timetable-header {
     justify-content: space-between;
 
     text-align: left;
-
-    @include smallScreen() {
-      width: 100%;
-    }
   }
 
   &-schedule {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
     font-size: 1.15em;
-
-    @include smallScreen() {
-      width: 100%;
-      margin: 0.5em 0;
-      font-size: 1.2em;
-    }
   }
 }
 
@@ -496,4 +480,25 @@ h3.timetable-header {
 .departure-time.terminates {
   font-size: 0.85em;
 }
+
+@include smallScreen() {
+  .timetable {
+    &-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      font-size: 1.2em;
+    }
+
+    &-general {
+      width: 100%;
+    }
+
+    &-schedule {
+      width: 100%;
+      margin: 0.5em 0;
+    }
+  }
+}
 </style>

src/components/StationsView/StationFilterCard.vue

@@ -168,6 +168,9 @@ export default defineComponent({
     handleChangeRegion() {
       this.$store.commit(MUTATIONS.SET_REGION, this.currentRegion);
 
+      console.log(this.currentRegion);
+      
+
       this.closeCard();
     },
 

src/components/StationsView/StationTable.vue

@@ -12,7 +12,7 @@
                   class="sort-icon"
                   v-if="sorterActive.index == i"
                   :src="sorterActive.dir == 1 ? ascIcon : descIcon"
-                  alt
+                  alt="sort icon"
                 />
               </span>
             </th>
@@ -25,7 +25,7 @@
                   class="sort-icon"
                   v-if="sorterActive.index == i + 7"
                   :src="sorterActive.dir == 1 ? ascIcon : descIcon"
-                  alt
+                  alt="sort icon"
                 />
               </span>
             </th>

src/components/TrainsView/TrainOptions.vue

@@ -2,23 +2,27 @@
   <div class="train-options">
     <div class="options_wrapper">
       <div class="options_content">
-        <select-box
+        <div class="content_select">
-          :itemList="translatedSorterOptions"
+          <select-box
-          :defaultItemIndex="0"
+            :itemList="translatedSorterOptions"
-          @selected="changeSorter"
+            :defaultItemIndex="0"
-          :prefix="$t('trains.sorter-prefix')"
+            @selected="changeSorter"
-        />
+            :prefix="$t('trains.sorter-prefix')"
-
+          />
-        <div class="search-box">
-          <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
-
-          <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
         </div>
 
-        <div class="search-box">
+        <div class="content_search">
-          <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
+          <div class="search-box">
+            <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
 
-          <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
+            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
+          </div>
+
+          <div class="search-box">
+            <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
+
+            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
+          </div>
         </div>
       </div>
     </div>
@@ -145,28 +149,19 @@ export default defineComponent({
 .options {
   &_wrapper {
     display: flex;
-    flex-wrap: wrap;
-
-    @include smallScreen() {
-      padding: 0 1em;
-
-      justify-content: center;
-    }
   }
 
   &_content {
     display: flex;
-    align-items: center;
     flex-wrap: wrap;
 
-    & > * {
+    .content_search,
-        margin-right: 0.25em;
+    .content_select {
-        margin-top: 0.25em;
+      display: flex;
-    }
+      align-items: center;
+      flex-wrap: wrap;
 
-    @include smallScreen() {
+      padding: 0.25em 0.25em 0 0;
-      margin: 0 auto;
-      justify-content: center;
     }
   }
 }
@@ -178,11 +173,7 @@ export default defineComponent({
     background: #333;
     border-radius: 0.5em;
     min-width: 200px;
-
+    margin-right: 0.25em;
-
-    @include smallScreen() {
-      flex-grow: 2;
-    }
   }
 
   &-input {
@@ -203,7 +194,6 @@ export default defineComponent({
     width: 1em;
   }
 }
-
 .filters {
   display: flex;
   flex-wrap: wrap;
@@ -232,4 +222,46 @@ export default defineComponent({
     color: salmon;
   }
 }
+
+@include smallScreen() {
+  .journal-options {
+    width: 100%;
+  }
+  .options {
+    &_wrapper {
+      justify-content: center;
+    }
+
+    &_content {
+      padding: 0 1em;
+
+      flex-direction: column;
+
+      .content_select {
+        margin: 0 auto;
+        padding: 0;
+      }
+
+      .content_search {
+        justify-content: center;
+      }
+    }
+  }
+
+  .search {
+    &-box,
+    &-button {
+      margin: 0.5em 0 0 0;
+    }
+
+    &-box {
+      width: 100%;
+    }
+
+    &-button {
+      width: 80%;
+      max-width: 300px;
+    }
+  }
+}
 </style>

src/views/StationsView.vue

@@ -37,7 +37,6 @@ import FilterCard from '@/components/StationsView/StationFilterCard.vue';
 import SelectBox from '@/components/Global/SelectBox.vue';
 
 import { StoreData } from '@/scripts/interfaces/StoreData';
-import { DataStatus } from '@/scripts/enums/DataStatus';
 import { computed, ComputedRef, defineComponent, reactive } from 'vue';
 import { useStore } from '@/store';
 import { GETTERS } from '@/constants/storeConstants';