chore: station stats styling

src/components/StationsView/StationStats.vue

@@ -22,10 +22,10 @@
 
           <hr style="margin: 0.5em 0" />
 
-          <div>
+          <ul class="stats-list">
-            <div>
+            <li>
-              <span
+              <span>
-                >{{ $t('station-stats.u-factor') }}
+                {{ $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>
+            </li>
-            <div>
+            <li>
               {{ $t('station-stats.avg-timetable-count') }}
               <b>{{ avgTimetableCount.toFixed(2) }}</b>
-            </div>
+            </li>
-            <div>
+            <li>
               {{ $t('station-stats.single-track-count') }}
               <b>{{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
-            </div>
+            </li>
-            <div>
+            <li>
               {{ $t('station-stats.double-track-count') }}
               <b>{{ trackCount.twoWay }}</b>
               (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
-            </div>
+            </li>
-            <div>
+            <li>
               {{ $t('station-stats.cross-sceneries') }}
               <b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
-            </div>
+            </li>
-            <div>
+            <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>
+            </li>
-          </div>
+          </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;

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;
 }

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;
+  }
+}

src/styles/global.scss

@@ -290,6 +290,7 @@ a.a-button {
 // Basic tooltip
 [data-tooltip] {
   cursor: help;
+  line-height: initial;
 }
 
 [data-tooltip]:hover::after,