Zmiany w wyglądzie, zmiana pozycji opcji

src/App.vue

@@ -1,17 +1,26 @@
 <template>
   <div class="app">
-    <div class="app-container">
+    <div class="container">
-      <header class="app-header flex flex-column">
+      <header class="header">
-        <div class="brand-name">
+        <div class="header-body">
+          <span class="header-brand">
             <span>Stacj</span>
             <img src="@/assets/trainlogo.png" alt="trainlogo" />
             <span>wnik</span>
-        </div>
+          </span>
 
+          <span class="header-info">
             <Clock />
-      </header>
+            <div class="counter">
+              <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
+              <span>{{stationCount}}</span>
 
-      <AppBar :stationCount="stationCount" :trainCount="trainCount" />
+              <span>{{trainCount}}</span>
+              <img src="@/assets/icon-train.svg" alt="icon train" />
+            </div>
+          </span>
+        </div>
+      </header>
 
       <main class="app-main">
         <Loading v-if="connectionState == 0" />
@@ -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";
-
+@import "./styles/global.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;
-  }
-}
 
 .app {
   background: $bgCol;
   color: white;
 
   font-size: calc(1rem + 2.1vw);
+}
 
-  &-container {
+.container {
   display: grid;
-    grid-template-rows: auto auto 1fr auto;
+  grid-template-rows: auto 1fr auto;
   grid-template-columns: minmax(0, 1fr);
 
   min-width: 0;
   min-height: 100vh;
 }
 
-  &-header {
+.header {
   background: #333;
-    padding: 0.1em;
+  padding: 0.15em;
 
-    & > .brand-name {
+  display: flex;
+  justify-content: center;
+
+  &-brand {
+    width: 100%;
     font-size: 1.1em;
 
+    text-align: center;
+
     img {
       width: 0.8em;
     }
   }
 
-    .online {
+  &-info {
-      font-size: 0.35em;
+    display: flex;
-    }
+    justify-content: space-between;
+
+    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;
+    width: 1.35em;
-    margin: 0 0.1em;
   }
 }
 

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 {
+export default class AppBar extends Vue {}
-  @Prop(Number) trainCount;
-  @Prop(Number) stationCount;
-}
 </script>
 
 <style lang="scss">

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;
   }

src/components/ui/List.vue

@@ -5,7 +5,10 @@
     </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">
+    <section class="list-body">
+      <Options />
+
+      <div class="table-wrapper">
         <table class="table">
           <thead class="table-head">
             <tr>
@@ -125,6 +128,7 @@
           </tr>
         </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;

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: 1rem;
-    font-size: 0.8rem;
 
     p {
-      max-width: 100%;
+      // max-width: 100%;
     }
   }
 }

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',
+    name: 'StationsView',
-    component: Home
+    component: StationsView,
+  },
+  {
+    path: "/trains",
+    name: "TrainsView",
+    component: TrainsView
   }
 ]
 

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;
+    }
+}

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 {
+.stations-view {
-  padding: 1rem;
+  padding: 1rem 0;
 
   max-height: 100%;
 }

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>