Ekran ładowania dla każdego widoku, poprawki w UI

src/views/StationsView.vue

@@ -1,27 +1,108 @@
 <template>
   <div class="stations-view">
-    <List />
+    <Loading v-if="connectionState == 0" message="Ładowanie scenerii..." />
+    <Error v-if="connectionState == 1" />
+
+    <div class="list flex" v-if="connectionState == 2">
+      <transition name="card-anim">
+        <StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
+      </transition>
+      <!-- <div class="info" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div> -->
+
+      <section class="list-body">
+        <Options />
+        <Table :stations="stations" :setFocusedStation="setFocusedStation" />
+      </section>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Vue, Component } from "vue-property-decorator";
+import { Getter } from "vuex-class";
 
-// import Options from "@/components/ui/Options.vue";
-import List from "@/components/ui/List.vue";
+import Station from "@/scripts/interfaces/Station";
+
+import Table from "@/components/StationsView/Table.vue";
+import StationCard from "@/components/ui/StationCard.vue";
+import Options from "@/components/ui/Options.vue";
+import Loading from "@/components/states/Loading.vue";
+import Error from "@/components/states/Error.vue";
+
+enum ConnState {
+  Loading = 0,
+  Error = 1,
+  Connected = 2,
+}
 
 @Component({
-  components: { List },
+  components: {
+    StationCard,
+    Options,
+    Table,
+    Loading,
+    Error,
+  },
 })
-export default class Home extends Vue {
-  mounted() {}
+export default class StationsView extends Vue {
+  focusedStationName: string = "";
+
+  @Getter("getStations") stations!: Station[];
+  @Getter("getConnectionState") connectionState!: ConnState;
+
+  closeCard() {
+    this.focusedStationName = "";
+  }
+
+  setFocusedStation(name: string) {
+    if (this.focusedStationName == name) this.focusedStationName = "";
+    else this.focusedStationName = name;
+  }
+
+  get focusedStationInfo() {
+    return this.stations.find(
+      (station) => station.stationName === this.focusedStationName
+    );
+  }
+
+  mounted() {
+    // this.$store.watch(
+    //   (state, getters) => getters.getConnectionState,
+    //   (state: ConnState) => {
+    //     this.connectionState = state;
+    //     console.log("Najs");
+    //   }
+    // );
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .stations-view {
+  position: relative;
   padding: 1rem 0;
+  min-height: 100%;
+}
 
-  max-height: 100%;
+@import "../styles/variables.scss";
+@import "../styles/responsive.scss";
+
+.card-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.25s ease-in-out;
+  }
+
+  &-enter,
+  &-leave-to {
+    transform: translate(-45%, -50%);
+    opacity: 0;
+  }
+}
+
+.list-body {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
 }
 </style>

src/views/TrainsView.vue

@@ -1,6 +1,8 @@
 <template>
   <section class="trains-view">
-    <ul class="list" v-if="listLoaded">
+    <Loading v-if="!listLoaded" message="Liczenie pociągów..." />
+
+    <ul class="list" v-else>
       <li class="item" v-for="train in computedTrains" :key="train.timetableId">
         <a :href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'" target="_blank">
           <span class="info">
@@ -88,11 +90,17 @@ import { Getter } from "vuex-class";
 
 import Station from "@/scripts/interfaces/Station";
 
+import Loading from "@/components/states/Loading.vue";
+
 import axios from "axios";
 
 const unknownTrainImage = require("@/assets/unknown.png");
 
-@Component
+@Component({
+  components: {
+    Loading,
+  },
+})
 export default class TrainsView extends Vue {
   speedIcon: string = require("@/assets/icon-speed.svg");
   massIcon: string = require("@/assets/icon-mass.svg");
@@ -269,20 +277,27 @@ export default class TrainsView extends Vue {
 
 .trains-view {
   display: flex;
-  align-items: center;
-  flex-direction: column;
+  justify-content: center;
+
+  position: relative;
+  min-height: 100%;
 }
 
 .list {
   margin: 2rem 0;
   overflow: auto;
 
-  max-width: 2000px;
+  width: 90%;
+  max-width: 1024px;
+
+  @include smallScreen() {
+    width: 100%;
+  }
 }
 
 .item {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 
   font-size: calc(0.5rem + 0.5vw);
 
@@ -299,8 +314,8 @@ export default class TrainsView extends Vue {
     grid-template-columns: 1fr;
     grid-template-rows: repeat(3, 1fr);
 
-    font-size: 0.9rem;
-    gap: 0.2em 0;
+    font-size: 0.8rem;
+    gap: 0.4em 0;
     // grid-template-columns: repeat(3, 1fr);
   }
 }
@@ -350,12 +365,14 @@ export default class TrainsView extends Vue {
   }
 
   &-loco img {
-    max-width: 12em;
+    width: 13em;
+    max-width: 190px;
   }
 }
 
 .stats {
   width: 100%;
+
   &-general {
     display: flex;
 
@@ -370,6 +387,7 @@ export default class TrainsView extends Vue {
 
     img {
       margin: 0 0.3em;
+      width: 1.8em;
     }
   }