From 7ad17fc2c5f53747465140260e664e239b69c551 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 21 Aug 2024 21:33:46 +0200
Subject: [PATCH] chore: style improvements & finishing touches

---
 src/components/Global/ProgressBar.vue         |  1 -
 .../StationsView/StationFilterCard.vue        |  4 ---
 src/components/TrainsView/StopLabel.vue       | 28 +++++++++++--------
 src/components/TrainsView/TrainInfo.vue       | 17 +++++++----
 src/styles/badge.scss                         |  4 +++
 src/views/DriverView.vue                      | 15 ++++++++--
 6 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/src/components/Global/ProgressBar.vue b/src/components/Global/ProgressBar.vue
index f2a395f..b2694d6 100644
--- a/src/components/Global/ProgressBar.vue
+++ b/src/components/Global/ProgressBar.vue
@@ -43,7 +43,6 @@ export default defineComponent({
 
   width: 6em;
   height: 1em;
-  margin: 0.5em 0;
 
   .bar-fg,
   .bar-bg {
diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index 876e3ed..817970f 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/src/components/StationsView/StationFilterCard.vue
@@ -657,10 +657,6 @@ h3.section-header {
 }
 
 @include smallScreen {
-  .card_controls > button.card-button > p {
-    display: none;
-  }
-
   .slider {
     flex-wrap: wrap;
     justify-content: center;
diff --git a/src/components/TrainsView/StopLabel.vue b/src/components/TrainsView/StopLabel.vue
index 83ef967..15731bc 100644
--- a/src/components/TrainsView/StopLabel.vue
+++ b/src/components/TrainsView/StopLabel.vue
@@ -107,18 +107,6 @@ s {
   flex-wrap: wrap;
   align-items: center;
 
-  &[data-minor='true'] {
-    .date {
-      display: none;
-    }
-
-    .name {
-      background: none;
-      color: #aaa;
-      padding: 0;
-    }
-  }
-
   .name {
     background: $stopNameClr;
     border-radius: 0.5em 0 0 0.5em;
@@ -141,6 +129,18 @@ s {
     }
   }
 
+  &[data-minor='true'] {
+    .date {
+      display: none;
+    }
+
+    .name {
+      background: none;
+      color: #aaa;
+      padding: 0;
+    }
+  }
+
   .stop {
     &[data-stop-types='ph'],
     &[data-stop-types='ph-pm'],
@@ -156,6 +156,10 @@ s {
   }
 }
 
+.stop-label > a {
+  z-index: 0;
+}
+
 .stop .arrival {
   &[data-status='confirmed'][data-status-delayed='true'] {
     span {
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 822bf49..718ffad 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -76,21 +76,22 @@
           <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
 
           <span class="progress-distance">
-            &nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
-            <span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
-            |
+            <span>{{ currentDistance(train.timetableData.followingStops) }} km</span>
+            <span>/</span>
+            <span class="text--primary">{{ train.timetableData.routeDistance }} km </span>
+            <span>|</span>
             <span v-html="currentDelay(train.timetableData.followingStops)"></span>
           </span>
         </div>
 
         <div class="status-badges">
           <div v-if="!train.currentStationHash" class="train-badge offline">
-            <img src="/images/icon-offline.svg" alt="" />
+            <img src="/images/icon-offline.svg" alt="offline train icon" />
             {{ $t('trains.scenery-offline') }}
           </div>
 
           <div v-if="!train.online" class="train-badge offline">
-            <img src="/images/icon-offline.svg" alt="" />
+            <img src="/images/icon-offline.svg" alt="offline train icon" />
             Offline {{ lastSeenMessage(train.lastSeen) }}
           </div>
         </div>
@@ -335,10 +336,14 @@ export default defineComponent({
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  gap: 0.5em;
+  padding: 0.5em 0;
 }
 
 .progress-distance {
-  margin-right: 0.25em;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25em;
 }
 
 .timetable-warnings {
diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index d9f9faf..46499be 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -78,6 +78,10 @@
 }
 
 .train-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.3em;
+
   padding: 0.1em 0.3em;
   border-radius: 0.2em;
   font-weight: bold;
diff --git a/src/views/DriverView.vue b/src/views/DriverView.vue
index b7f1fcf..ebf1249 100644
--- a/src/views/DriverView.vue
+++ b/src/views/DriverView.vue
@@ -5,11 +5,11 @@
         <div class="actions">
           <router-link to="/" class="a-button btn--image">
             <img src="/images/icon-back.svg" alt="train icon" />
-            {{ $t('trains.driver-return-link') }}
+            <span>{{ $t('trains.driver-return-link') }}</span>
           </router-link>
           <router-link :to="`/journal/timetables?search-driver=`" class="a-button btn--image">
             <img src="/images/icon-train.svg" alt="train icon" />
-            <span>
+            <span class="hidable">
               {{ $t('trains.driver-journal-link') }}
             </span>
           </router-link>
@@ -17,7 +17,7 @@
 
         <div class="train-card">
           <TrainInfo :train="chosenTrain" :extended="true" ref="trainInfo" />
-          <TrainSchedule :train="chosenTrain" tabindex="0" />
+          <TrainSchedule :train="chosenTrain" />
         </div>
       </div>
 
@@ -60,6 +60,8 @@ const chosenTrain = computed(() => mainStore.trainList.find((train) => train.id
 </script>
 
 <style lang="scss" scoped>
+@import '../styles/responsive';
+
 $viewBgCol: #1a1a1a;
 
 .driver-view {
@@ -72,6 +74,7 @@ $viewBgCol: #1a1a1a;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
+  gap: 0.5em;
 }
 
 .actions > a {
@@ -102,4 +105,10 @@ $viewBgCol: #1a1a1a;
     text-decoration: underline;
   }
 }
+
+@include smallScreen {
+  .actions > a > span.hidable {
+    display: none;
+  }
+}
 </style>