From ab778712e6b6bfeaf3db9cbf83970199f0dd983b Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 3 Aug 2020 21:00:03 +0200
Subject: [PATCH] =?UTF-8?q?Zmiany=20w=20wygl=C4=85dzie,=20zmiana=20pozycji?=
 =?UTF-8?q?=20opcji?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                              | 305 +++++------------------
 src/components/ui/AppBar.vue             |  15 +-
 src/components/ui/Clock.vue              |  10 +-
 src/components/ui/List.vue               | 254 ++++++++++---------
 src/components/ui/Options.vue            |  28 ++-
 src/router/index.ts                      |  13 +-
 src/styles/global.scss                   | 211 ++++++++++++++++
 src/views/{Home.vue => StationsView.vue} |   8 +-
 src/views/TrainsView.vue                 |  14 ++
 9 files changed, 455 insertions(+), 403 deletions(-)
 create mode 100644 src/styles/global.scss
 rename src/views/{Home.vue => StationsView.vue} (80%)
 create mode 100644 src/views/TrainsView.vue

diff --git a/src/App.vue b/src/App.vue
index 5b9ee48..4125aef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,27 @@
 <template>
   <div class="app">
-    <div class="app-container">
-      <header class="app-header flex flex-column">
-        <div class="brand-name">
-          <span>Stacj</span>
-          <img src="@/assets/trainlogo.png" alt="trainlogo" />
-          <span>wnik</span>
+    <div class="container">
+      <header class="header">
+        <div class="header-body">
+          <span class="header-brand">
+            <span>Stacj</span>
+            <img src="@/assets/trainlogo.png" alt="trainlogo" />
+            <span>wnik</span>
+          </span>
+
+          <span class="header-info">
+            <Clock />
+            <div class="counter">
+              <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
+              <span>{{stationCount}}</span>
+
+              <span>{{trainCount}}</span>
+              <img src="@/assets/icon-train.svg" alt="icon train" />
+            </div>
+          </span>
         </div>
-
-        <Clock />
       </header>
 
-      <AppBar :stationCount="stationCount" :trainCount="trainCount" />
-
       <main class="app-main">
         <Loading v-if="connectionState == 0" />
         <Error v-else-if="connectionState == 1" :error="errorMessage" />
@@ -33,7 +42,7 @@ import { mapGetters, mapActions } from "vuex";
 import Error from "@/components/states/Error.vue";
 import Loading from "@/components/states/Loading.vue";
 import Clock from "@/components/ui/Clock.vue";
