Poprawki wyglądu i funkcjonalności

src/components/StationsView/FilterCard.vue

@@ -148,7 +148,7 @@ export default class FilterCard extends Vue {
 @import "../../styles/card";
 
 .card {
-  font-size: 1.5em;
+  font-size: 1.45em;
 
   &-title {
     font-size: 2em;

src/components/StationsView/StationTable.vue

@@ -288,8 +288,6 @@ section.station_table {
   overflow-y: hidden;
   font-size: calc(0.55rem + 0.35vw);
   font-weight: 500;
-
-  font-size: 1.2em;
 }
 
 .table_wrapper {

src/components/TrainsView/TrainSchedule.vue

@@ -17,24 +17,34 @@
             v-if="
               i > 0 && followingStops[i - 1].departureLine != stop.arrivalLine
             "
-          >{{ stop.arrivalLine }}</div>
+          >
+            {{ stop.arrivalLine }}
+          </div>
 
           <span class="stop-info">
             <div class="info-indicator"></div>
 
+            <span class="info-distance">
+              {{ Math.floor(stop.stopDistance) }}
+            </span>
+
             <span class="info-name" v-html="stop.stopName"></span>
             <span class="info-date">
               <span
                 class="date-arrival"
                 v-if="!stop.beginsHere"
                 :class="{
-                  delayed: stop.arrivalDelay > 0,
-                  preponed: stop.arrivalDelay < 0,
+                  delayed: stop.arrivalDelay > 0 && stop.confirmed,
+                  preponed: stop.arrivalDelay < 0 && stop.confirmed,
                 }"
               >
                 p.
                 {{
-                stylizeTime(stop.arrivalRealTimeString, stop.arrivalDelay)
+                  stylizeTime(
+                    stop.arrivalRealTimeString,
+                    stop.arrivalDelay,
+                    stop.confirmed
+                  )
                 }}
               </span>
 
@@ -42,19 +52,24 @@
                 class="date-stop"
                 v-if="stop.stopTime"
                 :class="stop.stopType.replace(', ', '-')"
-              >{{ stop.stopTime }} {{ stop.stopType }}</span>
+                >{{ stop.stopTime }} {{ stop.stopType }}</span
+              >
 
               <span
                 class="date-departure"
                 v-if="!stop.terminatesHere && stop.stopTime != 0"
                 :class="{
-                  delayed: stop.departureDelay > 0,
-                  preponed: stop.departureDelay < 0,
+                  delayed: stop.departureDelay > 0 && stop.confirmed,
+                  preponed: stop.departureDelay < 0 && stop.confirmed,
                 }"
               >
                 o.
                 {{
-                stylizeTime(stop.departureRealTimeString, stop.departureDelay)
+                  stylizeTime(
+                    stop.departureRealTimeString,
+                    stop.departureDelay,
+                    stop.confirmed
+                  )
                 }}
               </span>
             </span>
@@ -77,10 +92,12 @@ export default class TrainSchedule extends Vue {
   @Prop() readonly followingStops!: TrainStop[];
   @Prop() readonly currentStationName!: string;
 
-  stylizeTime(timeString: string, delay: number) {
+  stylizeTime(timeString: string, delay: number, confirmed: boolean) {
     return (
       timeString +
-      (delay != 0 ? " (" + (delay > 0 ? "+" : "") + delay.toString() + ")" : "")
+      (delay != 0 && confirmed
+        ? " (" + (delay > 0 ? "+" : "") + delay.toString() + ")"
+        : "")
     );
   }
 
@@ -95,14 +112,8 @@ export default class TrainSchedule extends Vue {
 
 .train-schedule {
   max-height: 600px;
-  overflow: auto;
-  margin-top: 1rem;
-
-  font-size: 1em;
-
-  @include smallScreen() {
-    font-size: 0.8em;
-  }
+  // overflow: auto;
+  margin-top: 2em;
 }
 
 .schedule-bar,
@@ -129,8 +140,7 @@ export default class TrainSchedule extends Vue {
 
 .schedule-wrapper {
   position: relative;
-  margin-top: 1rem;
-  margin-left: 0.5rem;
+  margin-left: 1.5em;
 }
 
 ul.schedule-list {
@@ -146,19 +156,19 @@ ul.schedule-list > li.schedule-item {
   padding: 0 0.5rem;
 
   &.confirmed {
-    & > .progress-bar,
-    & > .stop-info > .info-indicator {
+    .progress-bar,
+    .stop-info > .info-indicator {
       background: lime;
     }
   }
 
   &.stopped {
-    & > .progress-bar {
+    .progress-bar {
       background: lime;
       height: 50%;
     }
 
-    & > .stop-info > .info-indicator {
+    .stop-info > .info-indicator {
       background: orangered;
     }
   }
@@ -169,13 +179,26 @@ li.schedule-item > .stop-info {
 
   position: relative;
 
-  & > .info-indicator {
+  .info-distance {
+    position: absolute;
+
+    top: 50%;
+    left: -1.8rem;
+    transform: translate(-100%, -50%);
+
+    font-size: 0.8em;
+    color: #d6d6d6;
+  }
+
+  .info-indicator {
     position: absolute;
     z-index: 1;
 
     top: 50%;
     left: -1.5rem;
 
+    text-align: right;
+
     transform: translateY(-50%);
 
     width: 15px;
@@ -184,21 +207,21 @@ li.schedule-item > .stop-info {
     background: white;
   }
 
-  & > .info-name {
+  .info-name {
     background: rgb(0, 81, 187);
     padding: 0.3rem 0.5rem;
   }
 
-  & > .info-date {
+  .info-date {
     display: flex;
     align-items: center;
 
-    & > span {
+    span {
       background: #5c5c5c;
       padding: 0.3rem 0.5rem;
     }
 
-    & > .date-stop {
+    .date-stop {
       &.ph,
       &.ph-pm {
         background: #ce8d00;
@@ -211,8 +234,8 @@ li.schedule-item > .stop-info {
       }
     }
 
-    & > .date-arrival,
-    & > .date-departure {
+    .date-arrival,
+    .date-departure {
       &.delayed {
         background: rgb(250, 0, 0);
       }

src/components/TrainsView/TrainStats.vue

@@ -207,7 +207,7 @@ export default class TrainStats extends Vue {
 }
 
 .train-stats {
-  font-size: 1.1em;
+  font-size: 1.15em;
   z-index: 10;
 
   margin-bottom: 0.5em;
@@ -319,7 +319,6 @@ export default class TrainStats extends Vue {
 
   .stats-body {
     display: block;
-    font-size: 0.9em;
 
     width: 100%;
 

src/components/TrainsView/TrainTable.vue

@@ -249,7 +249,7 @@ export default class TrainTable extends Vue {
 
 .no-trains {
   text-align: center;
-  font-size: 1.5em;
+  font-size: 1.35em;
 
   padding: 1rem;
   margin: 1rem 0;
@@ -259,8 +259,6 @@ export default class TrainTable extends Vue {
 
 .train {
   &-list {
-    font-size: 1.05em;
-
     @include smallScreen() {
       width: 100%;
       overflow: hidden;
@@ -283,7 +281,7 @@ export default class TrainTable extends Vue {
         grid-template-columns: 1fr;
         grid-template-rows: repeat(3, minmax(100px, 1fr));
 
-        font-size: 1.1em;
+        font-size: 1.25em;
         gap: 0.4em 0;
       }
 
@@ -348,7 +346,7 @@ export default class TrainTable extends Vue {
   &-stops {
     margin-bottom: 10px;
 
-    font-size: 0.7em;
+    font-size: 0.8em;
   }
 
   &-online {