Poprawki wizualne i zachowania strony

src/views/HistoryView.vue

@@ -7,24 +7,11 @@
           {{ $t("journal.subtitle") }}
         </p>
 
-        <div class="search-box">
-          <div class="search-box_content">
-            <label :class="{ disabled: dataLoading }">
-              <select v-model="inputStationName" :disabled="dataLoading">
-                <option value disabled selected hidden>
-                  {{ dataLoading ? $t("app.loading") : $t("journal.select") }}
-                </option>
-                <option
-                  v-for="station in filteredStationList"
-                  :key="station"
-                  :value="station"
-                >
-                  {{ station }}
-                </option>
-              </select>
-            </label>
-          </div>
-        </div>
+        <!-- <select-box
+          :itemList="filteredStationList"
+          :title="$t('journal.select')"
+          @itemSelected="itemSelected"
+        /> -->
 
         <div class="disclaimer" v-html="$t('journal.disclaimer')"></div>
       </div>
@@ -100,8 +87,9 @@ import { Getter } from "vuex-class";
 
 import Station from "@/scripts/interfaces/Station";
 import ISceneryInfoData from "@/scripts/interfaces/ISceneryInfoData";
+import SelectBox from "@/components/Global/SelectBox.vue";
 
-@Component
+@Component({ components: { SelectBox } })
 export default class HistoryView extends Vue {
   @Getter("getStationList") stationList!: Station[];
 
@@ -133,11 +121,6 @@ export default class HistoryView extends Vue {
     this.dataLoading = false;
   }
 
-  @Watch("inputStationName")
-  onInputChanged(val: string) {
-    this.itemSelected(val);
-  }
-
   get filteredStationList() {
     return this.sceneryHistoryList
       .map((station) => station.stationName)

src/views/StationsView.vue

@@ -1,30 +1,20 @@
 <template>
-  <div class="stations_view">
+  <div class="stations-view">
     <DonationModal :modalHidden="modalHidden" @toggleModal="toggleModal" />
 
-    <div class="stations_wrapper">
-      <div class="stations_body">
-        <div class="body_bar">
-          <div class="bar_actions">
-            <button
-              class="action-btn"
-              :class="{ open: filterCardOpen }"
-              @click="() => toggleCardsState('filter')"
-            >
-              <img
-                :src="require('@/assets/icon-filter2.svg')"
-                alt="icon-filter"
-              />
-              <p>{{ $t("options.filters") }}</p>
-            </button>
-
-            <!-- <button class="action-btn" @click="toggleModal">
-              <img :src="dolarIcon" alt="icon-dolar" />
-
-              <p>{{ $t("options.donate") }}</p>
-            </button> -->
-          </div>
-          <!-- 
+    <div class="wrapper">
+      <div class="body">
+        <div class="options-bar">
+          <action-button @click.native="() => toggleCardsState('filter')">
+            <img
+              class="button_icon"
+              :src="require('@/assets/icon-filter2.svg')"
+              alt="icon-filter"
+            />
+            <p>{{ $t("options.filters") }}</p>
+          </action-button>
+        </div>
+        <!-- 
           <div class="bar_indicators">
             <transition name="indicator-anim">
               <span
@@ -46,16 +36,13 @@
               </span>
             </transition>
           </div> -->
-        </div>
 
-        <div class="body_table">
-          <StationTable
-            :stations="computedStations"
-            :sorterActive="filterManager.getSorter()"
-            :setFocusedStation="setFocusedStation"
-            :changeSorter="changeSorter"
-          />
-        </div>
+        <StationTable
+          :stations="computedStations"
+          :sorterActive="filterManager.getSorter()"
+          :setFocusedStation="setFocusedStation"
+          :changeSorter="changeSorter"
+        />
       </div>
     </div>
 
@@ -83,14 +70,15 @@ import inputData from "@/data/options.json";
 
 import StationTable from "@/components/StationsView/StationTable.vue";
 import FilterCard from "@/components/StationsView/FilterCard.vue";
-
 import DonationModal from "@/components/Global/DonationModal.vue";
+import ActionButton from "@/components/Global/ActionButton.vue";
 
 @Component({
   components: {
     StationTable,
     FilterCard,
     DonationModal,
+    ActionButton,
   },
 })
 export default class StationsView extends Vue {
@@ -227,6 +215,17 @@ export default class StationsView extends Vue {
   }
 }
 
+@keyframes blinkAnim {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+}
+
 .indicator-anim {
   &-enter-active,
   &-leave-active {
@@ -240,110 +239,61 @@ export default class StationsView extends Vue {
   }
 }
 
-.stations_view {
+.stations-view {
   position: relative;
 
   padding: 1em 0;
   min-height: 100%;
 }
 
-.stations_wrapper {
+.wrapper {
   display: flex;
   justify-content: center;
+  padding: 0 0.5em;
 }
 
-.stations_body {
+.body {
   margin: 0 auto;
   overflow: auto;
 }
 
-.body_bar {
+.options-bar {
   display: flex;
-  justify-content: space-between;
+  margin-bottom: 0.5em;
 }
 
-.bar_actions {
-  width: 100%;
+// .bar_indicators {
+//   border: 1px solid red;
 
-  font-size: 1.1em;
-}
+//   & > span {
+//     margin-left: 0.5em;
+//     padding: 0.5em 0.5em;
 
-.bar_indicators {
-  border: 1px solid red;
+//     // background-color: #e68e00;
+//     border-radius: 1em 1em 0 0;
 
-  > span {
-    margin-left: 0.5em;
-    padding: 0.5em 0.5em;
+//     &.loading {
+//       background-color: $accentCol;
+//     }
 
-    // background-color: #e68e00;
-    border-radius: 1em 1em 0 0;
+//     &.error {
+//       background-color: $errorCol;
+//     }
 
-    &.loading {
-      background-color: $accentCol;
-    }
+//     &.success {
+//       background-color: $secondaryCol;
+//     }
 
-    &.error {
-      background-color: $errorCol;
-    }
+//     & > img {
+//       width: 1.7em;
+//       animation: blinkAnim 2s ease-in-out infinite forwards;
+//     }
+//   }
+// }
 
-    &.success {
-      background-color: $secondaryCol;
-    }
-
-    & > img {
-      width: 1.7em;
-      animation: blinkAnim 2s ease-in-out infinite forwards;
-    }
-  }
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-
-  background: #333;
-  border: none;
-
-  color: #e0e0e0;
-  font-size: 1em;
-
-  padding: 0.3em;
-
-  outline: none;
-  cursor: pointer;
-
-  transition: all 0.3s;
-
-  img {
-    width: 1.3em;
-    margin-right: 0.2em;
-  }
-
-  p {
-    font-size: 1em;
-    overflow: hidden;
-
-    transition: max-width 0.35s ease-in-out;
-  }
-
-  &:hover {
-    color: $accentCol;
-    background: rgba(#e0e0e0, 0.4);
-  }
-
-  &.open {
-    color: $accentCol;
-  }
-}
-
-@keyframes blinkAnim {
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0;
+@include smallScreen {
+  .options-bar {
+    font-size: 1.2em;
   }
 }
 </style>

src/views/TrainsView.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="trains-view">
-    <div class="body-wrapper">
+    <div class="wrapper">
       <!-- <TrainSorter :trainList="computedTrains" @changeSorter="changeSorter" />
         <TrainSearch
           @changeSearchedTrain="changeSearchedTrain"
@@ -10,11 +10,17 @@
         /> -->
 
       <div class="options-bar">
-        <TrainStats :trains="trains" class="test" />
+        <div class="stats">
+          <action-button @click.native="toggleStats">
+            {{ $t("trains.stats") }}
+          </action-button>
+          <TrainStats :trains="trains" :trainStatsOpen="trainStatsOpen" />
+        </div>
+
         <TrainOptions
           :queryTrain="queryTrain"
           :focusedTrain="focusedTrain"
-          @changeSorter="changeSorter"
+          @change-sorter="changeSorter"
           @changeSearchedTrain="changeSearchedTrain"
           @changeSearchedDriver="changeSearchedDriver"
         />
@@ -30,7 +36,7 @@
 
 <script lang="ts">
 import Vue from "vue";
-import { Component, Prop } from "vue-property-decorator";
+import { Component, Prop, Watch } from "vue-property-decorator";
 import { Getter } from "vuex-class";
 
 import Train from "@/scripts/interfaces/Train";
@@ -38,12 +44,14 @@ import Train from "@/scripts/interfaces/Train";
 import TrainTable from "@/components/TrainsView/TrainTable.vue";
 import TrainStats from "@/components/TrainsView/TrainStats.vue";
 import TrainOptions from "@/components/TrainsView/TrainOptions.vue";
+import ActionButton from "@/components/Global/ActionButton.vue";
 
 @Component({
   components: {
     TrainTable,
     TrainStats,
     TrainOptions,
+    ActionButton,
   },
 })
 export default class TrainsView extends Vue {
@@ -54,12 +62,20 @@ export default class TrainsView extends Vue {
 
   sorterActive: { id: string; dir: number } = { id: "distance", dir: -1 };
 
+  trainStatsOpen: boolean = false;
+
   searchedTrain: string = "";
   searchedDriver: string = "";
   focusedTrain: string = "";
 
+  toggleStats() {
+    this.trainStatsOpen = !this.trainStatsOpen;
+  }
+
   changeSearchedTrain(trainNo: string) {
     this.searchedTrain = trainNo;
+
+    console.log("train", trainNo);
   }
 
   changeSearchedDriver(name: string) {
@@ -73,6 +89,14 @@ export default class TrainsView extends Vue {
   changeSorter(sorter: { id: string; dir: number }) {
     this.sorterActive = sorter;
   }
+
+  // @Watch("queryTrain")
+  // onQueryTrainChanged(train: string) {
+  //   // this.searchedTrain = train;
+  //   this.changeSearchedTrain(train);
+  //   console.log(train);
+  // }
+
   get computedTrains() {
     return this.trains
       .filter(
@@ -130,16 +154,24 @@ export default class TrainsView extends Vue {
   position: relative;
 }
 
-.body-wrapper {
+.wrapper {
   margin: 1rem auto;
   max-width: 1300px;
 
-  padding: 0 0.5rem;
+  padding: 0 0.5em;
+}
+
+.options-bar button {
+  margin-bottom: 0.5em;
 }
 
 @include smallScreen {
   .options-bar {
-    font-size: 1.15em;
+    font-size: 1.25em;
+
+    button {
+      margin: 0 auto;
+    }
   }
 }
 </style>