Poprawiono animacje rozkładów jazdy.

src/App.vue

@@ -21,12 +21,8 @@
           </span>
 
           <span class="header-links">
-            <router-link class="route" active-class="route-active" to="/" exact
-              >SCENERIE</router-link
-            >/
-            <router-link class="route" active-class="route-active" to="/trains"
-              >POCIĄGI</router-link
-            >
+            <router-link class="route" active-class="route-active" to="/" exact>SCENERIE</router-link>/
+            <router-link class="route" active-class="route-active" to="/trains">POCIĄGI</router-link>
           </span>
         </div>
       </header>
@@ -43,9 +39,7 @@
 
       <transition name="message-anim" mode="out-in">
         <span :key="data.dataConnectionStatus">
-          <div class="message loading" v-if="data.dataConnectionStatus == 0">
-            Pobieranie danych...
-          </div>
+          <div class="message loading" v-if="data.dataConnectionStatus == 0">Pobieranie danych...</div>
 
           <div class="message error" v-if="data.dataConnectionStatus == 1">
             <img :src="ErrorIcon" alt="Error" />
@@ -67,7 +61,6 @@ import Clock from "@/components/App/Clock.vue";
 
 // import stationData from "@/data/stations.json";
 
-
 @Component({
   components: { Clock },
 })
@@ -91,7 +84,6 @@ export default class App extends Vue {
 
     //     console.log("-----");
     //   });
-
   }
 }
 </script>
@@ -175,6 +167,8 @@ export default class App extends Vue {
 
   font-size: calc(1.1rem + 2.1vw);
 
+  overflow: hidden;
+
   @include smallScreen() {
     font-size: 2.5rem;
   }

src/components/SceneryView/SceneryTimetable.vue

@@ -37,7 +37,7 @@
     >Brak aktywnych rozkładów!</span>
 
     <transition-group name="list-anim">
-      <div class="timetable-item" v-for="(scheduledTrain, i) in computedScheduledTrains" :key="i">
+      <div class="timetable-item" v-for="(scheduledTrain, i) in computedScheduledTrains" :key="i+1">
         <span class="timetable-general">
           <span class="general-info">
             <router-link
@@ -126,6 +126,13 @@ export default class SceneryTimetable extends Vue {
   listOpen: boolean = false;
   selectedOption: string = "";
 
+  mounted() {
+    if (!this.stationInfo.checkpoints) return;
+
+    if (this.selectedOption == "")
+      this.selectedOption = this.stationInfo.checkpoints[0].checkpointName;
+  }
+
   activated() {
     if (!this.stationInfo) return;
     if (!this.stationInfo.checkpoints) return;
@@ -205,9 +212,15 @@ h3 {
   &-leave-active {
     transition: all 250ms ease-out;
   }
-  &-enter, &-leave-to /* .list-leave-active below version 2.1.8 */ {
+
+  &-enter,
+  &-leave-to {
     opacity: 0;
-    transform: scale(0.95);
+    transform: scale(0.9);
+  }
+
+  &-move {
+    transition: transform 100ms;
   }
 }
 
@@ -420,7 +433,7 @@ h3 {
   }
 
   span.terminated {
-    color: red;
+    color: #e00000;
     font-weight: bold;
   }
 }

src/data/stations.json

@@ -121,7 +121,8 @@
       }
     },
     "default": true,
-    "nonPublic": false
+    "nonPublic": false,
+    "subStations": ["Grabów Miasto", "Grabów Wieś"]
   },
   {
     "stationName": "Parzęczewo",

src/views/SceneryView.vue

@@ -95,12 +95,12 @@ h3 {
 
     display: flex;
     justify-content: center;
-    align-items: flex-start;
 
     font-size: calc(0.5rem + 0.65vw);
 
     @include bigScreen() {
       font-size: 1.25rem;
+      align-items: flex-start;
     }
 
     @include smallScreen {