1.3.5->1.4a: poprawki w wyglądzie, dodanie dziennika ruchu stacji

src/components/App/Clock.vue

@@ -32,9 +32,5 @@ export default Vue.extend({
   display: flex;
   justify-content: center;
   align-items: center;
-
-  @include smallScreen() {
-    font-size: 0.95rem;
-  }
 }
 </style>

src/components/Global/Dropdown.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="dropdown">
+    <div class="dropdown_wrapper">
+      <div class="dropdown_selected" @click="toggleList">
+        {{selectedItem}}
+        <img :src="isListOpen ? arrowAsc : arrowDesc" alt="arrow" />
+      </div>
+      <ul class="dropdown_list" v-if="isListOpen">
+        <li v-for="(item, i) in itemList" @click="selectItem(item)" :key="i">{{item}}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class Dropdown extends Vue {
+  arrowDesc = require("@/assets/icon-arrow-desc.svg");
+  arrowAsc = require("@/assets/icon-arrow-asc.svg");
+
+  selectedItem: string = "---";
+  isListOpen: boolean = false;
+
+  @Prop() itemList!: string[];
+
+  mounted() {
+    // this.selectedItem = this.itemList[0];
+  }
+
+  toggleList() {
+    this.isListOpen = !this.isListOpen;
+  }
+
+  selectItem(itemName: string) {
+    this.selectedItem = itemName;
+    this.isListOpen = false;
+
+    this.$emit("itemSelected", this.selectedItem);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dropdown {
+  &_wrapper {
+    font-size: 1.15em;
+    min-width: 13em;
+
+    position: relative;
+  }
+
+  &_selected {
+    background-color: #333;
+    padding: 0.2em 0.5em;
+
+    cursor: pointer;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    img {
+      width: 1.35em;
+      vertical-align: middle;
+
+      margin-left: 0.5em;
+    }
+  }
+
+  &_list {
+    position: absolute;
+    width: 100%;
+
+    max-height: 250px;
+    overflow-y: scroll;
+  }
+
+  &_list > li {
+    padding: 0.3em 0.5em;
+    background-color: #666;
+
+    font-size: 0.8em;
+
+    cursor: pointer;
+
+    &:hover {
+      background-color: #555;
+    }
+  }
+}
+</style>

src/components/StationsView/FilterCard.vue

@@ -164,13 +164,12 @@ export default class FilterCard extends Vue {
 
   background: #262a2e;
 
-  font-size: calc(0.75rem + 0.45vw);
+  font-size: 1.5em;
 
   box-shadow: 0 0 15px 5px #474747;
 
   @include smallScreen() {
-    width: 100%;
-    font-size: calc(0.7em + 1.1vw);
+    width: 95%;
   }
 
   @include bigScreen {

src/components/StationsView/Options.vue

@@ -80,8 +80,6 @@ export default class Options extends Vue {
 }
 
 .options {
-  font-size: calc(0.6rem + 0.9vw);
-
   &-actions {
     display: flex;
   }
@@ -95,7 +93,7 @@ export default class Options extends Vue {
   border: none;
 
   color: #e0e0e0;
-  font-size: 0.75em;
+  font-size: 0.4em;
 
   padding: 0.3em;
 

src/components/StationsView/StationTable.vue

@@ -164,7 +164,6 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
 
 import Station from "@/scripts/interfaces/Station";
@@ -253,9 +252,7 @@ section.station_table {
   font-size: calc(0.55rem + 0.35vw);
   font-weight: 500;
 
-  @include smallScreen() {
-    font-size: 0.6rem;
-  }
+  font-size: 1.2em;
 }
 
 .table_wrapper {