From 58d6a97762f70f514db24687c2ab8c7ed3c279f3 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 17 Aug 2024 15:51:36 +0200
Subject: [PATCH] fix: twr/skr badges sizing

---
 .../JournalTimetables/TimetableGeneral.vue    |  9 +++----
 src/components/TrainsView/TrainInfo.vue       | 24 +++++--------------
 src/styles/badge.scss                         |  6 -----
 3 files changed, 9 insertions(+), 30 deletions(-)

diff --git a/src/components/JournalView/JournalTimetables/TimetableGeneral.vue b/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
index ce37587..53ea5ce 100644
--- a/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
+++ b/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
@@ -3,10 +3,8 @@
     <span class="general-train">
       <span class="text--grayed">#{{ timetable.id }}</span>
 
-      <span class="badges" v-if="timetable.skr || timetable.twr">
-        <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
-        <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
-      </span>
+      <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
+      <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
 
       <span>
         <strong
@@ -94,7 +92,7 @@ export default defineComponent({
       type: Object as PropType<API.TimetableHistory.Data>,
       required: true
     }
-  },
+  }
 });
 </script>
 
@@ -120,7 +118,6 @@ export default defineComponent({
   gap: 0.25em;
 
   cursor: pointer;
-  line-height: 2;
 }
 
 .general-time {
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 282c326..2c3b5e9 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -8,24 +8,12 @@
             #{{ train.timetableData.timetableId }}
           </span>
 
-          <span
-            class="timetable-warnings"
-            v-if="train.timetableData?.TWR || train.timetableData?.SKR"
-          >
-            <span
-              class="train-badge twr"
-              v-if="train.timetableData?.TWR"
-              :title="$t('general.TWR')"
-            >
-              TWR
-            </span>
-            <span
-              class="train-badge skr"
-              v-if="train.timetableData?.SKR"
-              :title="$t('general.SKR')"
-            >
-              SKR
-            </span>
+          <span class="train-badge twr" v-if="train.timetableData?.TWR" :title="$t('general.TWR')">
+            TWR
+          </span>
+
+          <span class="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')">
+            SKR
           </span>
 
           <b
diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index 05769f2..d841ce3 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -76,16 +76,10 @@
 }
 
 .train-badge {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-
   padding: 0.1em 0.3em;
   border-radius: 0.2em;
   font-weight: bold;
 
-  font-size: 0.9em;
-
   &.twr {
     background-color: var(--clr-twr);
     box-shadow: 0 0 5px 1px var(--clr-twr);