Naprawienie

src/App.vue

@@ -38,11 +38,11 @@ import AppBar from "@/components/ui/AppBar.vue";
 enum ConnState {
   Loading = 0,
   Error = 1,
-  Connected = 2
+  Connected = 2,
 }
 
 @Component({
-  components: { Error, Loading, Clock, AppBar }
+  components: { Error, Loading, Clock, AppBar },
 })
 export default class App extends Vue {
   @Getter("getStations") stations;
@@ -122,6 +122,8 @@ input {
 *::before,
 *::after {
   box-sizing: border-box;
+  padding: 0;
+  margin: 0;
 }
 
 .status {
@@ -212,27 +214,6 @@ input {
 
     cursor: pointer;
   }
-
-  // &-content {
-  //   display: grid;
-  //   grid-template-areas: "dispatcher dispatcher" "rating rating" "hours hours" "users spawns";
-  //   grid-template-columns: repeat(2, minmax(0, 1fr));
-
-  //   align-items: center;
-  //   text-align: center;
-  //   padding: 1em;
-
-  //   & > div {
-  //     text-align: center;
-  //     padding: 0.2em;
-  //   }
-  // }
-
-  // &-upper {
-  //   background: #959595;
-  //   text-align: center;
-  //   padding: 0.2em;
-  // }
 }
 
 .button {
@@ -318,6 +299,7 @@ ul {
   &-header {
     background: #333;
     padding: 0.1em;
+
     & > .brand-name {
       font-size: 1.1em;
 

src/components/ui/AppBar.vue

@@ -1,23 +1,15 @@
 <template>
   <div class="app-bar">
-    <div class="bar-content flex flex-spaced">
+    <Options />
-      <div class="bar-left">
-        <Options />
-      </div>
 
-      <div class="bar-center"></div>
+    <div></div>
 
-      <div class="bar-right">
+    <div class="counter">
-        <span class="counter dispatchers">
+      <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
-          <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
+      <span>{{stationCount}}</span>
-          {{stationCount}}
-        </span>
 
-        <span class="counter trains">
+      <span>{{trainCount}}</span>
-          {{trainCount}}
+      <img src="@/assets/icon-train.svg" alt="icon train" />
-          <img src="@/assets/icon-train.svg" alt="icon train" />
-        </span>
-      </div>
     </div>
   </div>
 </template>
@@ -28,7 +20,7 @@ import { Vue, Component, Prop } from "vue-property-decorator";
 import Options from "@/components/ui/Options.vue";
 
 @Component({
-  components: { Options }
+  components: { Options },
 })
 export default class AppBar extends Vue {
   @Prop(Number) trainCount;
@@ -37,33 +29,31 @@ export default class AppBar extends Vue {
 </script>
 
 <style lang="scss">
+@import "../../styles/responsive.scss";
+
 .app-bar {
   display: flex;
   justify-content: space-between;
 
   position: sticky;
   top: 0;
-  font-size: 0.25em;
+  font-size: 0.35em;
   background: #222;
 }
 
-.bar {
+.counter {
-  &-left {
+  display: flex;
-    display: flex;
+  flex-wrap: wrap;
+  align-items: center;
 
-    & > .legend {
+  span {
-      display: flex;
+    margin: 0 0.3em;
-      align-items: center;
-
-      img {
-        width: 1.6em;
-      }
-    }
   }
+}
 
-  &-right {
+@include smallScreen {
-    font-size: 1.35em;
+  .app-bar {
-    display: flex;
+    font-size: 0.8rem;
   }
 }
 </style>

src/components/ui/Clock.vue

@@ -8,25 +8,31 @@ import Vue from "vue";
 export default Vue.extend({
   name: "clock",
   data: () => ({
-    timestamp: Date.now()
+    timestamp: Date.now(),
   }),
   computed: {
     formattedDate() {
       return new Date(this.timestamp).toLocaleString("pl-PL");
-    }
+    },
   },
   mounted() {
     setInterval(() => (this.timestamp = Date.now()), 1000);
-  }
+  },
 });
 </script>
 
 <style lang="scss" scoped>
+@import "../../styles/responsive.scss";
+
 .clock {
   display: flex;
   justify-content: center;
   align-items: center;
 
   font-size: 0.35em;
+
+  @include smallScreen() {
+    font-size: 0.65rem;
+  }
 }
 </style>

src/components/ui/List.vue

@@ -142,7 +142,7 @@ const ascSVG = require("@/assets/icon-arrow-asc.svg");
 const descSVG = require("@/assets/icon-arrow-desc.svg");
 
 @Component({
-  components: { StationCard }
+  components: { StationCard },
 })
 export default class List extends styleMixin {
   focusedStationName: string = "";
@@ -160,7 +160,7 @@ export default class List extends styleMixin {
     ["Maszyniści"],
     ["Informacje", "ogólne"],
     ["Szlaki", "dwutorowe"],
-    ["Szlaki", "jednotorowe"]
+    ["Szlaki", "jednotorowe"],
   ];
 
   changeSorter(index: number) {
@@ -184,7 +184,7 @@ export default class List extends styleMixin {
 
   get focusedStationInfo() {
     return this.stations.find(
-      station => station.stationName === this.focusedStationName
+      (station) => station.stationName === this.focusedStationName
     );
   }
 
@@ -300,10 +300,10 @@ export default class List extends styleMixin {
   white-space: nowrap;
   border-collapse: collapse;
 
-  font-size: calc(0.5rem + 0.3vw);
+  font-size: calc(0.6rem + 0.3vw);
 
   @include smallScreen() {
-    font-size: 0.65rem;
+    font-size: 0.7rem;
   }
 
   &-head th {
@@ -354,49 +354,49 @@ export default class List extends styleMixin {
       }
     }
   }
+}
 
-  .item {
+.item {
-    &-station-level,
+  &-station-level,
-    &-dispatcher-exp {
+  &-dispatcher-exp {
-      span {
+    span {
-        display: block;
+      display: block;
 
-        width: 2em;
+      width: 2em;
-        height: 2em;
+      height: 2em;
-        line-height: 2em;
+      line-height: 2em;
-        margin: 0 auto;
+      margin: 0 auto;
-      }
+    }
+  }
+
+  &-station-level {
+    span {
+      background-color: #888;
+      border-radius: 50%;
+    }
+  }
+
+  &-info,
+  &-tracks {
+    img {
+      width: 2.2em;
+      margin: 0 0.2em;
+      vertical-align: middle;
+    }
+  }
+
+  &-tracks {
+    .no-catenary {
+      background-color: #939393;
     }
 
-    &-station-level {
+    .catenary {
-      span {
+      background-color: #009dce;
-        background-color: #888;
-        border-radius: 50%;
-      }
     }
 
-    &-info,
+    .track {
-    &-tracks {
+      margin: 0 0.3rem;
-      img {
+      padding: 0.5em;
-        width: 2.2em;
-        margin: 0 0.2em;
-        vertical-align: middle;
-      }
-    }
-
-    &-tracks {
-      .no-catenary {
-        background-color: #939393;
-      }
-
-      .catenary {
-        background-color: #009dce;
-      }
-
-      .track {
-        margin: 0 0.3rem;
-        padding: 0.5em;
-      }
     }
   }
 }

src/components/ui/Options.vue

@@ -7,7 +7,7 @@
         @click="() => toggleCardsState('filter')"
       >
         <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
-        <div>FILTRY</div>
+        <p>FILTRY</p>
       </button>
 
       <button
@@ -16,7 +16,7 @@
         @click="() => toggleCardsState('legend')"
       >
         <img :src="require('@/assets/icon-legend.svg')" alt="icon legend" />
-        <div>LEGENDA</div>
+        <p>LEGENDA</p>
       </button>
     </div>
 
@@ -38,7 +38,7 @@ import OptionCard from "@/components/ui/OptionCard.vue";
 import LegendCard from "@/components/ui/LegendCard.vue";
 
 @Component({
-  components: { OptionCard, LegendCard }
+  components: { OptionCard, LegendCard },
 })
 export default class Options extends Vue {
   filterCardOpen: boolean = false;
@@ -106,7 +106,7 @@ export default class Options extends Vue {
     margin-right: 0.2em;
   }
 
-  div {
+  p {
     max-width: 0;
     font-size: 1em;
     overflow: hidden;
@@ -114,8 +114,8 @@ export default class Options extends Vue {
     transition: max-width 0.35s ease-in-out;
   }
 
-  &:hover > div,
+  &:hover > p,
-  &.open > div {
+  &.open > p {
     max-width: 500px;
     color: $accentCol;
   }
@@ -132,4 +132,15 @@ export default class Options extends Vue {
     display: flex;
   }
 }
+
+@include smallScreen {
+  .action-btn {
+    margin-right: 0.5rem;
+    font-size: 0.8rem;
+
+    p {
+      max-width: 100%;
+    }
+  }
+}
 </style>