1.4.5: Poprawki odświeżonego wyglądu

src/components/TrainsView/TrainStats.vue

@@ -2,7 +2,10 @@
   <div class="train-stats">
     <transition name="stats-anim">
       <div class="stats-body" v-if="trainStatsOpen">
-        <h2 class="stats-header">{{ $t("trains.stats") }}</h2>
+        <h2 class="stats-header">
+          <img :src="statsIcon" :alt="$t('trains.stats')" />
+          {{ $t("trains.stats") }}
+        </h2>
 
         <div class="stats-speed">
           <div class="title stats-title">
@@ -80,6 +83,8 @@ export default class TrainStats extends Vue {
   @Prop() readonly trains!: Train[];
   @Prop() readonly trainStatsOpen!: boolean;
 
+  statsIcon = require("@/assets/icon-stats.svg");
+
   get speedStats(): { avg: string; min: string; max: string } {
     if (this.trains.length == 0) return { avg: "0", min: "0", max: "0" };
 
@@ -213,7 +218,13 @@ export default class TrainStats extends Vue {
   }
 
   &-header {
+    display: flex;
     margin-bottom: 0.85em;
+
+    img {
+      vertical-align: middle;
+      margin-right: 0.35em;
+    }
   }
 
   &-body {

src/components/TrainsView/TrainTable.vue

@@ -10,6 +10,7 @@
         v-for="(train, i) in computedTrains"
         :key="i"
         :id="train.timetableData.timetableId"
+        :ref="train.timetableData.timetableId"
       >
         <span class="wrapper">
           <span
@@ -154,7 +155,7 @@
           :followingStops="train.timetableData.followingStops"
           :currentStationName="train.currentStationName"
           @click="changeScheduleShowState(train.timetableData.timetableId)"
-          v-if="showedSchedule == train.timetableData.timetableId"
+          v-show="showedSchedule == train.timetableData.timetableId"
         />
       </li>
     </ul>
@@ -193,8 +194,18 @@ export default class TrainTable extends Vue {
   signalIcon: string = require("@/assets/icon-signal.svg");
   routeIcon: string = require("@/assets/icon-route.svg");
 
+  focusOnTrain(timetableId: number) {
+    const currentEl: HTMLElement = this.$refs[timetableId][0];
+
+    currentEl.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+    });
+  }
+
   changeScheduleShowState(timetableId: number) {
     this.showedSchedule = this.showedSchedule === timetableId ? 0 : timetableId;
+    this.$nextTick(() => this.focusOnTrain(timetableId));
   }
 
   onImageError(e: Event) {
@@ -365,7 +376,7 @@ export default class TrainTable extends Vue {
   flex-direction: column;
   justify-content: space-around;
 
-  font-size: 0.85em;
+  font-size: 0.9em;
 
   // grid-column: 1 / 3;
   // grid-column: span 2;