1.4.5: Poprawki odświeżonego wyglądu

src/App.vue

@@ -98,7 +98,7 @@ export default class App extends Vue {
   @Action("synchronizeData") synchronizeData;
   @Getter("getAllData") data;
 
-  private VERSION = "1.4.4";
+  private VERSION = "1.4.5";
 
   hasReleaseNotes = false;
   updateModalVisible = false;
@@ -187,10 +187,7 @@ export default class App extends Vue {
 
 // VUE ROUTE CHANGE ANIMATION
 .view-anim {
-  &-enter {
-    opacity: 0.02;
-  }
-
+  &-enter,
   &-leave-to {
     opacity: 0.02;
   }

src/assets/icon-stats.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><rect fill="none" height="24" width="24"/><g><path d="M7.5,21H2V9h5.5V21z M14.75,3h-5.5v18h5.5V3z M22,11h-5.5v10H22V11z"/></g></svg>

src/components/Global/ActionButton.vue

@@ -37,11 +37,11 @@ export default class ActionButton extends Vue {}
     border: 1px solid white;
   }
 
-  img.button_icon {
+  img {
     width: 1.25em;
     vertical-align: middle;
 
-    margin-right: 0.2em;
+    margin-right: 0.35em;
   }
 
   p {

src/components/StationsView/FilterCard.vue

@@ -226,7 +226,7 @@ $saveCol: #28a826;
 
     cursor: pointer;
 
-    padding: 0.45em 0.4em;
+    padding: 0.3em 0.4em;
 
     display: inline-block;
     position: relative;

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;

src/styles/variables.scss

@@ -13,5 +13,5 @@ $accent2Col: #ff3d5d;
 $skr: #ff5100;
 $twr: #ffbb00;
 
-$animDuration: 100ms;
-$animType: ease-out;
+$animDuration: 150ms;
+$animType: ease-in-out;

src/views/StationsView.vue

@@ -205,12 +205,12 @@ export default class StationsView extends Vue {
 .card-anim {
   &-enter-active,
   &-leave-active {
-    transition: all 0.25s ease-in-out;
+    transition: all $animDuration $animType;
   }
 
   &-enter,
   &-leave-to {
-    transform: translate(-45%, -50%);
+    transform: translate(-50%, -50%) scale(0.85);
     opacity: 0;
   }
 }

src/views/TrainsView.vue

@@ -12,6 +12,7 @@
       <div class="options-bar">
         <div class="stats">
           <action-button @click.native="toggleStats">
+            <img :src="statsIcon" :alt="$t('trains.stats')" />
             {{ $t("trains.stats") }}
           </action-button>
           <TrainStats :trains="trains" :trainStatsOpen="trainStatsOpen" />
@@ -60,6 +61,8 @@ export default class TrainsView extends Vue {
   // Passed in route as query parameters
   @Prop() readonly queryTrain!: string;
 
+  statsIcon = require("@/assets/icon-stats.svg");
+
   sorterActive: { id: string; dir: number } = { id: "distance", dir: -1 };
 
   trainStatsOpen: boolean = false;