From 82c7cdf354455b84ea87c760dca153f3d9811aa2 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 20 Feb 2021 22:23:46 +0100
Subject: [PATCH] =?UTF-8?q?Poprawki=20w=20responsywno=C5=9Bci=20wygl=C4=85?=
 =?UTF-8?q?du?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                           | 21 +++++------------
 src/components/Global/UpdateModal.vue |  6 ++---
 src/views/StationsView.vue            | 34 +++++----------------------
 src/views/TrainsView.vue              | 21 +++++------------
 4 files changed, 20 insertions(+), 62 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f2f6b0c..e6076d8 100644
--- a/src/App.vue
+++ b/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
diff --git a/src/components/Global/UpdateModal.vue b/src/components/Global/UpdateModal.vue
index 3260c1b..2e46fc8 100644
--- a/src/components/Global/UpdateModal.vue
+++ b/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;
diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue
index 029f622..2c06ab5 100644
--- a/src/views/StationsView.vue
+++ b/src/views/StationsView.vue
@@ -6,11 +6,7 @@
       <div class="stations_body">
         <div class="body_bar">
           <div class="bar_actions">
-            <button
-              class="action-btn"
-              :class="{ open: filterCardOpen }"
-              @click="() => toggleCardsState('filter')"
-            >
+            <button 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
-                class="indicator_scenery-data"
-                v-if="data.dataConnectionStatus < 2"
-                :class="dataStatusClass"
-              >
+              <span class="indicator_scenery-data" v-if="data.dataConnectionStatus < 2" :class="dataStatusClass">
                 <img :src="trainIcon" alt="icon-train" />
               </span>
             </transition>
 
             <transition name="indicator-anim">
-              <span
-                class="indicator_timetable-data"
-                v-if="data.timetableDataStatus < 2"
-                :class="timetableDataStatusClass"
-              >
+              <span 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
-            :stations="computedStations"
-            :sorterActive="filterManager.getSorter()"
-            :setFocusedStation="setFocusedStation"
-            :changeSorter="changeSorter"
-          />
+          <StationTable :stations="computedStations" :sorterActive="filterManager.getSorter()" :setFocusedStation="setFocusedStation" :changeSorter="changeSorter" />
         </div>
       </div>
     </div>
@@ -61,12 +44,7 @@
     </transition>
 
     <transition name="card-anim">
-      <FilterCard
-        v-if="filterCardOpen"
-        :exit="() => toggleCardsState('filter')"
-        @changeFilterValue="changeFilterValue"
-        @resetFilters="resetFilters"
-      />
+      <FilterCard 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%;
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 189bfc6..181ecfe 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -3,19 +3,11 @@
     <div class="body-wrapper">
       <div class="options-wrapper">
         <TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
-        <TrainSearch
-          @changeSearchedTrain="changeSearchedTrain"
-          @changeSearchedDriver="changeSearchedDriver"
-          :passedSearchedTrain="passedSearchedTrain"
-          :focusedTrain="focusedTrain"
-        />
+        <TrainSearch @changeSearchedTrain="changeSearchedTrain" @changeSearchedDriver="changeSearchedDriver" :passedSearchedTrain="passedSearchedTrain" :focusedTrain="focusedTrain" />
       </div>
 
       <TrainStats :trains="trains" />
-      <TrainTable
-        :computedTrains="computedTrains"
-        @changeFocusedTrain="changeFocusedTrain"
-      />
+      <TrainTable :computedTrains="computedTrains" @changeFocusedTrain="changeFocusedTrain" />
     </div>
   </section>
 </template>
@@ -79,8 +71,8 @@ export default class TrainsView extends Vue {
             : true) &&
           (this.searchedDriver.length > 0
             ? train.driverName
-              .toLowerCase()
-              .includes(this.searchedDriver.toLowerCase())
+                .toLowerCase()
+                .includes(this.searchedDriver.toLowerCase())
             : true)
       )
       .sort((a, b) => {
@@ -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 {