-import AppBar from "@/components/ui/AppBar.vue";
+import Options from "@/components/ui/Options.vue";
 
 enum ConnState {
   Loading = 0,
@@ -42,7 +51,7 @@ enum ConnState {
 }
 
 @Component({
-  components: { Error, Loading, Clock, AppBar },
+  components: { Error, Loading, Clock, Options },
 })
 export default class App extends Vue {
   @Getter("getStations") stations;
@@ -68,249 +77,48 @@ export default class App extends Vue {
 <style lang="scss">
 @import "./styles/responsive.scss";
 @import "./styles/variables.scss";
-
-:root {
-  font-size: 16px;
-}
-
-::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
-
-  &-track {
-    background: #222;
-  }
-
-  &-thumb {
-    border-radius: 1rem;
-    background: #777;
-  }
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  width: 100%;
-  margin: 0;
-  font-family: "Muli", sans-serif;
-}
-
-button,
-input {
-  font-family: "Muli", sans-serif;
-}
-
-input {
-  border: 1px solid white;
-  background: none;
-  color: white;
-  font-size: 1em;
-
-  padding: 0.15em;
-  margin: 0.2em;
-
-  max-width: 55px;
-
-  &::placeholder {
-    color: #bebebe;
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-.status {
-  border-radius: 1.3rem;
-  font-weight: 500;
-
-  font-size: 0.95em;
-  padding: 0.25em 0.4em;
-
-  background-color: #00be19;
-
-  &.free {
-    background-color: #8a8a8a;
-    font-size: 0.95em;
-  }
-
-  &.ending {
-    background-color: $accentCol;
-    color: black;
-    font-size: 0.9em;
-  }
-
-  &.no-limit {
-    background-color: #0077ae;
-    font-size: 0.85em;
-  }
-
-  &.not-signed,
-  &.unavailable {
-    background-color: $accent2Col;
-    font-size: 0.8em;
-  }
-
-  &.brb {
-    background-color: $accentCol;
-    color: black;
-    font-size: 0.95em;
-  }
-
-  &.no-space {
-    background-color: #222;
-    color: white;
-    font-size: 0.85em;
-  }
-}
-
-.default-station {
-  font-weight: bold;
-  color: $accentCol;
-}
-
-.card {
-  display: flex;
-  flex-direction: column;
-
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 2;
-
-  overflow: auto;
-  // background: #474747;
-  background: #262a2e;
-
-  box-shadow: 0 0 15px 5px #474747;
-
-  width: 75%;
-  max-width: 750px;
-  max-height: 95%;
-
-  // font-size: calc(0.6rem + 0.5vw);
-  font-size: calc(0.45rem + 0.35vw);
-
-  @include smallScreen {
-    width: 95%;
-  }
-
-  &-exit {
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: 0.8em;
-
-    img {
-      width: 1.5em;
-    }
-
-    cursor: pointer;
-  }
-}
-
-.button {
-  display: flex;
-  align-items: center;
-
-  background: #333;
-  border: none;
-
-  color: #e0e0e0;
-  font-size: 0.9em;
-
-  outline: none;
-  padding: 0.35em;
-  cursor: pointer;
-
-  transition: all 0.3s;
-
-  &.open {
-    color: $accentCol;
-    border: none;
-  }
-
-  &:hover {
-    background: rgba(#e0e0e0, 0.4);
-  }
-}
-
-a {
-  color: white;
-  text-decoration: none;
-
-  transition: color 0.3s;
-
-  &:hover,
-  &:focus {
-    color: $accentCol;
-    border: none;
-    outline: none;
-  }
-
-  &:focus {
-    text-decoration: underline;
-  }
-}
-
-ul {
-  padding: 0;
-  list-style: none;
-}
-
-.flex {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: 100%;
-
-  &-spaced {
-    justify-content: space-between;
-  }
-
-  &-column {
-    flex-direction: column;
-  }
-}
+@import "./styles/global.scss";
 
 .app {
   background: $bgCol;
   color: white;
 
   font-size: calc(1rem + 2.1vw);
+}
 
-  &-container {
-    display: grid;
-    grid-template-rows: auto auto 1fr auto;
-    grid-template-columns: minmax(0, 1fr);
+.container {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: minmax(0, 1fr);
 
-    min-width: 0;
-    min-height: 100vh;
+  min-width: 0;
+  min-height: 100vh;
+}
+
+.header {
+  background: #333;
+  padding: 0.15em;
+
+  display: flex;
+  justify-content: center;
+
+  &-brand {
+    width: 100%;
+    font-size: 1.1em;
+
+    text-align: center;
+
+    img {
+      width: 0.8em;
+    }
   }
 
-  &-header {
-    background: #333;
-    padding: 0.1em;
+  &-info {
+    display: flex;
+    justify-content: space-between;
 
-    & > .brand-name {
-      font-size: 1.1em;
-
-      img {
-        width: 0.8em;
-      }
-    }
-
-    .online {
-      font-size: 0.35em;
-    }
+    margin: 0 0.3em;
+    font-size: 0.4em;
   }
 }
 
@@ -319,11 +127,14 @@ ul {
   align-items: center;
   color: $accentCol;
 
-  margin: 0 0.3em;
+  font-size: 1em;
+
+  span {
+    margin: 0 0.15em;
+  }
 
   img {
-    width: 1.4em;
-    margin: 0 0.1em;
+    width: 1.35em;
   }
 }
 
diff --git a/src/components/ui/AppBar.vue b/src/components/ui/AppBar.vue
index f499a3b..d3a0c21 100644
--- a/src/components/ui/AppBar.vue
+++ b/src/components/ui/AppBar.vue
@@ -1,16 +1,6 @@
 <template>
   <div class="app-bar">
     <Options />
-
-    <div></div>
-
-    <div class="counter">
-      <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
-      <span>{{stationCount}}</span>
-
-      <span>{{trainCount}}</span>
-      <img src="@/assets/icon-train.svg" alt="icon train" />
-    </div>
   </div>
 </template>
 
@@ -22,10 +12,7 @@ import Options from "@/components/ui/Options.vue";
 @Component({
   components: { Options },
 })
-export default class AppBar extends Vue {
-  @Prop(Number) trainCount;
-  @Prop(Number) stationCount;
-}
+export default class AppBar extends Vue {}
 </script>
 
 <style lang="scss">
diff --git a/src/components/ui/Clock.vue b/src/components/ui/Clock.vue
index 9a1d30e..474d4f5 100644
--- a/src/components/ui/Clock.vue
+++ b/src/components/ui/Clock.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="clock">{{ formattedDate }}</section>
+  <div class="clock">{{ formattedDate }}</div>
 </template>
 
 
@@ -12,7 +12,11 @@ export default Vue.extend({
   }),
   computed: {
     formattedDate() {
-      return new Date(this.timestamp).toLocaleString("pl-PL");
+      return new Date(this.timestamp).toLocaleString("pl-PL", {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      });
     },
   },
   mounted() {
@@ -29,8 +33,6 @@ export default Vue.extend({
   justify-content: center;
   align-items: center;
 
-  font-size: 0.35em;
-
   @include smallScreen() {
     font-size: 0.65rem;
   }
diff --git a/src/components/ui/List.vue b/src/components/ui/List.vue
index e548a66..947d052 100644
--- a/src/components/ui/List.vue
+++ b/src/components/ui/List.vue
@@ -5,126 +5,130 @@
     </transition>
     <!-- <div class="info" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div> -->
 
-    <div class="table-wrapper" v-if="stations.length > 0">
-      <table class="table">
-        <thead class="table-head">
-          <tr>
-            <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
-              <span>
-                <div>
-                  <div>{{head[0]}}</div>
-                  <div v-if="head.length > 1">{{head[1]}}</div>
-                </div>
+    <section class="list-body">
+      <Options />
 
-                <img
-                  class="icon"
-                  v-if="sorterActive.index == i"
-                  :src="sorterActive.type == 1 ? icons.ascSVG : icons.descSVG"
-                  alt
-                />
-              </span>
-            </th>
+      <div class="table-wrapper">
+        <table class="table">
+          <thead class="table-head">
+            <tr>
+              <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
+                <span>
+                  <div>
+                    <div>{{head[0]}}</div>
+                    <div v-if="head.length > 1">{{head[1]}}</div>
+                  </div>
+
+                  <img
+                    class="icon"
+                    v-if="sorterActive.index == i"
+                    :src="sorterActive.type == 1 ? icons.ascSVG : icons.descSVG"
+                    alt
+                  />
+                </span>
+              </th>
+            </tr>
+          </thead>
+
+          <tr
+            class="table-item"
+            v-for="(station, i) in computedStations"
+            :key="i + station.stationHash"
+            @click="() => { if(station.online) setFocusedStation(station.stationName) }"
+          >
+            <td
+              class="item-station-name"
+              :class="{'default-station': station.default, 'online': station.online}"
+            >{{station.stationName}}</td>
+
+            <td class="item-station-level">
+              <span
+                v-if="station.reqLevel"
+                :style="calculateExpStyle(station.reqLevel)"
+              >{{ (station.reqLevel && station.reqLevel > -1) ? (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "?" }}</span>
+
+              <span v-else>?</span>
+            </td>
+
+            <td class="item-station-status">
+              <span class="status" :class="statusClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
+            </td>
+
+            <td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
+            <td class="item-dispatcher-exp">
+              <span
+                v-if="station.online"
+                :style="calculateExpStyle(station.dispatcherExp)"
+              >{{station.dispatcherExp < 2 ? 'L' : station.dispatcherExp}}</span>
+            </td>
+            <td
+              class="item-users"
+            >{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
+            <td class="item-info">
+              <img
+                class="icon-info"
+                v-if="station.controlType"
+                :src="require(`@/assets/icon-${station.controlType}.svg`)"
+                :alt="station.controlType"
+                :title="'Sterowanie ' + station.controlType"
+              />
+
+              <img
+                class="icon-info"
+                v-if="station.signalType"
+                :src="require(`@/assets/icon-${station.signalType}.svg`)"
+                :alt="station.signalType"
+                :title="'Sygnalizacja ' + station.signalType"
+              />
+
+              <img
+                class="icon-info"
+                v-if="station.SBL && station.SBL !== ''"
+                :src="require(`@/assets/icon-SBL.svg`)"
+                alt="SBL"
+                title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
+              />
+
+              <img
+                class="icon-info"
+                v-if="!station.reqLevel || station.nonPublic"
+                :src="require(`@/assets/icon-lock.svg`)"
+                alt="non-public"
+                title="Sceneria niepubliczna"
+              />
+            </td>
+
+            <td class="item-tracks twoway">
+              <span
+                v-if="station.routes && station.routes.twoWay.catenary > 0"
+                class="track catenary"
+                :title="'Liczba zelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.catenary"
+              >{{station.routes.twoWay.catenary}}</span>
+
+              <span
+                v-if="station.routes && station.routes.twoWay.noCatenary > 0"
+                class="track no-catenary"
+                :title="'Liczba niezelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.noCatenary"
+              >{{station.routes.twoWay.noCatenary}}</span>
+            </td>
+
+            <td class="item-tracks oneway">
+              <span
+                v-if="station.routes && station.routes.oneWay.catenary > 0"
+                class="track catenary"
+                :title="'Liczba zelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.catenary"
+              >{{station.routes.oneWay.catenary}}</span>
+
+              <span
+                v-if="station.routes && station.routes.oneWay.noCatenary > 0"
+                class="track no-catenary"
+                :title="'Liczba niezelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.noCatenary"
+              >{{station.routes.oneWay.noCatenary}}</span>
+            </td>
           </tr>
-        </thead>
-
-        <tr
-          class="table-item"
-          v-for="(station, i) in computedStations"
-          :key="i + station.stationHash"
-          @click="() => { if(station.online) setFocusedStation(station.stationName) }"
-        >
-          <td
-            class="item-station-name"
-            :class="{'default-station': station.default, 'online': station.online}"
-          >{{station.stationName}}</td>
-
-          <td class="item-station-level">
-            <span
-              v-if="station.reqLevel"
-              :style="calculateExpStyle(station.reqLevel)"
-            >{{ (station.reqLevel && station.reqLevel > -1) ? (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "?" }}</span>
-
-            <span v-else>?</span>
-          </td>
-
-          <td class="item-station-status">
-            <span class="status" :class="statusClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
-          </td>
-
-          <td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
-          <td class="item-dispatcher-exp">
-            <span
-              v-if="station.online"
-              :style="calculateExpStyle(station.dispatcherExp)"
-            >{{station.dispatcherExp < 2 ? 'L' : station.dispatcherExp}}</span>
-          </td>
-          <td
-            class="item-users"
-          >{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
-          <td class="item-info">
-            <img
-              class="icon-info"
-              v-if="station.controlType"
-              :src="require(`@/assets/icon-${station.controlType}.svg`)"
-              :alt="station.controlType"
-              :title="'Sterowanie ' + station.controlType"
-            />
-
-            <img
-              class="icon-info"
-              v-if="station.signalType"
-              :src="require(`@/assets/icon-${station.signalType}.svg`)"
-              :alt="station.signalType"
-              :title="'Sygnalizacja ' + station.signalType"
-            />
-
-            <img
-              class="icon-info"
-              v-if="station.SBL && station.SBL !== ''"
-              :src="require(`@/assets/icon-SBL.svg`)"
-              alt="SBL"
-              title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
-            />
-
-            <img
-              class="icon-info"
-              v-if="!station.reqLevel || station.nonPublic"
-              :src="require(`@/assets/icon-lock.svg`)"
-              alt="non-public"
-              title="Sceneria niepubliczna"
-            />
-          </td>
-
-          <td class="item-tracks twoway">
-            <span
-              v-if="station.routes && station.routes.twoWay.catenary > 0"
-              class="track catenary"
-              :title="'Liczba zelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.catenary"
-            >{{station.routes.twoWay.catenary}}</span>
-
-            <span
-              v-if="station.routes && station.routes.twoWay.noCatenary > 0"
-              class="track no-catenary"
-              :title="'Liczba niezelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.noCatenary"
-            >{{station.routes.twoWay.noCatenary}}</span>
-          </td>
-
-          <td class="item-tracks oneway">
-            <span
-              v-if="station.routes && station.routes.oneWay.catenary > 0"
-              class="track catenary"
-              :title="'Liczba zelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.catenary"
-            >{{station.routes.oneWay.catenary}}</span>
-
-            <span
-              v-if="station.routes && station.routes.oneWay.noCatenary > 0"
-              class="track no-catenary"
-              :title="'Liczba niezelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.noCatenary"
-            >{{station.routes.oneWay.noCatenary}}</span>
-          </td>
-        </tr>
-      </table>
-    </div>
+        </table>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -135,6 +139,7 @@ import { Getter } from "vuex-class";
 import styleMixin from "@/mixins/styleMixin";
 
 import StationCard from "@/components/ui/StationCard.vue";
+import Options from "@/components/ui/Options.vue";
 
 import Station from "@/scripts/interfaces/Station";
 
@@ -142,7 +147,7 @@ const ascSVG = require("@/assets/icon-arrow-asc.svg");
 const descSVG = require("@/assets/icon-arrow-desc.svg");
 
 @Component({
-  components: { StationCard },
+  components: { StationCard, Options },
 })
 export default class List extends styleMixin {
   focusedStationName: string = "";
@@ -291,6 +296,13 @@ export default class List extends styleMixin {
   }
 }
 
+.list-body {
+  max-height: calc(100vh - 4em);
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
 .table {
   &-wrapper {
     overflow: auto;
@@ -311,6 +323,10 @@ export default class List extends styleMixin {
     background-color: #444;
     min-width: 120px;
 
+    position: sticky;
+    top: 0;
+    z-index: 2;
+
     cursor: pointer;
     user-select: none;
     -moz-user-select: none;
diff --git a/src/components/ui/Options.vue b/src/components/ui/Options.vue
index 91d2f48..29cc6ef 100644
--- a/src/components/ui/Options.vue
+++ b/src/components/ui/Options.vue
@@ -84,6 +84,14 @@ export default class Options extends Vue {
   }
 }
 
+.options {
+  font-size: calc(0.6rem + 0.9vw);
+
+  &-actions {
+    display: flex;
+  }
+}
+
 .action-btn {
   display: flex;
   align-items: center;
@@ -92,7 +100,7 @@ export default class Options extends Vue {
   border: none;
 
   color: #e0e0e0;
-  font-size: 0.7em;
+  font-size: 0.75em;
 
   padding: 0.3em;
 
@@ -125,21 +133,17 @@ export default class Options extends Vue {
   }
 }
 
-.options {
-  font-size: calc(0.6rem + 0.9vw);
-
-  &-actions {
-    display: flex;
-  }
-}
-
 @include smallScreen {
+  .options {
+    display: flex;
+    justify-content: center;
+  }
+
   .action-btn {
-    margin-right: 0.5rem;
-    font-size: 0.8rem;
+    font-size: 1rem;
 
     p {
-      max-width: 100%;
+      // max-width: 100%;
     }
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 043c87b..ec3edf9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,14 +1,21 @@
 import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
-import Home from '../views/Home.vue'
+
+import StationsView from '../views/StationsView.vue'
+import TrainsView from '../views/TrainsView.vue'
 
 Vue.use(VueRouter)
 
 const routes: Array<RouteConfig> = [
   {
     path: '/',
-    name: 'Home',
-    component: Home
+    name: 'StationsView',
+    component: StationsView,
+  },
+  {
+    path: "/trains",
+    name: "TrainsView",
+    component: TrainsView
   }
 ]
 
diff --git a/src/styles/global.scss b/src/styles/global.scss
new file mode 100644
index 0000000..18f53c9
--- /dev/null
+++ b/src/styles/global.scss
@@ -0,0 +1,211 @@
+:root {
+    font-size: 16px;
+}
+
+::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+
+    &-track {
+        background: #222;
+    }
+
+    &-thumb {
+        border-radius: 1rem;
+        background: #777;
+    }
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    width: 100%;
+    margin: 0;
+    font-family: "Muli", sans-serif;
+}
+
+button,
+input {
+    font-family: "Muli", sans-serif;
+}
+
+input {
+    border: 1px solid white;
+    background: none;
+    color: white;
+    font-size: 1em;
+
+    padding: 0.15em;
+    margin: 0.2em;
+
+    max-width: 55px;
+
+    &::placeholder {
+        color: #bebebe;
+    }
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+.status {
+    border-radius: 1.3rem;
+    font-weight: 500;
+
+    font-size: 0.95em;
+    padding: 0.25em 0.4em;
+
+    background-color: #00be19;
+
+    &.free {
+        background-color: #8a8a8a;
+        font-size: 0.95em;
+    }
+
+    &.ending {
+        background-color: $accentCol;
+        color: black;
+        font-size: 0.9em;
+    }
+
+    &.no-limit {
+        background-color: #0077ae;
+        font-size: 0.85em;
+    }
+
+    &.not-signed,
+    &.unavailable {
+        background-color: $accent2Col;
+        font-size: 0.8em;
+    }
+
+    &.brb {
+        background-color: $accentCol;
+        color: black;
+        font-size: 0.95em;
+    }
+
+    &.no-space {
+        background-color: #222;
+        color: white;
+        font-size: 0.85em;
+    }
+}
+
+.default-station {
+    font-weight: bold;
+    color: $accentCol;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+
+    overflow: auto;
+    // background: #474747;
+    background: #262a2e;
+
+    box-shadow: 0 0 15px 5px #474747;
+
+    width: 75%;
+    max-width: 750px;
+    max-height: 95%;
+
+    // font-size: calc(0.6rem + 0.5vw);
+    font-size: calc(0.45rem + 0.35vw);
+
+    @include smallScreen {
+        width: 95%;
+    }
+
+    &-exit {
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 0.8em;
+
+        img {
+            width: 1.5em;
+        }
+
+        cursor: pointer;
+    }
+}
+
+.button {
+    display: flex;
+    align-items: center;
+
+    background: #333;
+    border: none;
+
+    color: #e0e0e0;
+    font-size: 0.9em;
+
+    outline: none;
+    padding: 0.35em;
+    cursor: pointer;
+
+    transition: all 0.3s;
+
+    &.open {
+        color: $accentCol;
+        border: none;
+    }
+
+    &:hover {
+        background: rgba(#e0e0e0, 0.4);
+    }
+}
+
+a {
+    color: white;
+    text-decoration: none;
+
+    transition: color 0.3s;
+
+    &:hover,
+    &:focus {
+        color: $accentCol;
+        border: none;
+        outline: none;
+    }
+
+    &:focus {
+        text-decoration: underline;
+    }
+}
+
+ul {
+    padding: 0;
+    list-style: none;
+}
+
+.flex {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+
+    &-spaced {
+        justify-content: space-between;
+    }
+
+    &-column {
+        flex-direction: column;
+    }
+}
diff --git a/src/views/Home.vue b/src/views/StationsView.vue
similarity index 80%
rename from src/views/Home.vue
rename to src/views/StationsView.vue
index 3c7a6b5..6b4e18e 100644
--- a/src/views/Home.vue
+++ b/src/views/StationsView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div class="stations-view">
     <List />
   </div>
 </template>
@@ -11,7 +11,7 @@ import { Vue, Component } from "vue-property-decorator";
 import List from "@/components/ui/List.vue";
 
 @Component({
-  components: { List }
+  components: { List },
 })
 export default class Home extends Vue {
   mounted() {}
@@ -19,8 +19,8 @@ export default class Home extends Vue {
 </script>
 
 <style lang="scss" scoped>
-.home {
-  padding: 1rem;
+.stations-view {
+  padding: 1rem 0;
 
   max-height: 100%;
 }
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
new file mode 100644
index 0000000..c9f7ecb
--- /dev/null
+++ b/src/views/TrainsView.vue
@@ -0,0 +1,14 @@
+<template>
+  <section class="trains-view"></section>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Component } from "vue-property-decorator";
+
+@Component
+export default class TrainsView extends Vue {}
+</script>
+
+<style>
+</style>
\ No newline at end of file