Poprawki; dodano ikony w headerze

src/components/TrainsView/TrainInfoExtended.vue

@@ -31,7 +31,13 @@
                 <span>{{ train.driverName }}</span>
               </span>
 
-              <img class="image-offline" v-if="!train.currentStationHash" :src="icons.offline" alt="offline" :title="$t('trains.offline')" />
+              <img
+                class="image-offline"
+                v-if="!train.currentStationHash"
+                :src="icons.offline"
+                alt="offline"
+                :title="$t('trains.offline')"
+              />
 
               <span class="hide-info" @click="toggleInfo">
                 <img :src="icons.ascArrow" :class="{ hidden: !isInfoShown }" />
@@ -81,7 +87,10 @@
 
         <span v-else>
           {{ $t('trains.current-scenery') }}
-          <span><b class="text--primary">{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }}</b> (offline)&nbsp;</span>
+          <span
+            ><b class="text--primary">{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }}</b>
+            (offline)&nbsp;</span
+          >
         </span>
 
         <span v-if="train.signal">
@@ -89,8 +98,10 @@
         </span>
 
         <span v-if="train.connectedTrack">
-          {{ $t('trains.current-track') }} <b class="text--primary">{{ train['connectedTrack'] }}</b>
+          {{ $t('trains.current-track') }} <b class="text--primary">{{ train['connectedTrack'] }}&nbsp;</b>
         </span>
+
+        <span v-if="train.distance">({{ displayDistance(train.distance) }})</span>
       </div>
 
       <div style="margin-top: 0.5em;">

src/components/TrainsView/TrainInfoSimple.vue

@@ -13,9 +13,14 @@
             <span>&nbsp;| {{ train.driverName }}</span>
           </span>
 
-          <img class="image-offline" style="height: 1em" v-if="!train.currentStationHash" :src="icons.offline" alt="offline" 
+          <img
+            class="image-offline"
+            style="height: 1em"
+            v-if="!train.currentStationHash"
+            :src="icons.offline"
+            alt="offline"
             :title="$t('trains.offline')"
-          >
+          />
         </div>
 
         <div class="timetable_route">
@@ -52,7 +57,8 @@
           </span>
 
           <span v-else>
-            {{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, "") }} (offline)&nbsp;</span>
+            {{ $t('trains.current-scenery') }}
+            <span>{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }} (offline)&nbsp;</span>
           </span>
 
           <span v-if="train.signal">
@@ -60,8 +66,10 @@
           </span>
 
           <span v-if="train.connectedTrack">
-            {{ $t('trains.current-track') }} <span>{{ train['connectedTrack'] }}</span>
+            {{ $t('trains.current-track') }} <span>{{ train['connectedTrack'] }}&nbsp;</span>
           </span>
+
+          <span v-if="train.distance">({{ displayDistance(train.distance) }})</span>
         </div>
       </span>
     </section>
@@ -107,7 +115,7 @@ export default defineComponent({
   data: () => ({
     icons: {
       warning: require('@/assets/icon-warning.svg'),
-      offline: require("@/assets/icon-offline.svg")
+      offline: require('@/assets/icon-offline.svg'),
     },
   }),
 });
@@ -116,7 +124,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 
-.image-warning, .image-offline {
+.image-warning,
+.image-offline {
   height: 1em;
 
   margin-left: 0.5em;
@@ -132,8 +141,6 @@ export default defineComponent({
   }
 }
 
-
-
 .simple {
   display: grid;
   grid-template-columns: 2fr 1fr;

src/components/TrainsView/TrainTable.vue

@@ -176,7 +176,7 @@ export default defineComponent({
 .table-info {
   text-align: center;
 
-  padding: 1em;
+  padding: 1em 0;
   margin: 1em 0;
 
   font-size: 1.35em;
@@ -189,7 +189,7 @@ img.train-image {
 }
 
 .traffic-warning {
-  padding: 1em 0.5em;
+  padding: 1em 0;
   margin-bottom: 0.5em;
   background: var(--clr-warning);
 }
@@ -198,7 +198,6 @@ img.train-image {
   &-list {
     overflow: auto;
 
-    padding-right: 0.5em;
     margin-top: 1em;
 
     @include smallScreen() {