From 7769477508037837fca1467a3d93b53ccf6953f2 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 20 Aug 2024 00:14:44 +0200
Subject: [PATCH] chore: station stats styling

---
 src/components/StationsView/StationStats.vue | 43 ++++++++++++--------
 src/components/TrainsView/TrainStats.vue     | 21 +++-------
 src/styles/badge.scss                        | 11 +++++
 src/styles/global.scss                       |  1 +
 4 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/src/components/StationsView/StationStats.vue b/src/components/StationsView/StationStats.vue
index fbd88e8..e195f0d 100644
--- a/src/components/StationsView/StationStats.vue
+++ b/src/components/StationsView/StationStats.vue
@@ -22,10 +22,10 @@
 
           <hr style="margin: 0.5em 0" />
 
-          <div>
-            <div>
-              <span
-                >{{ $t('station-stats.u-factor') }}
+          <ul class="stats-list">
+            <li>
+              <span>
+                {{ $t('station-stats.u-factor') }}
                 <a
                   href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
                   target="_blank"
@@ -36,30 +36,30 @@
               <b class="u-factor" :style="calculateFactorStyle()">
                 {{ uFactor.toFixed(2) }}
               </b>
-            </div>
-            <div>
+            </li>
+            <li>
               {{ $t('station-stats.avg-timetable-count') }}
               <b>{{ avgTimetableCount.toFixed(2) }}</b>
-            </div>
-            <div>
+            </li>
+            <li>
               {{ $t('station-stats.single-track-count') }}
               <b>{{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
-            </div>
-            <div>
+            </li>
+            <li>
               {{ $t('station-stats.double-track-count') }}
               <b>{{ trackCount.twoWay }}</b>
               (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
-            </div>
-            <div>
+            </li>
+            <li>
               {{ $t('station-stats.cross-sceneries') }}
               <b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
-            </div>
-            <div>
+            </li>
+            <li>
               {{ $t('station-stats.open-spawns') }} <b>{{ spawnCount.passenger }}</b> - PAS /
               <b>{{ spawnCount.freight }}</b> - TOW / <b>{{ spawnCount.loco }}</b> - LUZ /
               <b>{{ spawnCount.all }}</b> - ALL
-            </div>
-          </div>
+            </li>
+          </ul>
         </div>
 
         <div tabindex="0" @focus="() => (showDropdown = false)"></div>
@@ -191,6 +191,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../styles/dropdown.scss';
+@import '../../styles/badge.scss';
 
 h1 img {
   vertical-align: text-bottom;
@@ -218,6 +219,16 @@ h3 {
   }
 }
 
+ul.stats-list {
+  list-style: disc;
+  padding-left: 1em;
+  margin-top: 1em;
+
+  & > li {
+    margin: 0.25em 0;
+  }
+}
+
 @include smallScreen {
   .filter-button span {
     display: none;
diff --git a/src/components/TrainsView/TrainStats.vue b/src/components/TrainsView/TrainStats.vue
index 1a50936..35c8a83 100644
--- a/src/components/TrainsView/TrainStats.vue
+++ b/src/components/TrainsView/TrainStats.vue
@@ -23,21 +23,21 @@
         <div v-if="apiStore.dataStatuses.connection == Status.Loaded && regionTrains.length > 0">
           <div class="top-list general">
             <transition-group tag="ul" name="stats-anim">
-              <li class="badge" key="timetable-count">
+              <li class="badge stat-badge" key="timetable-count">
                 <span>{{ $t('train-stats.timetable-count') }}</span>
                 <span>
                   <b>{{ regionTrainsWithTT.length }}</b>
                 </span>
               </li>
 
-              <li class="badge" key="avg-speed">
+              <li class="badge stat-badge" key="avg-speed">
                 <span>{{ $t('train-stats.avg-speed') }}</span>
                 <span>
                   <b>{{ stats.avgSpeed.toFixed(1) }} km/h</b>
                 </span>
               </li>
 
-              <li class="badge" key="avg-distance">
+              <li class="badge stat-badge" key="avg-distance">
                 <span>{{ $t('train-stats.avg-timetable') }}</span>
                 <span>
                   <b>{{ stats.avgDistance.toFixed(1) }} km</b>
@@ -50,7 +50,7 @@
             <h3>{{ $t('train-stats.top-categories') }}</h3>
 
             <transition-group tag="ul" name="stats-anim">
-              <li class="badge" v-for="top in stats.topCategories" :key="top.name">
+              <li class="badge stat-badge" v-for="top in stats.topCategories" :key="top.name">
                 <span>{{ top.name }}</span>
                 <span>{{ top.count }}</span>
               </li>
@@ -65,7 +65,7 @@
             <h3>{{ $t('train-stats.top-vehicles') }}</h3>
 
             <transition-group tag="ul" name="stats-anim">
-              <li class="badge" v-for="top in stats.topVehicles" :key="top.name">
+              <li class="badge stat-badge" v-for="top in stats.topVehicles" :key="top.name">
                 <span>{{ top.name }}</span>
                 <span>{{ top.count }}</span>
               </li>
@@ -80,7 +80,7 @@
             <h3>{{ $t('train-stats.top-units') }}</h3>
 
             <transition-group tag="ul" name="stats-anim">
-              <li class="badge" v-for="top in stats.topUnits.slice(0, 7)" :key="top.name">
+              <li class="badge stat-badge" v-for="top in stats.topUnits.slice(0, 7)" :key="top.name">
                 <span>{{ top.name }}</span>
                 <span>{{ top.count }}</span>
               </li>
@@ -244,15 +244,6 @@ h3 {
   gap: 0.5em;
 }
 
-.badge {
-  margin: 0;
-
-  & > span:first-child {
-    background-color: $accentCol;
-    color: black;
-  }
-}
-
 .dropdown_wrapper {
   max-width: 600px;
 }
diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index d841ce3..6a3bb94 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -1,3 +1,5 @@
+@import 'variables.scss';
+
 .badge {
   font-weight: 600;
 
@@ -108,3 +110,12 @@
     background-color: #007599;
   }
 }
+
+.stat-badge {
+  margin: 0;
+
+  & > span:first-child {
+    background-color: $accentCol;
+    color: black;
+  }
+}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index d7cf61c..4307443 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -290,6 +290,7 @@ a.a-button {
 // Basic tooltip
 [data-tooltip] {
   cursor: help;
+  line-height: initial;
 }
 
 [data-tooltip]:hover::after,