Zmiana i poprawki w wyglądzie RJ pociągów w trasie

src/App.vue

@@ -107,6 +107,19 @@ export default class App extends Vue {
 @import "./styles/global.scss";
 @import "./styles/scenery_status.scss";
 
+:root {
+  --clr-primary: #ffc014;
+  --clr-secondary: #2f2f2f;
+
+  --clr-bg: #333;
+
+  --clr-accent: #1085b3;
+  --clr-accent2: #ff3d5d;
+
+  --clr-skr: #ff5100;
+  --clr-twr: #ffbb00;
+}
+
 // VUE ROUTE CHANGE ANIMATION
 .view-anim {
   &-enter {

src/components/TrainsView/TrainSchedule.vue

@@ -1,41 +1,43 @@
 <template>
   <div class="train-schedule" @click="click">
     <div class="schedule-wrapper">
-      <div class="schedule-bar"></div>
-
-      <ul class="schedule-list">
+      <ul class="stop_list">
         <li
-          class="schedule-item"
           v-for="(stop, i) in followingStops"
           :key="i"
           :class="{
             confirmed: stop.confirmed,
             stopped: stop.stopped,
+            beginning: stop.beginsHere,
             delayed: stop.departureDelay > 0,
           }"
         >
-          <div class="progress-bar"></div>
-
+          <!-- <div class="progress-bar"></div> -->
+          <!-- 
           <div
-            class="stop-line arrival"
+            class="stop-line"
             v-if="
               i > 0 && followingStops[i - 1].departureLine != stop.arrivalLine
             "
           >
             {{ stop.arrivalLine }}
-          </div>
+          </div> -->
 
-          <span class="stop-info">
-            <div class="info-indicator"></div>
+          <span class="stop_info">
+            <div class="indicator"></div>
 
-            <span class="info-distance" v-if="stop.stopDistance">
+            <div class="progress-bar"></div>
+
+            <div class="stop-bar"></div>
+
+            <span class="distance" v-if="stop.stopDistance">
               {{ Math.floor(stop.stopDistance) }}
             </span>
 
-            <span class="info-name" v-html="stop.stopName"></span>
-            <span class="info-date">
+            <span class="stop-name" v-html="stop.stopName"></span>
+            <span class="stop-date">
               <span
-                class="date-arrival"
+                class="date arrival"
                 v-if="!stop.beginsHere"
                 :class="{
                   delayed: stop.arrivalDelay > 0 && stop.confirmed,
@@ -55,7 +57,7 @@
               </span>
 
               <span
-                class="date-stop"
+                class="date stop"
                 v-if="stop.stopTime"
                 :class="stop.stopType.replace(', ', '-')"
               >
@@ -63,7 +65,7 @@
               </span>
 
               <span
-                class="date-departure"
+                class="date departure"
                 v-if="!stop.terminatesHere && stop.stopTime != 0"
                 :class="{
                   delayed: stop.departureDelay > 0 && stop.confirmed,
@@ -84,7 +86,22 @@
             </span>
           </span>
 
-          <div class="stop-line departure">{{ stop.departureLine }}</div>
+          <div class="stop_line">
+            <div class="progress-bar"></div>
+
+            <span v-if="i < followingStops.length - 1">
+              <span
+                v-if="stop.departureLine == followingStops[i + 1].arrivalLine"
+              >
+                {{ stop.departureLine }}
+              </span>
+
+              <span v-else>
+                {{ stop.departureLine }} /
+                {{ followingStops[i + 1].arrivalLine }}
+              </span>
+            </span>
+          </div>
         </li>
       </ul>
     </div>
@@ -117,8 +134,6 @@ export default class TrainSchedule extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/responsive.scss";
-
 .train-schedule {
   max-height: 600px;
   margin-top: 2em;
@@ -126,129 +141,155 @@ export default class TrainSchedule extends Vue {
   overflow-y: auto;
 }
 
-.schedule-bar,
+.schedule-wrapper {
+  margin-left: 2.5rem;
+}
+
 .progress-bar {
   position: absolute;
-  z-index: 1;
-
-  width: 2px;
-  height: 100%;
 
   top: 0;
-  left: 0;
+  left: -1rem;
 
-  background: white;
-}
+  transform: translateX(-1px);
 
-.progress-bar {
   height: 100%;
-
-  top: 0;
-  left: calc(-0.5rem - 2px);
   width: 2px;
+
+  background-color: white;
 }
 
-.schedule-wrapper {
-  position: relative;
-  margin-left: 2em;
-}
-
-ul.schedule-list {
-  margin-left: 10px;
-}
-
-ul.schedule-list > li.schedule-item {
+ul.stop_list > li {
   position: relative;
 
   display: flex;
   flex-direction: column;
 
-  padding: 0 0.5rem;
+  padding: 0 0.5em;
 
   &.confirmed {
-    .progress-bar,
-    .stop-info > .info-indicator {
-      background: lime;
+    & > .stop_line > .progress-bar {
+      background-color: lime;
+    }
+
+    & > .stop_info > .progress-bar {
+      background-color: lime;
+    }
+
+    & > .stop_info > .indicator {
+      border-color: lime;
     }
   }
 
   &.stopped {
-    .progress-bar {
-      background: lime;
-      height: 50%;
-    }
+    & > .stop_info {
+      & > .indicator {
+        border-color: orangered;
+      }
 
-    .stop-info > .info-indicator {
-      background: orangered;
+      & > .stop-bar {
+        background: orangered;
+      }
     }
   }
-}
 
-li.schedule-item > .stop-info {
-  display: flex;
+  .stop_line {
+    font-size: 0.8em;
+    color: #ccc;
 
-  position: relative;
-  text-align: center;
+    padding: 0.35em 0;
 
-  .info-distance {
+    position: relative;
+
+    .line-segment {
+      color: white;
+      font-weight: 500;
+    }
+  }
+
+  .stop_info {
+    display: flex;
+
+    position: relative;
+    text-align: center;
+
+    padding: 0.15em 0;
+  }
+
+  .stop-bar {
+    position: absolute;
+    top: 0;
+    left: -1rem;
+
+    transform: translateX(-1px);
+
+    z-index: 2;
+
+    width: 2px;
+    height: 100%;
+  }
+
+  .distance {
     position: absolute;
 
     top: 50%;
     transform: translate(-100%, -50%);
 
-    margin-left: -30px;
+    margin-left: -1.75rem;
 
-    font-size: 0.8em;
+    font-size: 0.85em;
     color: #d6d6d6;
   }
 
-  .info-indicator {
+  .indicator {
     position: absolute;
-    z-index: 1;
+    z-index: 3;
 
     top: 50%;
-    left: -1.5rem;
+    left: -1rem;
+
+    transform: translate(-50%, -50%);
 
     text-align: right;
 
-    transform: translateY(-50%);
-
     width: 15px;
-    height: 2px;
+    height: 15px;
 
-    background: white;
+    background: var(--clr-secondary);
+    border: 2px solid white;
+    border-radius: 100%;
   }
 
-  .info-name {
-    background: rgb(0, 81, 187);
-    padding: 0.3rem 0.5rem;
+  .stop-name {
+    background: var(--clr-accent);
+    padding: 0.3em 0.5em;
 
     display: flex;
     align-items: center;
   }
 
-  .info-date {
+  .stop-date {
     display: flex;
     align-items: center;
 
-    span {
-      background: #5c5c5c;
-      padding: 0.3rem 0.5rem;
+    .date {
+      background: #494949;
+      padding: 0.3em 0.5em;
     }
 
-    .date-stop {
+    .stop {
       &.ph,
       &.ph-pm {
-        background: #ce8d00;
+        background: #db8e29;
       }
 
       background: #252525;
     }
 
-    .date-arrival,
-    .date-departure {
+    .arrival,
+    .departure {
       &.delayed {
-        background: rgb(250, 0, 0);
+        background: #f80334;
       }
 
       &.preponed {
@@ -257,13 +298,4 @@ li.schedule-item > .stop-info {
     }
   }
 }
-
-li.schedule-item > .stop-line {
-  font-size: 0.8em;
-  color: #bbb;
-  padding: 0.3em 0;
-  margin: 0.2em 0;
-
-  transform: translateX(-0.8rem);
-}
 </style>

src/components/TrainsView/TrainStats.vue

@@ -191,7 +191,6 @@ export default class TrainStats extends Vue {
 
 <style lang="scss" scoped>
 @import "../../styles/responsive";
-@import "../../styles/variables";
 
 .stats-anim {
   &-enter-active,
@@ -233,7 +232,7 @@ export default class TrainStats extends Vue {
     max-width: 700px;
     width: 100%;
 
-    background: rgba(black, 0.85);
+    background: #222;
     border-radius: 0 1em 1em 1em;
 
     padding: 1rem;
@@ -263,7 +262,7 @@ export default class TrainStats extends Vue {
   }
 
   &-type {
-    background: rgb(88, 88, 88);
+    background: #585858;
     font-weight: 600;
   }
 
@@ -284,12 +283,14 @@ export default class TrainStats extends Vue {
   }
 
   &.twr > &-type {
-    background-color: $twr;
+    background-color: var(--clr-twr);
+
     color: black;
   }
 
   &.skr > &-type {
-    background-color: $skr;
+    background-color: var(--clr-skr);
+
     color: white;
   }
 }
@@ -302,14 +303,6 @@ export default class TrainStats extends Vue {
   color: black;
   font-weight: bold;
   font-size: 0.85em;
-
-  &.twr {
-    background-color: #ffc700;
-  }
-
-  &.skr {
-    background-color: #f00000;
-  }
 }
 
 @include smallScreen {

src/components/TrainsView/TrainTable.vue

@@ -75,28 +75,6 @@
                 </span>
               </div>
             </div>
-
-            <!-- <div class="info-bottom">
-              <span
-                class="info-label user-badge"
-                :class="train.stopStatus || 'disconnected'"
-              >
-                <span
-                  class="tooltip"
-                  :style="!train.online ? 'color: gray' : ''"
-                >
-                  <span v-if="train.stopStatus">{{ train.stopLabel }}</span>
-                  <span v-else-if="train.currentStationName">
-                    Pociąg na złej stacji!
-                  </span>
-                  <span v-else>Sceneria offline!</span>
-
-                  <span class="tooltip-text" v-if="!train.online">
-                    Pociąg offline
-                  </span>
-                </span>
-              </span>
-            </div> -->
           </span>
 
           <span class="driver">
@@ -253,7 +231,6 @@ export default class TrainTable extends Vue {
 
 <style lang="scss" scoped>
 @import "../../styles/responsive.scss";
-@import "../../styles/variables.scss";
 @import "../../styles/user_badge.scss";
 
 .no-trains {
@@ -263,7 +240,7 @@ export default class TrainTable extends Vue {
   padding: 1rem;
   margin: 1rem 0;
 
-  background: #333;
+  background: var(--clr-bg);
 }
 
 .train {
@@ -278,7 +255,7 @@ export default class TrainTable extends Vue {
     padding: 1em;
     margin-bottom: 1rem;
 
-    background-color: $primaryCol;
+    background-color: var(--clr-secondary);
 
     cursor: pointer;
 
@@ -291,6 +268,8 @@ export default class TrainTable extends Vue {
         grid-template-rows: repeat(3, minmax(100px, 1fr));
 
         gap: 0.4em 0;
+
+        font-size: 1.1em;
       }
 
       @include bigScreen() {
@@ -310,6 +289,8 @@ export default class TrainTable extends Vue {
     justify-content: space-between;
     align-items: center;
 
+    font-size: 1.1em;
+
     div {
       display: flex;
     }
@@ -317,11 +298,12 @@ export default class TrainTable extends Vue {
     .category-right {
       padding: 0.15em 0.5em;
 
-      background: #1085b3;
+      background-color: var(--clr-accent);
       border-radius: 1em;
 
       -moz-user-select: none;
       -webkit-user-select: none;
+      user-select: none;
 
       img {
         vertical-align: middle;
@@ -330,10 +312,10 @@ export default class TrainTable extends Vue {
 
       .tooltip-text {
         font-size: 0.9em;
-        background-color: #1085b3;
+        background-color: var(--clr-accent);
 
         &::after {
-          border-color: #1085b3 transparent transparent transparent;
+          border-color: var(--clr-accent) transparent transparent transparent;
         }
       }
     }
@@ -343,27 +325,15 @@ export default class TrainTable extends Vue {
     display: flex;
     align-items: center;
 
-    font-size: 1.15em;
     margin: 5px 0;
+
+    font-size: 1.2em;
   }
 
   &-stops {
     margin-bottom: 10px;
 
-    font-size: 0.8em;
-  }
-
-  &-online {
-    background-color: #ce0000;
-
-    padding: 0.2em 0.7em;
-    font-size: 0.85em;
-
-    border-radius: 1em;
-
-    &.online {
-      background-color: #009700;
-    }
+    font-size: 0.9em;
   }
 
   &-bottom {
@@ -374,7 +344,6 @@ export default class TrainTable extends Vue {
       margin-left: 10px;
       border-radius: 0.7em;
       padding: 0.2em 0.5em;
-      font-size: 0.85em;
 
       border: 1px solid white;
     }
@@ -390,13 +359,11 @@ export default class TrainTable extends Vue {
   &-name {
     margin: 0 0.3em;
     font-weight: bold;
-    font-size: 1.1em;
   }
 
   &-type {
     color: #bbb;
     margin-left: 0.5em;
-    font-size: 1.1em;
   }
 
   &-loco {
@@ -440,7 +407,7 @@ export default class TrainTable extends Vue {
     text-align: center;
 
     p {
-      color: #00cff3;
+      color: var(--clr-accent);
     }
 
     & > span {
@@ -462,14 +429,13 @@ export default class TrainTable extends Vue {
   color: black;
 
   font-weight: bold;
-  font-size: 0.85em;
 
   &.twr {
-    background: $twr;
+    background: var(--clr-twr);
   }
 
   &.skr {
-    background: $twr;
+    background: var(--clr-skr);
   }
 }