Zmiany w wyglądzie listy pociągów

src/components/StationsView/FilterCard.vue

@@ -21,7 +21,8 @@
           <span
             class="option-content"
             :class="option.section + (option.value ? ' checked' : '')"
-          >{{option.content}}</span>
+            >{{ option.content }}</span
+          >
         </label>
       </div>
     </div>
@@ -39,17 +40,24 @@
           @change="handleInput"
         />
 
-        <span class="slider-value">{{slider.value}}</span>
+        <span class="slider-value">{{ slider.value }}</span>
 
-        <div class="slider-content">{{slider.content}}</div>
+        <div class="slider-content">{{ slider.content }}</div>
       </div>
     </div>
 
     <div class="card-save">
-      <div class="option">
+      <div class="option save">
         <label class="option-label">
-          <input class="option-input" type="checkbox" v-model="saveOptions" @change="saveFilters" />
-          <span class="option-content save" :class="{'checked': saveOptions}">ZAPISZ FILTRY</span>
+          <input
+            class="option-input"
+            type="checkbox"
+            v-model="saveOptions"
+            @change="saveFilters"
+          />
+          <span class="option-content save" :class="{ checked: saveOptions }"
+            >ZAPISZ FILTRY</span
+          >
         </label>
       </div>
     </div>
@@ -161,7 +169,8 @@ export default class FilterCard extends Vue {
 
   background: #262a2e;
 
-  font-size: calc(0.75rem + 0.4vw);
+  font-size: calc(0.75rem + 0.45vw);
+
   box-shadow: 0 0 15px 5px #474747;
 
   @include smallScreen() {
@@ -175,12 +184,6 @@ export default class FilterCard extends Vue {
 }
 
 .card {
-  &-exit {
-    img {
-      width: 1.2em;
-    }
-  }
-
   &-title {
     font-size: 2em;
     font-weight: 700;
@@ -217,6 +220,12 @@ export default class FilterCard extends Vue {
       font-size: 0.9em;
     }
   }
+
+  &-exit {
+    img {
+      width: 2em;
+    }
+  }
 }
 
 .option {
@@ -248,6 +257,10 @@ export default class FilterCard extends Vue {
 
     transition: all 0.2s;
 
+    &.save {
+      font-size: 0.8em;
+    }
+
     &:not(.checked) {
       background-color: #585858;
 

src/components/StationsView/StationCard.vue

@@ -137,7 +137,7 @@
         <h3 class="users-title title">GRACZE NA STACJI</h3>
         <div class="users-content">
           <div
-            class="user"
+            class="user-badge"
             :class="train.stopStatus"
             v-for="train in computedStationTrains"
             :key="train.trainNo + train.driverName"
@@ -168,7 +168,7 @@
 
     <StationTimetable
       :class="{ show: cardMode == 1 }"
-      :scheduledTrains="computedScheduledTrains"
+      :scheduledTrains="this.stationInfo.scheduledTrains"
       :stationName="stationInfo.stationName"
     />
   </section>
@@ -202,28 +202,9 @@ export default class StationCard extends styleMixin {
       : `${this.stationInfo.dispatcherExp}`;
   }
 
-  get computedScheduledTrains() {
-    return this.stationInfo.scheduledTrains.map(scheduledTrain => {
-      let stopStatus = "";
-      let stopLabel = "";
-
-      if (scheduledTrain.stopInfo.terminatesHere && scheduledTrain.stopInfo.confirmed) { stopStatus = "terminated"; stopLabel = "Skończył bieg" }
-      else if (!scheduledTrain.stopInfo.terminatesHere && scheduledTrain.stopInfo.confirmed) { stopStatus = "departed"; stopLabel = "Odprawiony" }
-      else if (scheduledTrain.currentStationName == this.stationInfo.stationName && !scheduledTrain.stopInfo.stopped) { stopStatus = "online"; stopLabel = "Na stacji" }
-      else if (scheduledTrain.currentStationName == this.stationInfo.stationName && scheduledTrain.stopInfo.stopped) { stopStatus = "stopped"; stopLabel = "Postój" }
-      else if (scheduledTrain.currentStationName != this.stationInfo.stationName) { stopStatus = "arriving"; stopLabel = "W drodze" }
-
-      return {
-        ...scheduledTrain,
-        stopStatus,
-        stopLabel
-      }
-    })
-  }
-
   get computedStationTrains() {
     return this.stationInfo.stationTrains.map(stationTrain => {
-      const scheduledData = this.computedScheduledTrains.find(scheduledTrain => scheduledTrain.trainNo === stationTrain.trainNo);
+      const scheduledData = this.stationInfo.scheduledTrains.find(scheduledTrain => scheduledTrain.trainNo === stationTrain.trainNo);
 
       return {
         ...stationTrain,
@@ -237,6 +218,7 @@ export default class StationCard extends styleMixin {
 <style lang="scss" scoped>
 @import "../../styles/variables.scss";
 @import "../../styles/responsive.scss";
+@import "../../styles/user_badge.scss";
 
 .title {
   color: $accentCol;
@@ -425,44 +407,6 @@ export default class StationCard extends styleMixin {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-
-    & > .user {
-      padding: 0.3rem;
-      margin: 0.3rem;
-      border: 1px solid white;
-      border-radius: 0.4em;
-
-      &.borderless {
-        border: none;
-        margin: 0;
-        padding: 0;
-      }
-
-      &.no-timetable {
-        border: 1px solid #aaa;
-
-        a {
-          color: #aaa;
-          pointer-events: none;
-        }
-      }
-
-      &.departed {
-        border: 1px solid lime;
-      }
-
-      &.stopped {
-        border: 1px solid #ffa600;
-      }
-
-      &.online {
-        border: 1px solid gold;
-      }
-
-      &.terminated {
-        border: 1px solid red;
-      }
-    }
   }
 }
 

src/components/StationsView/StationTimetable.vue

@@ -25,8 +25,9 @@
                 <span>
                   <strong>{{ scheduledTrain.category }}</strong>
                   {{ scheduledTrain.trainNo }}
-                </span> </router-link
-              >|
+                </span>
+              </router-link>
+              |
               <span>
                 <a
                   :href="