Poprawki wizualne responsywności

src/App.vue

@@ -98,6 +98,9 @@ import Clock from "@/components/App/Clock.vue";
 
 import StorageManager from "@/scripts/storageManager";
 
+import DataModule from "@/store/modules/DataModule";
+import { getModule } from "vuex-module-decorators";
+
 @Component({
   components: { Clock, UpdateModal },
 })
@@ -115,9 +118,19 @@ export default class App extends Vue {
   iconEN = require("@/assets/icon-en.jpg");
   iconPL = require("@/assets/icon-pl.svg");
 
+  dataStore: DataModule = getModule(DataModule);
+
+  get test() {
+    return this.dataStore.getTest;
+  }
+
   mounted() {
     this.synchronizeData();
 
+    setTimeout(() => {
+      this.dataStore.fetchTest();
+    }, 3000);
+
     if (StorageManager.getStringValue("lang")) {
       this.changeLang(StorageManager.getStringValue("lang"));
     } else if (window.navigator.language) {
@@ -213,23 +226,19 @@ export default class App extends Vue {
 
   overflow: hidden;
 
-  font-size: calc(0.7rem + 0.2vw);
+  font-size: 1rem;
 
-  @include bigScreen {
+  @include midScreen() {
-    font-size: 1rem;
+    font-size: 0.95rem;
   }
 
-  @include smallScreen {
+  @include smallScreen() {
-    font-size: 0.6rem;
+    font-size: 0.7rem;
   }
 }
 
 // CONTAINER
 .app_container {
-  // display: grid;
-  // grid-template-rows: auto 1fr auto;
-  // grid-template-columns: minmax(0, 1fr);
-
   display: flex;
   flex-flow: column;
 
@@ -264,7 +273,7 @@ export default class App extends Vue {
   &_brand {
     position: relative;
     width: 100%;
-    font-size: 4.5em;
+    font-size: 4.25em;
 
     text-align: center;
 
@@ -276,10 +285,10 @@ export default class App extends Vue {
       position: absolute;
       right: 0;
 
-      transform: translate(110%, -40%);
+      transform: translate(110%, -35%);
 
       img {
-        width: 0.5em;
+        width: 0.6em;
       }
 
       cursor: pointer;
@@ -290,7 +299,7 @@ export default class App extends Vue {
     display: flex;
     justify-content: space-between;
 
-    font-size: 1.35em;
+    font-size: 1.25em;
 
     margin: 0 0.3em;
     padding: 0.2em;
@@ -302,7 +311,7 @@ export default class App extends Vue {
 
     border-radius: 0.7em;
 
-    font-size: 1.35em;
+    font-size: 1.25em;
     padding: 0.5em;
   }
 }
@@ -325,7 +334,7 @@ export default class App extends Vue {
 // FOOTER
 footer.app_footer {
   max-width: 100%;
-  padding: 0.3rem;
+  padding: 0.5em;
 
   z-index: 10;
 

src/components/SceneryView/SceneryInfo.vue

@@ -346,7 +346,7 @@ h3 {
 .user,
 .spawn {
   font-weight: 600;
-  font-size: 0.9em;
+  font-size: 0.85em;
 
   display: inline-block;
   padding: 0;

src/components/SceneryView/SceneryTimetable.vue

@@ -265,7 +265,7 @@ h3 {
     }
 
     label {
-      padding: 0.5rem 1rem;
+      padding: 0.5em 0.35em;
       cursor: pointer;
     }
   }
@@ -292,12 +292,12 @@ h3 {
     justify-content: space-between;
     align-items: center;
 
-    padding: 0.5rem 1rem;
+    padding: 0.35em 0.7em;
     min-width: 10em;
     cursor: pointer;
 
     span {
-      margin-right: 2rem;
+      margin-right: 2em;
     }
 
     img {
@@ -346,7 +346,7 @@ h3 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 
-    padding: 0 0.5rem;
+    padding: 0 0.35em;
 
     background: #555;
 

src/components/StationsView/FilterCard.vue

@@ -152,7 +152,11 @@ export default class FilterCard extends Vue {
 @import "../../styles/card";
 
 .card {
-  font-size: 1.45em;
+  font-size: 1.25em;
+
+  @include smallScreen() {
+    font-size: 1.35em;
+  }
 
   &-title {
     font-size: 2em;
@@ -186,6 +190,7 @@ export default class FilterCard extends Vue {
     button {
       margin: 0 0.3em;
       border: 1px solid white;
+      font-size: 0.85em;
     }
   }
 

src/components/StationsView/StationTable.vue

@@ -208,7 +208,7 @@
     </div>
 
     <div class="no-stations" v-if="stations.length == 0">
-      Ups! Brak stacji do wyświetlenia!
+      {{ $t("sceneries.no-stations") }}
     </div>
   </section>
 </template>
@@ -310,7 +310,6 @@ $rowCol: #4b4b4b;
 section.station_table {
   overflow: auto;
   overflow-y: hidden;
-  font-size: calc(0.55rem + 0.35vw);
   font-weight: 500;
 }
 
@@ -365,14 +364,14 @@ tr.station {
   }
 
   & > td {
-    padding: 0.3rem 1rem;
+    padding: 0.25em 1em;
     text-align: center;
 
     cursor: pointer;
 
     @include smallScreen() {
       margin: 0;
-      padding: 0.1rem 0.5rem;
+      padding: 0.1em 0.5em;
     }
   }
 }
@@ -416,8 +415,10 @@ td.station {
     }
 
     .track {
-      margin: 0 0.3rem;
+      margin: 0 0.3em;
-      padding: 0.5em;
+      padding: 0.35em 0.1em;
+      font-size: 1.05em;
+      white-space: pre-wrap;
     }
   }
 
@@ -438,8 +439,8 @@ td.station {
   text-align: center;
   font-size: 1.5em;
 
-  padding: 1rem;
+  padding: 1em;
-  margin: 1rem 0;
+  margin: 1em 0;
 
   background: #333;
 }

src/components/TrainsView/TrainOptions.vue

@@ -172,7 +172,7 @@ export default class TrainOptions extends Vue {
     width: 100%;
     margin: 0.5rem 0;
 
-    font-size: 1.15em;
+    font-size: 0.85rem;
   }
 }
 
@@ -264,8 +264,6 @@ export default class TrainOptions extends Vue {
     padding: 0.5rem 1rem;
     margin: 0;
 
-    font-size: 1em;
-
     min-width: 85%;
   }
 

src/components/TrainsView/TrainStats.vue

@@ -212,7 +212,7 @@ export default class TrainStats extends Vue {
 }
 
 .train-stats {
-  font-size: 1.15em;
+  font-size: 0.9rem;
   z-index: 10;
 
   margin-bottom: 0.5em;

src/components/TrainsView/TrainTable.vue

@@ -17,8 +17,8 @@
             @click="changeScheduleShowState(train.timetableData.timetableId)"
           >
             <div class="info-main">
-              <div class="info-category">
+              <div class="info-top">
-                <div class="category-left">
+                <div class="top-category">
                   <span class="warning twr" v-if="train.timetableData.TWR">
                     TWR
                   </span>
@@ -37,7 +37,7 @@
                   </span>
                 </div>
 
-                <div class="category-right tooltip">
+                <div class="top-timetable-btn tooltip">
                   <img
                     :src="
                       showedSchedule === train.timetableData.timetableId
@@ -235,10 +235,11 @@ export default class TrainTable extends Vue {
 
 .no-trains {
   text-align: center;
-  font-size: 1.35em;
 
-  padding: 1rem;
+  padding: 1em;
-  margin: 1rem 0;
+  margin: 1em 0;
+
+  font-size: 1.35em;
 
   background: var(--clr-bg);
 }
@@ -253,7 +254,7 @@ export default class TrainTable extends Vue {
 
   &-row {
     padding: 1em;
-    margin-bottom: 1rem;
+    margin-bottom: 1em;
 
     background-color: var(--clr-secondary);
 
@@ -263,17 +264,11 @@ export default class TrainTable extends Vue {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 
-      @include smallScreen() {
+      @include midScreen() {
         grid-template-columns: 1fr;
         grid-template-rows: repeat(3, minmax(100px, 1fr));
 
         gap: 0.4em 0;
-
-        font-size: 1.1em;
-      }
-
-      @include bigScreen() {
-        font-size: 1.1rem;
       }
     }
   }
@@ -284,41 +279,14 @@ export default class TrainTable extends Vue {
   flex-direction: column;
   justify-content: space-between;
 
-  &-category {
+  &-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
 
-    font-size: 1.1em;
-
     div {
       display: flex;
     }
-
-    .category-right {
-      padding: 0.15em 0.5em;
-
-      background-color: var(--clr-accent);
-      border-radius: 1em;
-
-      -moz-user-select: none;
-      -webkit-user-select: none;
-      user-select: none;
-
-      img {
-        vertical-align: middle;
-        width: 1.2em;
-      }
-
-      .tooltip-text {
-        font-size: 0.9em;
-        background-color: var(--clr-accent);
-
-        &::after {
-          border-color: var(--clr-accent) transparent transparent transparent;
-        }
-      }
-    }
   }
 
   &-route {
@@ -327,13 +295,17 @@ export default class TrainTable extends Vue {
 
     margin: 5px 0;
 
-    font-size: 1.2em;
+    font-size: 1.1em;
   }
 
   &-stops {
     margin-bottom: 10px;
 
-    font-size: 0.85em;
+    font-size: 0.7em;
+
+    @include smallScreen() {
+      font-size: 0.85em;
+    }
   }
 
   &-bottom {
@@ -372,7 +344,7 @@ export default class TrainTable extends Vue {
   }
 
   &-loco img {
-    width: 13em;
+    width: 200px;
     max-width: 200px;
   }
 }
@@ -382,6 +354,8 @@ export default class TrainTable extends Vue {
   flex-direction: column;
   justify-content: space-around;
 
+  font-size: 0.95em;
+
   &-main {
     display: flex;
     margin-bottom: 1.5em;
@@ -441,7 +415,7 @@ export default class TrainTable extends Vue {
 
 @include bigScreen() {
   .item {
-    font-size: 1rem;
+    font-size: 1em;
   }
 }
 

src/lang/en.json

@@ -58,7 +58,8 @@
     "general": "General info",
     "users": "Drivers online",
     "spawns": "Spawns online",
-    "timetables": "Active timetables"
+    "timetables": "Active timetables",
+    "no-stations": "No stations to show here!"
   },
   "trains": {
     "no-trains": "Oops! No trains online!",

src/lang/pl.json

@@ -58,10 +58,11 @@
     "general": "Informacje <br> ogólne",
     "users": "Maszyniści online",
     "spawns": "Otwarte spawny",
-    "timetables": "Aktywne rozkłady jazdy"
+    "timetables": "Aktywne rozkłady jazdy",
+    "no-stations": "Brak stacji do wyświetlenia!"
   },
   "trains": {
-    "no-trains": "Ups! Brak pociągów online!",
+    "no-trains": "Brak pociągów online!",
     "stats": "STATYSTYKI RUCHU",
     "stats-speed": "PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]",
     "stats-length": "DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]",

src/store/modules/DataModule.ts

@@ -0,0 +1,18 @@
+import store from "@/store";
+import { Module, VuexModule, Mutation, Action, MutationAction } from "vuex-module-decorators";
+
+@Module({ dynamic: true, store, name: "dataModule" })
+export default class MyModule extends VuexModule {
+  test: string = "xd";
+
+  get getTest() {
+    return this.test;
+  }
+
+  @MutationAction
+  async fetchTest() {
+    const fetched = "aaa";
+
+    return { test: fetched };
+  }
+}

src/styles/global.scss

@@ -33,18 +33,30 @@ body {
 .tooltip {
   position: relative;
 
+  background-color: var(--clr-accent);
+  padding: .1em .5em;
+  border-radius: 1em;
+
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   & > &-text {
     display: inline-block;
     width: 150px;
 
-    padding: .5rem .35rem;
+
-    background-color: #830000;
+    font-size: 0.9em;
-    border-radius: .5rem;
+
+    background-color: var(--clr-accent);
+
+    padding: .15em .5em;
+    border-radius: 1em;
     
     display: inline-block;
     max-width: 150px;
     
-    font-size: 1em;
     text-align: center;
     color: #fff;
     
@@ -66,7 +78,7 @@ body {
       margin-left: -5px;
       border-width: 5px;
       border-style: solid;
-      border-color: #830000 transparent transparent transparent;
+      border-color: var(--clr-accent) transparent transparent transparent;
     }
   }
 
@@ -137,10 +149,11 @@ input {
   border: none;
 
   color: #bdbdbd;
-  font-size: 0.9em;
+
+  font-size: 1em;
 
   outline: none;
-  padding: 0.35em;
+  padding: 0.35em 0.5em;
   cursor: pointer;
 
   transition: all 0.3s;

src/styles/responsive.scss

@@ -4,6 +4,13 @@
     }
 }
 
+
+@mixin midScreen() {
+    @media only screen and (max-width: 950px) {
+        @content;
+    }
+}
+
 @mixin bigScreen() {
     @media only screen and (min-width: 2000px) {
         @content;

src/views/StationsView.vue

@@ -24,7 +24,7 @@
               <p>{{ $t("options.donate") }}</p>
             </button> -->
           </div>
-
+          <!-- 
           <div class="bar_indicators">
             <transition name="indicator-anim">
               <span
@@ -45,7 +45,7 @@
                 <img :src="timetableIcon" alt="icon-timetable" />
               </span>
             </transition>
-          </div>
+          </div> -->
         </div>
 
         <div class="body_table">
@@ -243,7 +243,7 @@ export default class StationsView extends Vue {
 .stations_view {
   position: relative;
 
-  padding: 1rem 0;
+  padding: 1em 0;
   min-height: 100%;
 }
 
@@ -255,37 +255,25 @@ export default class StationsView extends Vue {
 .stations_body {
   margin: 0 auto;
   overflow: auto;
+}
 
-  & > .body_bar {
+.body_bar {
-    display: flex;
+  display: flex;
-    justify-content: space-between;
+  justify-content: space-between;
-  }
 }
 
 .bar_actions {
-  display: flex;
-
   width: 100%;
 
-  font-size: 1.15em;
+  font-size: 1.1em;
-
-  button {
-    margin-right: 0.5em;
-  }
 }
 
 .bar_indicators {
-  display: flex;
+  border: 1px solid red;
-  align-items: flex-end;
 
   > span {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    width: 2.5em;
-    height: 2.5em;
     margin-left: 0.5em;
+    padding: 0.5em 0.5em;
 
     // background-color: #e68e00;
     border-radius: 1em 1em 0 0;

src/views/TrainsView.vue

@@ -136,10 +136,6 @@ export default class TrainsView extends Vue {
   max-width: 1300px;
 
   padding: 0 0.5rem;
-
-  @include bigScreen() {
-    font-size: 0.9rem;
-  }
 }
 
 @include smallScreen {