Poprawki wizualne responsywności

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;
-      padding: 0.5em;
+      margin: 0 0.3em;
+      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;
-  margin: 1rem 0;
+  padding: 1em;
+  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="category-left">
+              <div class="info-top">
+                <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;
-  margin: 1rem 0;
+  padding: 1em;
+  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;
   }
 }