Wersja 1.20.2

Wersja 1.20.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.20.1",
+  "version": "1.20.2",
   "private": true,
   "scripts": {
     "dev": "vite",

src/components/TrainsView/StopLabel.vue

@@ -3,13 +3,17 @@
     <span class="name" v-html="stop.nameHtml"></span>
 
     <span
-      class="date arrival"
       v-if="stop.position != 'begin'"
-      :class="{
+      class="date arrival"
-        delayed: stop.arrivalDelay > 0 && stop.status != 'unconfirmed',
+      :data-status="
-        preponed: stop.arrivalDelay < 0 && stop.status != 'unconfirmed',
+        stop.arrivalDelay > 0 && stop.status != 'unconfirmed'
-        'on-time': stop.arrivalDelay == 0 && stop.status == 'confirmed'
+          ? 'delayed'
-      }"
+          : stop.arrivalDelay < 0 && stop.status != 'unconfirmed'
+          ? 'preponed'
+          : stop.arrivalDelay == 0 && stop.status == 'confirmed'
+          ? 'on-time'
+          : ''
+      "
     >
       <span v-if="stop.arrivalDelay != 0 && stop.status != 'unconfirmed'">
         <s>{{ timestampToString(stop.arrivalScheduled) }}</s>
@@ -23,20 +27,36 @@
     </span>
 
     <span
+      v-if="
+        stop.duration ||
+        (stop.status == 'stopped' && stop.position != 'begin') ||
+        stop.departureDelay != stop.arrivalDelay
+      "
       class="date stop"
-      v-if="stop.duration || stop.status == 'stopped'"
+      :data-stop-types="stop.type.replace(', ', '-')"
-      :class="stop.type.replace(', ', '-')"
+      :data-stop-status="
+        stop.departureDelay - stop.arrivalDelay > 0 && !stop.duration ? 'delayed' : ''
+      "
     >
-      {{ stop.duration }} {{ stop.type == '' ? 'pt' : stop.type }}
+      {{ stop.duration || stop.departureDelay - stop.arrivalDelay }}
+      {{ stop.type == '' ? 'pt' : stop.type }}
     </span>
 
     <span
+      v-if="
+        stop.position != 'end' &&
+        (stop.duration != 0 || stop.status == 'stopped' || stop.departureDelay != stop.arrivalDelay)
+      "
       class="date departure"
-      v-if="stop.position != 'end' && (stop.duration != 0 || stop.status == 'stopped')"
+      :data-status="
-      :class="{
+        stop.departureDelay > 0 && stop.status == 'confirmed'
-        delayed: stop.departureDelay > 0 && stop.status == 'confirmed',
+          ? 'delayed'
-        preponed: stop.departureDelay < 0 && stop.status == 'confirmed'
+          : stop.departureDelay < 0 && stop.status == 'confirmed'
-      }"
+          ? 'preponed'
+          : stop.departureDelay == 0 && stop.status == 'confirmed'
+          ? 'on-time'
+          : ''
+      "
     >
       <span v-if="stop.departureDelay != 0 && stop.status == 'confirmed'">
         <s>{{ timestampToString(stop.departureScheduled) }}</s>
@@ -78,6 +98,10 @@ $stopDefaultClr: #252525;
 $stopNameClr: #22a8d1;
 
 .stop-label {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
   &[data-sbl='true'] {
     .date {
       display: none;
@@ -90,10 +114,6 @@ $stopNameClr: #22a8d1;
     }
   }
 
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-
   .name {
     background: $stopNameClr;
     padding: 0.3em 0.5em;
@@ -112,18 +132,22 @@ $stopNameClr: #22a8d1;
   }
 
   .stop {
-    &.ph,
+    &[data-stop-types='ph'],
-    &.ph-pm,
+    &[data-stop-types='ph-pm'],
-    &.pm {
+    &[data-stop-types='pm'] {
       background: $stopExchangeClr;
     }
 
     background: $stopDefaultClr;
+
+    &[data-stop-status='delayed'] {
+      color: $delayedClr;
+    }
   }
 
   .arrival,
   .departure {
-    &.delayed {
+    &[data-status='delayed'] {
       s {
         color: #999;
       }
@@ -133,7 +157,7 @@ $stopNameClr: #22a8d1;
       }
     }
 
-    &.preponed {
+    &[data-status='preponed'] {
       s {
         color: #999;
       }

src/locales/en.json

@@ -12,7 +12,7 @@
     "p4": "Every person who decides to contribute at least {b1} (in case of PayPal it must be a payment including additional transaction fees) for the development of Stacjownik, will receive (upon a personal request) {img}{b2} of username in the app and on my Discord server (after verifying the payment author, preferably by providing the username directly with the payment).",
     "p4-b1": "5 PLN",
     "p4-b2": "a symbolic highlight",
-    "p5": "Thank you and enjoy the app!<br />~ Spythegre",
+    "p5": "Thank you and enjoy the app!<br />~ Spythere",
     "action-exit": "Maybe next time...",
     "action-paypal": "DONATE WITH PAYPAL",
     "action-buycoffee": "BUY ME A COFFEE!",