Poprawki w responsywności wyglądu

src/App.vue

@@ -16,7 +16,6 @@
             <div class="info_counter">
               <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
               <span>{{ data.stationCount }}</span>
-
               <span>{{ data.trainCount }}</span>
               <img src="@/assets/icon-train.svg" alt="icon train" />
             </div>
@@ -129,11 +128,15 @@ export default class App extends Vue {
 
   overflow: hidden;
 
-  font-size: calc(0.4rem + 0.4vw);
+  font-size: calc(0.7rem + 0.2vw);
 
   @include bigScreen {
     font-size: 1rem;
   }
+
+  @include smallScreen {
+    font-size: 0.65rem;
+  }
 }
 
 // CONTAINER
@@ -155,10 +158,6 @@ export default class App extends Vue {
 
   display: flex;
   justify-content: center;
-
-  @include smallScreen() {
-    font-size: 1.2em;
-  }
 }
 
 .header_brand {
@@ -180,10 +179,6 @@ export default class App extends Vue {
 
   margin: 0 0.3em;
   padding: 0.2em;
-
-  @include smallScreen() {
-    font-size: 1.5em;
-  }
 }
 
 .header_links {
@@ -192,12 +187,8 @@ export default class App extends Vue {
 
   border-radius: 0.7em;
 
-  font-size: 1.2em;
+  font-size: 1.35em;
   padding: 0.5em;
-
-  @include smallScreen() {
-    font-size: 1.4em;
-  }
 }
 
 // COUNTER

src/components/Global/UpdateModal.vue

@@ -55,8 +55,6 @@ export default class UpdateModal extends Vue {
   max-height: 95vh;
   overflow: auto;
 
-  font-size: 1.2em;
-
   transform: translate(-50%, -50%);
 
   background: rgba(black, 0.85);
@@ -65,13 +63,13 @@ export default class UpdateModal extends Vue {
   text-align: center;
 
   @include smallScreen() {
-    font-size: 1.2em;
+    font-size: 0.8em;
     width: 95%;
   }
 }
 
 .header {
-  font-size: 5em;
+  font-size: 4.5em;
 
   img {
     width: 0.8em;

src/views/StationsView.vue

@@ -6,11 +6,7 @@
       <div class="stations_body">
         <div class="body_bar">
           <div class="bar_actions">
-            <button
+            <button class="action-btn" :class="{ open: filterCardOpen }" @click="() => toggleCardsState('filter')">
-              class="action-btn"
-              :class="{ open: filterCardOpen }"
-              @click="() => toggleCardsState('filter')"
-            >
               <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
               <p>FILTRY</p>
             </button>
@@ -24,21 +20,13 @@
 
           <div class="bar_indicators">
             <transition name="indicator-anim">
-              <span
+              <span class="indicator_scenery-data" v-if="data.dataConnectionStatus < 2" :class="dataStatusClass">
-                class="indicator_scenery-data"
-                v-if="data.dataConnectionStatus < 2"
-                :class="dataStatusClass"
-              >
                 <img :src="trainIcon" alt="icon-train" />
               </span>
             </transition>
 
             <transition name="indicator-anim">
-              <span
+              <span class="indicator_timetable-data" v-if="data.timetableDataStatus < 2" :class="timetableDataStatusClass">
-                class="indicator_timetable-data"
-                v-if="data.timetableDataStatus < 2"
-                :class="timetableDataStatusClass"
-              >
                 <img :src="timetableIcon" alt="icon-timetable" />
               </span>
             </transition>
@@ -46,12 +34,7 @@
         </div>
 
         <div class="body_table">
-          <StationTable
+          <StationTable :stations="computedStations" :sorterActive="filterManager.getSorter()" :setFocusedStation="setFocusedStation" :changeSorter="changeSorter" />
-            :stations="computedStations"
-            :sorterActive="filterManager.getSorter()"
-            :setFocusedStation="setFocusedStation"
-            :changeSorter="changeSorter"
-          />
         </div>
       </div>
     </div>
@@ -61,12 +44,7 @@
     </transition>
 
     <transition name="card-anim">
-      <FilterCard
+      <FilterCard v-if="filterCardOpen" :exit="() => toggleCardsState('filter')" @changeFilterValue="changeFilterValue" @resetFilters="resetFilters" />
-        v-if="filterCardOpen"
-        :exit="() => toggleCardsState('filter')"
-        @changeFilterValue="changeFilterValue"
-        @resetFilters="resetFilters"
-      />
     </transition>
   </div>
 </template>
@@ -247,7 +225,7 @@ export default class StationsView extends Vue {
 .stations_view {
   position: relative;
 
-  font-size: 0.95em;
+  font-size: 0.9em;
 
   padding: 1rem 0;
   min-height: 100%;

src/views/TrainsView.vue

@@ -3,19 +3,11 @@
     <div class="body-wrapper">
       <div class="options-wrapper">
         <TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
-        <TrainSearch
+        <TrainSearch @changeSearchedTrain="changeSearchedTrain" @changeSearchedDriver="changeSearchedDriver" :passedSearchedTrain="passedSearchedTrain" :focusedTrain="focusedTrain" />
-          @changeSearchedTrain="changeSearchedTrain"
-          @changeSearchedDriver="changeSearchedDriver"
-          :passedSearchedTrain="passedSearchedTrain"
-          :focusedTrain="focusedTrain"
-        />
       </div>
 
       <TrainStats :trains="trains" />
-      <TrainTable
+      <TrainTable :computedTrains="computedTrains" @changeFocusedTrain="changeFocusedTrain" />
-        :computedTrains="computedTrains"
-        @changeFocusedTrain="changeFocusedTrain"
-      />
     </div>
   </section>
 </template>
@@ -93,7 +85,8 @@ export default class TrainsView extends Vue {
           case "distance":
             if (!a.timetableData || !b.timetableData) return 0;
 
-            if (a.timetableData.routeDistance > b.timetableData.routeDistance) return this.sorterActive.dir;
+            if (a.timetableData.routeDistance > b.timetableData.routeDistance)
+              return this.sorterActive.dir;
             else return -this.sorterActive.dir;
             break;
 
@@ -135,8 +128,6 @@ export default class TrainsView extends Vue {
   max-width: 1300px;
 
   padding: 0 0.5rem;
-
-  font-size: calc(0.4rem + 0.4vw);
 }
 
 .options-wrapper {