From 8ec61bef8b31f7d8e61a61c32f2a809c0e5228e9 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 17 Nov 2020 15:00:07 +0100
Subject: [PATCH] =?UTF-8?q?Poprawiono=20animacje=20rozk=C5=82ad=C3=B3w=20j?=
 =?UTF-8?q?azdy.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   | 16 +++++---------
 .../SceneryView/SceneryTimetable.vue          | 21 +++++++++++++++----
 src/data/stations.json                        |  3 ++-
 src/views/SceneryView.vue                     |  2 +-
 4 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c0c1c44..c4b8b85 100644
--- a/src/App.vue
+++ b/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;
   }
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index 6110036..f25a4de 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/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;
   }
 }
diff --git a/src/data/stations.json b/src/data/stations.json
index 1e7a0c5..72f9131 100644
--- a/src/data/stations.json
+++ b/src/data/stations.json
@@ -121,7 +121,8 @@
       }
     },
     "default": true,
-    "nonPublic": false
+    "nonPublic": false,
+    "subStations": ["Grabów Miasto", "Grabów Wieś"]
   },
   {
     "stationName": "Parzęczewo",
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index afb2dc2..e535693 100644
--- a/src/views/SceneryView.vue
+++ b/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 {