From 0af49befc6fe5e571a5d64adea0b88a84b174d62 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 4 Feb 2025 14:12:47 +0100
Subject: [PATCH] chore: changed layout of journal timetable badges

---
 .../JournalTimetables/EntryDetails.vue        | 84 +++++++++++--------
 src/components/TrainsView/TrainInfo.vue       |  4 -
 2 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/src/components/JournalView/JournalTimetables/EntryDetails.vue b/src/components/JournalView/JournalTimetables/EntryDetails.vue
index b3c25eb..b363a2c 100644
--- a/src/components/JournalView/JournalTimetables/EntryDetails.vue
+++ b/src/components/JournalView/JournalTimetables/EntryDetails.vue
@@ -24,44 +24,20 @@
       <div class="g-separator"></div>
 
       <div class="stock-specs">
-        <span class="badge" v-if="timetable.authorName">
+        <span class="badge specs-badge" v-if="timetable.authorName">
           <span>{{ $t('journal.dispatcher-name') }}</span>
           <span>{{ timetable.authorName }}</span>
         </span>
 
-        <span class="badge" v-if="timetable.stockLength">
-          <span>{{ $t('journal.stock-length') }}</span>
-          <span>
-            {{
-              currentHistoryIndex == 0
-                ? timetable.stockLength
-                : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength
-            }}m
-          </span>
-        </span>
-
-        <span class="badge" v-if="timetable.stockMass">
-          <span>{{ $t('journal.stock-mass') }}</span>
-          <span>
-            {{
-              Math.floor(
-                (currentHistoryIndex == 0
-                  ? timetable.stockMass
-                  : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
-              )
-            }}t
-          </span>
-        </span>
-
-        <span class="badge" v-if="timetable.maxSpeed">
-          <span>{{ $t('journal.stock-max-speed') }}</span>
-          <span>{{ timetable.maxSpeed }}km/h</span>
-        </span>
-
-        <span class="badge" v-if="timetable.trainMaxSpeed">
+        <span class="badge specs-badge" v-if="timetable.trainMaxSpeed">
           <span>{{ $t('journal.stock-timetable-speed') }}</span>
           <span> {{ timetable.trainMaxSpeed }}km/h </span>
         </span>
+
+        <span class="badge specs-badge" v-if="timetable.maxSpeed">
+          <span>{{ $t('journal.stock-max-speed') }}</span>
+          <span>{{ timetable.maxSpeed }}km/h</span>
+        </span>
       </div>
 
       <div class="stock-dangers" v-if="timetable.warningNotes">
@@ -98,8 +74,35 @@
       <!-- Historia zmian w składzie -->
       <div v-if="timetable.stockString || stockHistory.length != 0">
         <div class="g-separator"></div>
+
         <b>{{ $t('journal.stock-preview') }}:</b>
 
+        <div class="stock-specs" style="margin-top: 0.5em">
+          <span class="badge specs-badge" v-if="timetable.stockLength">
+            <span>{{ $t('journal.stock-length') }}</span>
+            <span>
+              {{
+                currentHistoryIndex == 0
+                  ? timetable.stockLength
+                  : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength
+              }}m
+            </span>
+          </span>
+
+          <span class="badge specs-badge" v-if="timetable.stockMass">
+            <span>{{ $t('journal.stock-mass') }}</span>
+            <span>
+              {{
+                Math.floor(
+                  (currentHistoryIndex == 0
+                    ? timetable.stockMass
+                    : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
+                )
+              }}t
+            </span>
+          </span>
+        </div>
+
         <div class="stock-history">
           <button class="btn btn--action" @click="copyStockToClipboard()">
             <i class="fa-regular fa-copy"></i> {{ $t('journal.stock-copy') }}
@@ -255,14 +258,21 @@ export default defineComponent({
   display: flex;
   flex-wrap: wrap;
   gap: 0.5em;
+}
 
-  .badge {
-    margin: 0;
+.specs-badge {
+  margin: 0;
 
-    span:last-child {
-      color: black;
-      background-color: $accentCol;
-    }
+  span:first-child {
+    color: white;
+    background-color: #666;
+    border-radius: 0.25em 0 0 0.25em;
+  }
+
+  span:last-child {
+    color: black;
+    background-color: $accentCol;
+    border-radius: 0 0.25em 0.25em 0;
   }
 }
 
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 8081e50..ab91826 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -144,10 +144,6 @@
             {{ stockSpeedLimit }} km/h
           </em>
         </span>
-
-        <span v-if="train.timetableData?.trainMaxSpeed" 
-          >&bull; vRJ: {{ train.timetableData.trainMaxSpeed }} km/h</span
-        >
       </div>
     </div>