Merge pull request #126 from Spythere/development

v1.29.2

index.html

@@ -22,11 +22,6 @@
 
     <link rel="icon" href="favicon.ico" />
 
-    <link rel="stylesheet" href="fa/css/fontawesome.css" />
-    <link rel="stylesheet" href="fa/css/brands.css" />
-    <link rel="stylesheet" href="fa/css/regular.css" />
-    <link rel="stylesheet" href="fa/css/solid.css" />
-
     <!-- Static OpenGraph meta -->
     <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
     <meta property="og:url" content="https://stacjownik-td2.web.app/" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.29.1",
+  "version": "1.29.2",
   "private": true,
   "type": "module",
   "scripts": {
@@ -26,7 +26,7 @@
     "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "@types/node": "^20.14.12",
+    "@types/node": "^22.13.13",
     "@types/showdown": "^2.0.6",
     "@vite-pwa/assets-generator": "^0.2.4",
     "@vitejs/plugin-vue": "^5.1.0",

src/App.vue

@@ -167,32 +167,13 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import './styles/global';
+@use './styles/animations';
-@import './styles/animations';
-
-.route {
-  margin: 0 0.2em;
-
-  &-active,
-  &[data-active='true'] {
-    color: $accentCol;
-    font-weight: bold;
-  }
-}
 
 // APP
 #app {
   color: white;
-  font-size: 1rem;
   overflow-x: hidden;
-
+  font-size: 1em;
-  @include smallScreen() {
-    font-size: calc(0.65rem + 0.85vw);
-  }
-
-  @include screenLandscape() {
-    font-size: calc(0.45rem + 0.8vw);
-  }
 }
 
 // CONTAINER

src/components/App/AppFooter.vue

@@ -36,6 +36,4 @@ export default defineComponent({
     }
   }
 });
-</script>
+</script>
-
-<style scoped></style>

src/components/App/AppHeader.vue

@@ -45,17 +45,17 @@
         </span>
 
         <span class="header_links">
-          <router-link class="route" active-class="route-active" to="/" exact>
+          <router-link class="route-link" active-class="route-link-active" to="/" exact>
             {{ $t('app.sceneries') }}
           </router-link>
           /
-          <router-link class="route" active-class="route-active" to="/trains">{{
+          <router-link class="route-link" active-class="route-link-active" to="/trains">{{
             $t('app.trains')
           }}</router-link>
           /
           <router-link
-            class="route"
+            class="route-link"
-            active-class="route-active"
+            active-class="route-link-active"
             :data-active="$route.path.startsWith('/journal')"
             to="/journal"
           >
@@ -116,9 +116,9 @@ export default defineComponent({
   }
 });
 </script>
+
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
+@use '../../styles/responsive';
-@import '../../styles/responsive.scss';
 
 // HEADER
 .app_header {
@@ -126,7 +126,7 @@ export default defineComponent({
   justify-content: center;
 
   position: relative;
-  background-color: $primaryCol;
+  background-color: #2c2c2c;
 }
 
 .header {
@@ -141,7 +141,7 @@ export default defineComponent({
 
     border-radius: 0 0 1em 1em;
 
-    @include smallScreen {
+    @include responsive.smallScreen{
       position: relative;
       margin-top: 0.5em;
     }
@@ -180,7 +180,7 @@ export default defineComponent({
 
     padding: 0.5em;
 
-    @include smallScreen {
+    @include responsive.smallScreen{
       transform: translateX(85%);
     }
   }

src/components/App/Clock.vue

@@ -6,9 +6,7 @@
 import { computed, defineComponent, ref } from 'vue';
 export default defineComponent({
   name: 'VueClock',
-  data: () => ({
+  data: () => ({ timestamp: Date.now() }),
-    timestamp: Date.now()
-  }),
   setup() {
     let timestamp = ref(Date.now());
 
@@ -28,8 +26,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
 .clock {
   display: flex;
   align-items: center;

src/components/App/StatusIndicator.vue

@@ -310,7 +310,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
 
 // INDICATOR TOOLTIP ANIMATION
 .tooltip-anim {
@@ -379,7 +379,7 @@ export default defineComponent({
       content: '';
     }
 
-    @include midScreen() {
+    @include responsive.midScreen() {
       left: auto;
       right: 200%;
 
@@ -393,7 +393,7 @@ export default defineComponent({
       }
     }
 
-    @include smallScreen() {
+    @include responsive.smallScreen{
       min-width: 8em;
     }
   }

src/components/App/UpdateCard.vue

@@ -73,11 +73,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/variables';
-
 ::v-deep(h1) {
   text-align: center;
-  color: $accentCol;
+  color: var(--clr-primary);
 }
 
 ::v-deep(h2) {

src/components/Global/ActionButton.vue

@@ -13,8 +13,7 @@ export default defineComponent({});
 </script>
 
 <style lang="scss">
-@import '../../styles/variables';
+@use '../../styles/responsive';
-@import '../../styles/responsive';
 
 .button_content {
   display: flex;

src/components/Global/AddDataButton.vue

@@ -38,5 +38,3 @@ export default defineComponent({
   }
 });
 </script>
-
-<style scoped></style>

src/components/Global/Card.vue

@@ -43,7 +43,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
 
 .card {
   position: fixed;
@@ -85,7 +85,7 @@ export default defineComponent({
   overflow: auto;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .card {
     align-items: flex-start;
   }

src/components/Global/DonationCard.vue

@@ -150,8 +150,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
 .body {
   display: grid;
   grid-template-rows: 1fr auto;
@@ -200,30 +198,26 @@ a.discord {
 
 .actions-container > .action {
   &.paypal {
-    $btnColor: #254069;
+    background-color: #254069;
-
-    background-color: $btnColor;
 
     &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #2f5185;
     }
   }
 
   &.coffee {
-    $btnColor: #009255;
+    background-color: #009255;
-    background-color: $btnColor;
 
     &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #00a35f;
     }
   }
 
   &.exit {
-    $btnColor: #686868;
+    background-color: #686868;
-    background-color: $btnColor;
 
     &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #8d8d8d;
     }
   }
 }

src/components/Global/RegionDropdown.vue

@@ -120,8 +120,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-
 .region-dropdown {
   display: flex;
   align-items: center;
@@ -182,7 +180,7 @@ li.option {
     background: none;
 
     &:focus + span {
-      color: $accentCol;
+      color: var(--clr-primary);
       font-weight: 800;
     }
   }

src/components/Global/SearchBox.vue

@@ -7,7 +7,12 @@
       @keypress="updateValue"
     />
 
-    <img class="search-exit" src="/images/icon-exit.svg" alt="exit-icon" @click="clearSearchValue" />
+    <img
+      class="search-exit"
+      src="/images/icon-exit.svg"
+      alt="exit-icon"
+      @click="clearSearchValue"
+    />
   </div>
 </template>
 
@@ -17,21 +22,10 @@ import { defineComponent, ref, watch } from 'vue';
 export default defineComponent({
   emits: ['update:searchedValue', 'clearValue'],
   props: {
-    searchedValue: {
+    searchedValue: { type: String, required: true },
-      type: String,
+    updateOnInput: { type: Boolean, default: true },
-      required: true
+    titleToTranslate: { type: String, required: true },
-    },
+    clearValue: { type: Function }
-    updateOnInput: {
-      type: Boolean,
-      default: true
-    },
-    titleToTranslate: {
-      type: String,
-      required: true
-    },
-    clearValue: {
-      type: Function
-    }
   },
 
   setup(props, { emit }) {
@@ -56,17 +50,13 @@ export default defineComponent({
         emit('update:searchedValue', compSearchedValue.value);
     };
 
-    return {
+    return { compSearchedValue, updateValue, clearSearchValue };
-      compSearchedValue,
-      updateValue,
-      clearSearchValue
-    };
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive';
+@use '../../styles/responsive';
 
 .search {
   &-box {
@@ -78,7 +68,7 @@ export default defineComponent({
 
     margin: 0.5em 0 0.5em 0.5em;
 
-    @include smallScreen() {
+    @include responsive.smallScreen{
       width: 85%;
     }
   }

src/components/Global/StationStatusBadge.vue

@@ -20,15 +20,9 @@ import { Status } from '../../typings/common';
 
 export default defineComponent({
   props: {
-    dispatcherStatus: {
+    dispatcherStatus: { type: Number as PropType<Status.ActiveDispatcher | number> },
-      type: Number as PropType<Status.ActiveDispatcher | number>
+    dispatcherTimestamp: { type: Number as PropType<number | null> },
-    },
+    isOnline: { type: Boolean }
-    dispatcherTimestamp: {
-      type: Number as PropType<number | null>
-    },
-    isOnline: {
-      type: Boolean
-    }
   },
   mixins: [dateMixin],
 

src/components/Global/StockList.vue

@@ -22,20 +22,12 @@ export default defineComponent({
   components: { VehicleThumbnail },
 
   props: {
-    trainStockList: {
+    trainStockList: { type: Array as PropType<string[]>, required: true },
-      type: Array as PropType<string[]>,
+    tractionOnly: { type: Boolean, required: false }
-      required: true
-    },
-    tractionOnly: {
-      type: Boolean,
-      required: false
-    }
   },
 
   data() {
-    return {
+    return { apiStore: useApiStore() };
-      apiStore: useApiStore()
-    };
   },
 
   computed: {
@@ -151,7 +143,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-
 .list-wrapper {
   display: flex;
   justify-content: center;

src/components/Global/VehicleThumbnail.vue

@@ -51,7 +51,6 @@ function onImageLoad() {
 
 <style lang="scss" scoped>
 .vehicle-thumbnail {
-  
   position: relative;
   opacity: 0;
   transition: opacity 100ms ease-in-out;

src/components/JournalView/JournalDailyStats.vue

@@ -234,9 +234,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/animations';
-@import '../../styles/JournalStats.scss';
+@use '../../styles/journal-stats';
-@import '../../styles/badge.scss';
+@use '../../styles/responsive';
 
 .daily-stats {
   text-align: left;
@@ -265,7 +265,7 @@ ul.stats-list {
   gap: 0.5em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   h3 {
     text-align: center;
   }

src/components/JournalView/JournalDispatchers/JournalDispatcherEntry.vue

@@ -121,14 +121,8 @@ import StationStatusBadge from '../../Global/StationStatusBadge.vue';
 
 export default defineComponent({
   props: {
-    entry: {
+    entry: { type: Object as PropType<API.DispatcherHistory.Data>, required: true },
-      type: Object as PropType<API.DispatcherHistory.Data>,
+    showExtraInfo: { type: Boolean, required: true }
-      required: true
-    },
-    showExtraInfo: {
-      type: Boolean,
-      required: true
-    }
   },
 
   components: { StationStatusBadge },
@@ -136,10 +130,7 @@ export default defineComponent({
   emits: ['toggleShowExtraInfo'],
 
   data() {
-    return {
+    return { regions, apiStore: useApiStore() };
-      regions,
-      apiStore: useApiStore()
-    };
   },
 
   methods: {
@@ -151,8 +142,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
+@use '../../../styles/responsive';
-@import '../../../styles/badge.scss';
+@use '../../../styles/badge';
 
 .region-badge {
   padding: 0 0.25em;
@@ -207,7 +198,7 @@ export default defineComponent({
   border-radius: 1em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .entry-info {
     flex-direction: column;
     justify-content: center;

src/components/JournalView/JournalDispatchers/JournalDispatcherStats.vue

@@ -32,25 +32,25 @@
         </span>
       </div>
 
-      <hr class="section-separator" />
+      <hr class="section-separator" v-if="stats.issuedTimetables" />
 
-      <div class="info-stats">
+      <div class="info-stats" v-if="stats.issuedTimetables">
-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
           <span>{{ $t('journal.dispatcher-stats.timetables-count') }}</span>
           <span>{{ stats.issuedTimetables.count }}</span>
         </span>
 
-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
           <span>{{ $t('journal.dispatcher-stats.timetables-sum') }}</span>
           <span>{{ stats.issuedTimetables.distanceSum.toFixed(2) }}km</span>
         </span>
 
-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
           <span>{{ $t('journal.dispatcher-stats.timetables-max') }}</span>
           <span>{{ stats.issuedTimetables.distanceMax.toFixed(2) }}km</span>
         </span>
 
-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
           <span>{{ $t('journal.dispatcher-stats.timetables-avg') }}</span>
           <span>{{ stats.issuedTimetables.distanceAvg.toFixed(2) }}km</span>
         </span>
@@ -81,5 +81,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/JournalStats.scss';
+@use '../../../styles/journal-stats';
 </style>

src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue

@@ -104,6 +104,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
+@use '../../../styles/journal-section';
-@import '../../../styles/JournalSection.scss';
 </style>

src/components/JournalView/JournalHeader.vue

@@ -1,11 +1,16 @@
 <template>
   <section class="journal-header">
     <div class="journal-type-options">
-      <router-link class="router-link" active-class="route-active" to="/journal/timetables" exact>
+      <router-link
+        class="route-link"
+        active-class="route-link-active"
+        to="/journal/timetables"
+        exact
+      >
         {{ $t('journal.section-timetables') }}
       </router-link>
       &nbsp;&bull;&nbsp;
-      <router-link class="router-link" active-class="route-active" to="/journal/dispatchers">
+      <router-link class="route-link" active-class="route-link-active" to="/journal/dispatchers">
         {{ $t('journal.section-dispatchers') }}
       </router-link>
     </div>
@@ -39,8 +44,4 @@ export default defineComponent({});
   display: flex;
   justify-content: center;
 }
-
-.router-link.active {
-  color: gold;
-}
 </style>

src/components/JournalView/JournalOptions.vue

@@ -51,7 +51,7 @@
                   :list="propName.toString()"
                 />
 
-                <button class="search-exit" v-if="!propName.toString().startsWith('search-date')">
+                <button class="btn btn--action search-exit" v-if="!propName.toString().startsWith('search-date')">
                   <img
                     src="/images/icon-exit.svg"
                     alt="exit-icon"
@@ -300,6 +300,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/dropdown';
+@use '../../styles/dropdown';
-@import '../../styles/dropdown_filters';
+@use '../../styles/dropdown-filters';
 </style>

src/components/JournalView/JournalStats.vue

@@ -79,14 +79,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
+@use '../../styles/dropdown';
-@import '../../styles/dropdown_filters.scss';
+@use '../../styles/dropdown-filters';
-@import '../../styles/variables.scss';
 
 .dropdown_wrapper.dropdown-align-right {
   left: auto;
   right: 0;
   max-width: 700px;
-  // max-width: 100%;
 }
 </style>

src/components/JournalView/JournalTimetables/EntryDetails.vue

@@ -225,9 +225,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
+@use '../../../styles/responsive';
-@import '../../../styles/responsive.scss';
+@use '../../../styles/badge';
-@import '../../../styles/badge.scss';
 
 .details-body {
   margin-top: 0.5em;
@@ -250,7 +249,7 @@ export default defineComponent({
   margin-top: 1em;
 
   button[data-checked='true'] {
-    color: $accentCol;
+    color: var(--clr-primary);
   }
 }
 
@@ -272,7 +271,7 @@ export default defineComponent({
 
   span:last-child {
     color: black;
-    background-color: $accentCol;
+    background-color: var(--clr-primary);
     border-radius: 0 0.25em 0.25em 0;
   }
 }
@@ -300,7 +299,7 @@ hr {
   }
 }
 
-@include smallScreen() {
+@include responsive.smallScreen{
   .timetable-specs {
     justify-content: center;
   }

src/components/JournalView/JournalTimetables/EntryGeneral.vue

@@ -130,8 +130,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/responsive';
+@use '../../../styles/responsive';
-@import '../../../styles/badge';
+@use '../../../styles/badge';
 
 .item-general {
   display: flex;
@@ -191,7 +191,7 @@ export default defineComponent({
   }
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .item-general {
     flex-direction: column;
     justify-content: center;

src/components/JournalView/JournalTimetables/EntryStatus.vue

@@ -59,7 +59,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
+@use '../../../styles/responsive';
 
 .entry-status {
   display: flex;
@@ -67,7 +67,7 @@ export default defineComponent({
   flex-wrap: wrap;
   gap: 0.5em;
 
-  @include smallScreen() {
+  @include responsive.smallScreen{
     justify-content: center;
   }
 }

src/components/JournalView/JournalTimetables/EntryStops.vue

@@ -187,7 +187,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/badge.scss';
+@use '../../../styles/badge';
 
 .entry-stops {
   word-wrap: break-word;

src/components/JournalView/JournalTimetables/JournalDriverStats.vue

@@ -12,14 +12,6 @@
       <hr class="header-separator" />
 
       <div class="info-stats">
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.driver-stats.timetables') }}</span>
-          <span
-            >{{ store.driverStatsData._count.fulfilled }} /
-            {{ store.driverStatsData._count._all }}</span
-          >
-        </span>
-
         <span class="badge stat-badge">
           <span>{{ $t('journal.driver-stats.longest-timetable') }}</span>
           <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
@@ -29,12 +21,43 @@
           <span>{{ $t('journal.driver-stats.avg-timetable') }}</span>
           <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
         </span>
+      </div>
+
+      <hr class="section-separator" />
+
+      <div class="info-stats">
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.driver-stats.timetables') }}</span>
+          <span>
+            {{ store.driverStatsData._count.fulfilled }} /
+            {{ store.driverStatsData._count._all }}
+
+            <template v-if="store.driverStatsData._count._all > 0">
+              ({{
+                (
+                  (store.driverStatsData._count.fulfilled / store.driverStatsData._count._all) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
+          </span>
+        </span>
 
         <span class="badge stat-badge">
           <span>{{ $t('journal.driver-stats.distance') }}</span>
           <span>
             {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
             {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
+
+            <template v-if="store.driverStatsData._sum.routeDistance > 0">
+              ({{
+                (
+                  (store.driverStatsData._sum.currentDistance /
+                    store.driverStatsData._sum.routeDistance) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
           </span>
         </span>
 
@@ -43,6 +66,16 @@
           <span>
             {{ store.driverStatsData._sum.confirmedStopsCount }} /
             {{ store.driverStatsData._sum.allStopsCount }}
+
+            <template v-if="store.driverStatsData._sum.allStopsCount > 0">
+              ({{
+                (
+                  (store.driverStatsData._sum.confirmedStopsCount /
+                    store.driverStatsData._sum.allStopsCount) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
           </span>
         </span>
       </div>
@@ -68,5 +101,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/JournalStats.scss';
+@use '../../../styles/journal-stats';
 </style>

src/components/JournalView/JournalTimetables/JournalTimetableEntry.vue

@@ -3,14 +3,14 @@
     <!-- General -->
     <EntryGeneral :timetable="timetableEntry" />
 
+    <!-- Route -->
+    <div class="entry-route">
+      <b>{{ timetableEntry.route.replace('|', ' - ') }}</b>
+    </div>
+
+    <hr />
+
     <div @click="toggleExtraInfo" style="cursor: pointer">
-      <!-- Route -->
-      <div class="entry-route">
-        <b>{{ timetableEntry.route.replace('|', ' - ') }}</b>
-      </div>
-
-      <hr />
-
       <!-- Status -->
       <EntryStatus :timetable="timetableEntry" />
     </div>
@@ -134,15 +134,20 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
+@use '../../../styles/responsive';
 
 .timetable-history-entry {
   background-color: #1a1a1a;
   padding: 1em;
 }
 
-@include smallScreen {
+.entry-route {
+  display: flex;
+}
+
+@include responsive.smallScreen{
   .entry-route {
+    justify-content: center;
     text-align: center;
   }
 }

src/components/JournalView/JournalTimetables/JournalTimetablesList.vue

@@ -107,10 +107,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/JournalSection.scss';
+@use '../../../styles/animations';
-@import '../../../styles/animations.scss';
+@use '../../../styles/journal-section';
+@use '../../../styles/responsive';
 
-@include smallScreen {
+@include responsive.smallScreen{
   .journal_item-info {
     text-align: center;
   }

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -148,8 +148,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
-@import '../../styles/sceneryViewTables.scss';
+@use '../../styles/scenery-history-table';
 
 .scenery-dispatchers-history {
   height: 100%;
@@ -194,7 +194,7 @@ export default defineComponent({
   color: springgreen;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .journal-list > div {
     flex-direction: column;
     justify-content: center;

src/components/SceneryView/SceneryHeader.vue

@@ -35,8 +35,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
+@use '../../styles/responsive';
-@import '../../styles/responsive.scss';
 
 .info-header {
   margin-top: 1em;

src/components/SceneryView/SceneryInfo.vue

@@ -59,8 +59,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
-@import '../../styles/badge.scss';
+@use '../../styles/badge';
 
 h3.section-header {
   margin: 0.5em 0;

src/components/SceneryView/SceneryInfo/SceneryInfoAuthors.vue

@@ -27,6 +27,4 @@ export default defineComponent({
     }
   }
 });
-</script>
+</script>
-
-<style scoped></style>

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -102,7 +102,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/icons.scss';
+@use '../../../styles/icons';
 
 .info-icons {
   display: flex;

src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue

@@ -53,8 +53,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-
 ul {
   position: relative;
 }

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -18,7 +18,7 @@
         :key="train.id"
         :data-status="status"
       >
-        <router-link :to="train.driverRouteLocation" class="a-block">
+        <router-link :to="train.driverRouteLocation">
           <span class="user_train"> {{ train.trainNo }}</span>
           <span class="user_name">
             {{ train.driverName }}

src/components/SceneryView/SceneryTimetable.vue

@@ -64,7 +64,7 @@
         </div>
 
         <router-link
-          class="timetable-item a-block"
+          class="timetable-item"
           v-else
           v-for="(row, i) in sceneryTimetables"
           :key="row.train.id + i"
@@ -327,9 +327,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
-@import '../../styles/variables.scss';
+@use '../../styles/animations';
-@import '../../styles/animations.scss';
 
 .scenery-timetable {
   height: 100%;
@@ -436,7 +435,7 @@ export default defineComponent({
 
   &.current {
     font-weight: bold;
-    color: $accentCol;
+    color: var(--clr-primary);
   }
 }
 
@@ -449,7 +448,7 @@ export default defineComponent({
   flex-wrap: wrap;
 
   .info-number {
-    color: $accentCol;
+    color: var(--clr-primary);
   }
 
   .info-route {
@@ -485,7 +484,7 @@ export default defineComponent({
       align-self: center;
       font-size: 0.9em;
 
-      color: $accentCol;
+      color: var(--clr-primary);
 
       &::after {
         content: '\027F6';
@@ -502,7 +501,7 @@ export default defineComponent({
   font-size: 0.85em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen {
   .timetable-item {
     grid-template-columns: 1fr;
   }

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -188,8 +188,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
-@import '../../styles/sceneryViewTables.scss';
+@use '../../styles/scenery-history-table';
 
 .scenery-timetables-history {
   height: 100%;

src/components/StationsView/FilterOption.vue

@@ -66,8 +66,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-
 label {
   position: relative;
   user-select: none;
@@ -98,7 +96,7 @@ label {
     }
 
     &:focus-visible + span {
-      outline: 1px solid $accentCol;
+      outline: 1px solid var(--clr-primary);
     }
   }
 }

src/components/StationsView/StationFilterCard.vue

@@ -379,10 +379,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive';
+@use '../../styles/responsive';
-@import '../../styles/card';
+@use '../../styles/card';
-@import '../../styles/animations';
+@use '../../styles/animations';
-@import '../../styles/variables';
 
 h3.section-header {
   text-align: center;
@@ -432,7 +431,7 @@ h3.section-header {
 .card_title {
   font-size: 2em;
   font-weight: 700;
-  color: $accentCol;
+  color: var(--clr-primary);
 
   text-align: center;
 }
@@ -453,7 +452,7 @@ h3.section-header {
     span {
       min-width: 120px;
       font-weight: bold;
-      color: $accentCol;
+      color: var(--clr-primary);
     }
 
     button {
@@ -527,7 +526,7 @@ h3.section-header {
     }
 
     &:focus-visible + span {
-      outline: 1px solid $accentCol;
+      outline: 1px solid var(--clr-primary);
     }
   }
 }
@@ -575,7 +574,7 @@ h3.section-header {
   margin-bottom: 1em;
 
   &-value {
-    color: $accentCol;
+    color: var(--clr-primary);
     padding: 0.1em 0.2em;
     text-align: center;
   }
@@ -604,14 +603,14 @@ h3.section-header {
       border-radius: 50%;
 
       background: white;
-      border: 3px solid $accentCol;
+      border: 3px solid var(--clr-primary);
       background-color: #333;
 
-      @include smallScreen() {
+      @include responsive.smallScreen{
         width: 15px;
         height: 15px;
         margin-top: -5px;
-        border: 3px solid $accentCol;
+        border: 3px solid var(--clr-primary);
       }
     }
 
@@ -622,14 +621,14 @@ h3.section-header {
       border-radius: 50%;
 
       background: white;
-      border: 4px solid $accentCol;
+      border: 4px solid var(--clr-primary);
 
       cursor: pointer;
 
-      @include smallScreen() {
+      @include responsive.smallScreen{
         width: 1em;
         height: 1em;
-        border: 3px solid $accentCol;
+        border: 3px solid var(--clr-primary);
       }
     }
 
@@ -659,7 +658,7 @@ h3.section-header {
   }
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .slider {
     display: flex;
     flex-wrap: wrap;

src/components/StationsView/StationStats.vue

@@ -8,58 +8,106 @@
 
     <button class="filter-button btn--filled btn--image" @click="toggleDropdown" ref="button">
       <img src="/images/icon-stats.svg" alt="Open filters icon" />
-      <!-- {{ $t('train-stats.stats-button') }} -->
+      {{ $t('station-stats.stats-button') }}
-      <span>STATYSTYKI</span>
     </button>
 
     <transition name="dropdown-anim">
       <div class="dropdown_wrapper" v-if="showDropdown">
         <div>
-          <h1 class="text--primary">
+          <h1 class="stats-title text--primary">
             <img src="/images/icon-stats.svg" alt="Open filters icon" />
-            {{ $t('train-stats.title') }}
+            {{ $t('station-stats.title') }}
           </h1>
 
           <hr style="margin: 0.5em 0" />
 
-          <ul class="stats-list">
+          <div v-if="uFactor > -1 || avgTimetableCount > -1 || trackCount.all > 0">
-            <li>
+            <div class="badges-container">
-              <span>
+              <div class="badge stat-badge">
-                {{ $t('station-stats.u-factor') }}
+                <span>
-                <a
+                  {{ $t('station-stats.u-factor') }}
-                  href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
+                  <a
-                  target="_blank"
+                    href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
-                  :data-tooltip="$t('station-stats.u-factor-tooltip')"
+                    target="_blank"
-                  >(?)</a
+                    :data-tooltip="$t('station-stats.u-factor-tooltip')"
-                >:
+                    >(?)</a
-              </span>
+                  >:
-              <b class="u-factor" :style="calculateFactorStyle()">
+                </span>
-                {{ uFactor.toFixed(2) }}
+
-              </b>
+                <span>
-            </li>
+                  <b class="u-factor" :style="calculateFactorStyle()">
-            <li>
+                    {{ uFactor >= 0 ? uFactor.toFixed(2) : '---' }}
-              {{ $t('station-stats.avg-timetable-count') }}
+                  </b>
-              <b>{{ avgTimetableCount.toFixed(2) }}</b>
+                </span>
-            </li>
+              </div>
-            <li>
+
-              {{ $t('station-stats.single-track-count') }}
+              <div class="badge stat-badge">
-              <b>{{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
+                <span>{{ $t('station-stats.avg-timetable-count') }}</span>
-            </li>
+                <span>
-            <li>
+                  <b>{{ avgTimetableCount >= 0 ? avgTimetableCount.toFixed(2) : '---' }}</b>
-              {{ $t('station-stats.double-track-count') }}
+                </span>
-              <b>{{ trackCount.twoWay }}</b>
+              </div>
-              (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
+            </div>
-            </li>
+
-            <li>
+            <hr style="margin: 0.5em 0" />
-              {{ $t('station-stats.cross-sceneries') }}
+
-              <b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
+            <div class="badges-container">
-            </li>
+              <div class="badge stat-badge">
-            <li>
+                <span>{{ $t('station-stats.single-track-count') }}</span>
-              {{ $t('station-stats.open-spawns') }} <b>{{ spawnCount.passenger }}</b> - PAS /
+                <span>
-              <b>{{ spawnCount.freight }}</b> - TOW / <b>{{ spawnCount.loco }}</b> - LUZ /
+                  <b> {{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
-              <b>{{ spawnCount.all }}</b> - ALL
+                </span>
-            </li>
+              </div>
-          </ul>
+
+              <div class="badge stat-badge">
+                <span>{{ $t('station-stats.double-track-count') }}</span>
+                <span>
+                  <b>{{ trackCount.twoWay }}</b> (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.cross-sceneries') }}</span>
+                <span>
+                  <b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
+                </span>
+              </div>
+            </div>
+
+            <hr style="margin: 0.5em 0" />
+
+            <div class="badges-container">
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-all') }}</span>
+                <span>
+                  <b>{{ spawnCount.all }}</b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-pas') }}</span>
+                <span>
+                  <b>{{ spawnCount.passenger }}</b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-freight') }}</span>
+                <span>
+                  <b>{{ spawnCount.freight }}</b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-loco') }}</span>
+                <span>
+                  <b>{{ spawnCount.loco }}</b>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="no-data" v-else>{{ $t('station-stats.no-stats') }}</div>
         </div>
 
         <div tabindex="0" @focus="() => (showDropdown = false)"></div>
@@ -86,9 +134,9 @@ export default defineComponent({
     },
 
     calculateFactorStyle() {
-      if (this.uFactor == 0) return '';
+      if (this.uFactor <= 0) return '';
 
-      const norm = this.uFactor == 0 ? 1 : Math.max(Math.min(this.uFactor / 2, 1), 0);
+      const norm = Math.max(Math.min(this.uFactor / 2, 1), 0);
       const lerp = 120 * norm;
 
       return `color: hsl(${lerp}, 100%, 60%)`;
@@ -105,7 +153,7 @@ export default defineComponent({
         (train) => train.region == this.mainStore.region.id
       );
 
-      return activeDispatchers.length != 0 ? activeTrains.length / activeDispatchers.length : 0;
+      return activeDispatchers.length != 0 ? activeTrains.length / activeDispatchers.length : -1;
     },
 
     avgTimetableCount() {
@@ -118,7 +166,7 @@ export default defineComponent({
         return acc;
       }, 0);
 
-      if (regionSceneries.length == 0) return 0;
+      if (regionSceneries.length == 0) return -1;
 
       return timetableCountSum / regionSceneries.length;
     },
@@ -135,6 +183,8 @@ export default defineComponent({
           (acc, st) => {
             const { routes } = st.generalInfo!;
 
+            acc.all++;
+
             if (
               routes.single.filter((r) => !r.isInternal).length > 0 &&
               routes.double.filter((r) => !r.isInternal).length > 0
@@ -163,7 +213,8 @@ export default defineComponent({
             twoWay: 0,
             twoWayElectric: 0,
             crossTrack: 0,
-            crossTrackElectric: 0
+            crossTrackElectric: 0,
+            all: 0
           }
         );
     },
@@ -190,15 +241,18 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
+@use '../../styles/dropdown';
-@import '../../styles/badge.scss';
+@use '../../styles/badge';
+@use '../../styles/responsive';
 
-h1 img {
+h1.stats-title img {
   vertical-align: text-bottom;
 }
 
-h3 {
+.badges-container {
-  margin: 0.5em 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
 }
 
 .u-factor {
@@ -219,19 +273,14 @@ h3 {
   }
 }
 
-ul.stats-list {
+.no-data {
-  list-style: disc;
+  font-size: 1.1em;
-  padding-left: 1em;
+  color: #ccc;
-  margin-top: 1em;
-
-  & > li {
-    margin: 0.25em 0;
-  }
 }
 
-@include smallScreen {
+@include responsive.smallScreen {
-  .filter-button span {
+  h1.stats-title {
-    display: none;
+    text-align: center;
   }
 }
 </style>

src/components/StationsView/StationTable.vue

@@ -400,9 +400,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
-@import '../../styles/variables.scss';
+@use '../../styles/icons';
-@import '../../styles/icons.scss';
+
+@use 'sass:color';
 
 $rowCol: #424242;
 
@@ -435,7 +436,7 @@ table {
   }
 
   thead tr {
-    background-color: $bgCol;
+    background-color: var(--clr-bg3);
   }
 
   thead th {
@@ -477,7 +478,7 @@ table {
     }
 
     padding: 0.5em 0.25em;
-    background-color: $bgCol;
+    background-color: var(--clr-bg3);
     white-space: pre-wrap;
 
     cursor: pointer;
@@ -504,13 +505,13 @@ tr,
   vertical-align: middle;
 
   &:nth-child(even) {
-    background-color: lighten($rowCol, 5);
+    background-color: color.adjust($rowCol, $lightness: 5%);
     color: white;
   }
 
   &:hover,
   &:focus {
-    background-color: lighten($rowCol, 20);
+    background-color: color.adjust($rowCol, $lightness: 15%);
   }
 
   td {
@@ -524,7 +525,7 @@ tr,
       opacity: 0.2;
     }
 
-    @include smallScreen() {
+    @include responsive.smallScreen{
       margin: 0;
       padding: 0.3em 0.5em;
       font-size: 1em;
@@ -537,7 +538,7 @@ tr,
   max-width: 200px;
 
   &.default {
-    color: $accentCol;
+    color: var(--clr-primary);
   }
 
   &.nonPublic {

src/components/TrainsView/TrainInfo.vue

@@ -264,7 +264,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/badge.scss';
+@use '../../styles/badge';
 
 .image-warning {
   height: 1em;
@@ -297,6 +297,7 @@ export default defineComponent({
 .train-info {
   display: flex;
   flex-direction: column;
+  font-size: 1em;
   gap: 0.25em;
 
   background-color: #1a1a1a;

src/components/TrainsView/TrainOptions.vue

@@ -24,31 +24,26 @@
                 @blur="preventKeyDown = false"
                 :placeholder="$t(`options.search-train`)"
               />
-              <button class="search-exit">
+              <button class="btn btn--action search-exit" @click="onInputClear('train')">
-                <img
+                <img src="/images/icon-exit.svg" alt="Trains search clear icon" />
-                  src="/images/icon-exit.svg"
-                  alt="Trains search clear icon"
-                  @click="onInputClear('train')"
-                />
               </button>
             </div>
 
             <div class="search-box">
-              <input
+              <select
-                v-model="searchedDriver"
                 class="search-input"
-                id="driver-search"
+                name="active-trains"
-                name="driver-search"
+                id="active-trains"
-                @focus="preventKeyDown = true"
+                v-model="searchedDriver"
-                @blur="preventKeyDown = false"
+              >
-                :placeholder="$t(`options.search-driver`)"
+                <option value="">{{ $t('options.search-driver') }}</option>
-              />
+                <option v-for="driverName in activeDriverNames" :value="driverName">
-              <button class="search-exit">
+                  {{ driverName }}
-                <img
+                </option>
-                  src="/images/icon-exit.svg"
+              </select>
-                  alt="Driver search clear icon"
+
-                  @click="onInputClear('driver')"
+              <button class="btn btn--action search-exit" @click="onInputClear('driver')">
-                />
+                <img src="/images/icon-exit.svg" alt="Trains search clear icon" />
               </button>
             </div>
           </div>
@@ -101,6 +96,7 @@
 import { defineComponent, inject, PropType } from 'vue';
 import keyMixin from '../../mixins/keyMixin';
 import { TrainFilter, TrainFilterSection } from './typings';
+import { useMainStore } from '../../store/mainStore';
 
 export default defineComponent({
   mixins: [keyMixin],
@@ -120,6 +116,7 @@ export default defineComponent({
   data() {
     return {
       showOptions: false,
+      store: useMainStore(),
       lastSelectedFilter: null as TrainFilter | null,
       TrainFilterSection
     };
@@ -141,6 +138,16 @@ export default defineComponent({
         id,
         value: this.$t(`options.sort-${id}`)
       }));
+    },
+
+    activeDriverNames() {
+      const driverNameSet = new Set<string>();
+
+      this.store.trainList.forEach((train) => {
+        driverNameSet.add(train.driverName);
+      });
+
+      return [...driverNameSet].sort((a, b) => a.localeCompare(b));
     }
   },
 
@@ -195,8 +202,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
+@use '../../styles/dropdown';
-@import '../../styles/dropdown_filters.scss';
+@use '../../styles/dropdown-filters';
 
 .search_content > div {
   margin: 0.5em auto;

src/components/TrainsView/TrainSchedule.vue

@@ -367,7 +367,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
 
 $barClr: #b1b1b1;
 $confirmedClr: #4ae24a;

src/components/TrainsView/TrainStats.vue

@@ -80,7 +80,11 @@
             <h3>{{ $t('train-stats.top-units') }}</h3>
 
             <transition-group tag="ul" name="stats-anim">
-              <li class="badge stat-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>
@@ -221,9 +225,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
+@use '../../styles/dropdown';
-@import '../../styles/badge.scss';
+@use '../../styles/badge';
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
 
 h1 img {
   vertical-align: text-bottom;
@@ -248,7 +252,7 @@ h3 {
   max-width: 600px;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .no-data {
     text-align: center;
   }

src/components/TrainsView/TrainTable.vue

@@ -19,7 +19,7 @@
         >)
       </div>
 
-      <transition-group name="list-anim" tag="ul">
+      <transition-group name="list-anim" tag="div" class="list_wrapper">
         <TrainTableItem v-for="train in trains" :key="train.id" :train="train" />
       </transition-group>
     </div>
@@ -93,8 +93,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
-@import '../../styles/animations.scss';
+@use '../../styles/animations';
 
 .train-table {
   height: calc(100vh - 11em);
@@ -105,6 +105,10 @@ export default defineComponent({
   overflow-x: hidden;
 }
 
+.list_wrapper {
+  padding: 2px; // ensures focused items outline visibility
+}
+
 .table-warning {
   text-align: center;
 

src/components/TrainsView/TrainTableItem.vue

@@ -1,29 +1,27 @@
 <template>
-  <li class="train-item">
+  <router-link :to="train.driverRouteLocation" class="train-item">
-    <router-link class="a-block" :to="train.driverRouteLocation">
+    <div class="item-wrapper">
-      <div class="item-wrapper">
+      <TrainInfo :train="train" />
-        <TrainInfo :train="train" />
 
-        <div class="train-stats">
+      <div class="train-stats">
-          <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+        <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+
+        <div>
+          <span>{{ train.speed }}km/h</span>
 
           <div>
-            <span>{{ train.speed }}km/h</span>
+            <span> {{ train.length }}m</span>
-
+            &bull;
-            <div>
+            <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
-              <span> {{ train.length }}m</span>
+            <span v-if="train.stockList.length > 1">
               &bull;
-              <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
+              {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
-              <span v-if="train.stockList.length > 1">
+            </span>
-                &bull;
-                {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
-              </span>
-            </div>
           </div>
         </div>
       </div>
-    </router-link>
+    </div>
-  </li>
+  </router-link>
 </template>
 
 <script setup lang="ts">
@@ -41,9 +39,10 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
 
 .train-item {
+  display: block;
   background-color: #1a1a1a;
   margin-bottom: 1em;
   width: 100%;
@@ -67,7 +66,7 @@ defineProps({
   line-height: 1.5em;
 }
 
-@include smallScreen() {
+@include responsive.smallScreen {
   .item-wrapper {
     grid-template-columns: 1fr;
     gap: 1em 0;

src/locales/en.json

@@ -157,9 +157,8 @@
     "sort-title": "SORT BY:",
     "filter-title": "FILTER BY:",
     "search-title": "SEARCH:",
-    "search-train-no": "Train no. / #",
+    "search-train": "Train no. / #",
-    "search-train": "Train no.",
+    "search-driver": "Choose a driver...",
-    "search-driver": "Driver name",
     "search-dispatcher": "Dispatcher name",
     "search-station": "Scenery name / #",
     "search-author": "Timetable author name",
@@ -332,13 +331,19 @@
     "active-filters": "Attention! You got active filters!"
   },
   "station-stats": {
+    "title": "ONLINE SCENERIES STATS",
+    "stats-button": "STATISTICS",
     "u-factor": "U-factor",
     "u-factor-tooltip": "(?) Current server traffic factor (driver count divided by dispatcher count)",
-    "avg-timetable-count": "Average count of scenery timetables:",
+    "avg-timetable-count": "TT average:",
     "single-track-count": "Single track routes:",
     "double-track-count": "Double track routes:",
-    "cross-sceneries": "Cross-track sceneries (1-track <-> 2-track)",
+    "cross-sceneries": "Cross-track sceneries",
-    "open-spawns": "Open spawns:"
+    "open-spawns-all": "Spawns (ALL):",
+    "open-spawns-pas": "Spawns (PAS):",
+    "open-spawns-freight": "Spawns (TOW):",
+    "open-spawns-loco": "Spawns (LOK):",
+    "no-stats": "No statistics available for the current region!"
   },
   "trains": {
     "no-trains": "No trains to show here!",
@@ -394,7 +399,7 @@
   },
   "train-stats": {
     "stats-button": "STATISTICS",
-    "title": "STATISTICS ONLINE",
+    "title": "ONLINE TRAINS STATS",
     "timetable-count": "ACTIVE TIMETABLES",
     "avg-speed": "AVG SPEED",
     "avg-timetable": "AVG TIMETABLE",

src/locales/pl.json

@@ -154,9 +154,8 @@
     "sort-title": "SORTUJ WG:",
     "filter-title": "FILTRUJ WG:",
     "search-title": "SZUKAJ:",
-    "search-train-no": "Nr pociągu",
     "search-train": "Nr pociągu / #",
-    "search-driver": "Nick maszynisty",
+    "search-driver": "Wybierz maszynistę...",
     "search-dispatcher": "Nick dyżurnego",
     "search-station": "Nazwa scenerii / #",
     "search-author": "Nick autora rozkładu jazdy",
@@ -328,13 +327,19 @@
     "active-filters": "Uwaga! Masz obecnie aktywne filtry!"
   },
   "station-stats": {
+    "title": "STATYSTYKI AKTYWNYCH SCENERII",
+    "stats-button": "STATYSTYKI",
     "u-factor": "Współczynnik Ugla",
     "u-factor-tooltip": "(?) Współczynnik ruchu na serwerze (liczba maszynistów online dzielona na liczbę dyżurnych ruchu)",
-    "avg-timetable-count": "Średnia liczba rozkładów jazdy na sceneriach:",
+    "avg-timetable-count": "Średnia RJ:",
     "single-track-count": "Szlaki jednotorowe:",
     "double-track-count": "Szlaki dwutorowe:",
-    "cross-sceneries": "Scenerie przejściowe (1-tor <-> 2-tor):",
+    "cross-sceneries": "Scenerie przejściowe:",
-    "open-spawns": "Otwarte spawny:"
+    "open-spawns-all": "Spawny (ALL):",
+    "open-spawns-pas": "Spawny (PAS):",
+    "open-spawns-freight": "Spawny (TOW):",
+    "open-spawns-loco": "Spawny (LOK):",
+    "no-stats": "Brak statystyk online dla wybranego serwera!"
   },
   "trains": {
     "no-trains": "Brak pociągów do wyświetlenia!",
@@ -381,7 +386,7 @@
   },
   "train-stats": {
     "stats-button": "STATYSTYKI",
-    "title": "STATYSTYKI ONLINE",
+    "title": "STATYSTYKI AKTYWNYCH POCIĄGÓW",
     "timetable-count": "AKTYWNE RJ",
     "avg-speed": "ŚREDNIA PRĘDKOŚĆ",
     "avg-timetable": "ŚREDNI RJ",

src/store/apiStore.ts

@@ -53,8 +53,6 @@ export const useApiStore = defineStore('apiStore', {
     },
 
     updateTick(t: number) {
-      if (this.dataStatuses.connection == Status.Data.Offline) return;
-
       // Static data refresh
       if (t >= this.nextDataCheckTime) {
         this.fetchDonatorsData();

src/styles/_badge.scss

@@ -1,5 +1,4 @@
-@import 'variables.scss';
+@use 'responsive';
-@import 'responsive.scss';
 
 .badge {
   font-weight: 600;
@@ -9,7 +8,7 @@
 
   margin: 0.25em;
 
-  span {
+  & > span {
     display: inline-block;
     background: #585858;
     padding: 0.2em 0.4em;
@@ -23,7 +22,7 @@
 
     text-align: center;
 
-    @include smallScreen() {
+    @include responsive.smallScreen{
       font-size: 1em;
     }
   }
@@ -131,7 +130,7 @@
   color: white;
 
   & > span:first-child {
-    background-color: $accentCol;
+    background-color: var(--clr-primary);
     color: black;
   }
 }

src/styles/_card.scss

@@ -1,5 +1,4 @@
-@import './variables.scss';
+@use 'responsive';
-@import './responsive.scss';
 
 .card-dimmer {
   position: fixed;
@@ -46,7 +45,7 @@
   }
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .card {
     max-height: 85vh;
   }

src/styles/_dropdown-filters.scss

@@ -1,6 +1,5 @@
-@import 'search_box.scss';
+@use 'search-box';
-@import 'responsive.scss';
+@use 'responsive';
-@import 'variables.scss';
 
 .actions-bar {
   display: flex;
@@ -51,7 +50,7 @@ h1.option-title {
 }
 
 .sort-option[data-selected='true'] {
-  color: $accentCol;
+  color: var(--clr-primary);
   font-weight: bold;
 }
 
@@ -73,15 +72,6 @@ h1.option-title {
   .search {
     margin: 0.5em auto;
   }
-
-  .search-box {
-    .search-exit {
-      position: absolute;
-      transform: translateY(-50%);
-      top: 50%;
-      right: 0;
-    }
-  }
 }
 
 .options_actions {
@@ -95,7 +85,7 @@ h1.option-title {
   }
 }
 
-@include smallScreen() {
+@include responsive.smallScreen{
   h1 {
     text-align: center;
 

src/styles/_dropdown.scss

@@ -1,5 +1,4 @@
-@import 'responsive.scss';
+@use 'responsive';
-@import 'variables.scss';
 
 .dropdown-anim {
   &-enter-from,
@@ -29,9 +28,9 @@
   left: 0;
   top: calc(100% + 0.5em);
 
-  background-color: $bgCol;
+  background-color: var(--clr-bg3);
   // box-shadow: 0 5px 10px 2px #0f0f0f;
-  box-shadow: 0 0 5px 1px $accentCol;
+  box-shadow: 0 0 5px 1px var(--clr-primary);
 
   width: 100%;
   max-width: 550px;
@@ -40,7 +39,7 @@
   z-index: 100;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .dropdown_wrapper {
     font-size: 1.1em;
     max-width: 100%;

src/styles/_global.scss

@@ -1,6 +1,5 @@
-@import 'fonts';
+@use 'fonts';
-@import 'variables';
+@use 'responsive';
-@import 'responsive';
 
 :root {
   --clr-primary: #ffc014;
@@ -8,6 +7,7 @@
 
   --clr-bg: #4d4d4d;
   --clr-bg2: #1b1b1b;
+  --clr-bg3: #1d1d1d;
 
   --clr-accent: #1085b3;
   --clr-accent2: #ff3d5d;
@@ -18,7 +18,7 @@
   --clr-pn: #ffd000;
 
   --clr-error: #fa3636;
-  --clr-warning: #c59429;
+  --clr-warning: #ffe15b;
 
   --clr-donator: #f7a4ff;
 
@@ -60,11 +60,21 @@ body {
   overflow-x: hidden;
   position: relative;
 
+  font-size: 16px;
+
+  @include responsive.smallScreen {
+    font-size: calc(0.65rem + 0.85vw);
+  }
+
+  @include responsive.screenLandscape {
+    font-size: calc(0.45rem + 0.8vw);
+  }
+
   &.no-scroll {
     overflow-y: hidden;
     padding-right: var(--no-scroll-padding);
 
-    @include smallScreen() {
+    @include responsive.smallScreen {
       padding: 0;
     }
   }
@@ -108,11 +118,11 @@ input {
 }
 
 *:focus-visible {
-  outline: 1px solid $accentCol;
+  outline: 1px solid var(--clr-primary);
 }
 
 .title {
-  color: $accentCol;
+  color: var(--clr-primary);
   font-weight: 600;
 
   padding: 0.35em 0;
@@ -130,26 +140,29 @@ a {
   color: inherit;
 }
 
-a:not(.a-block):not(.a-button):not(.a-row) {
-  display: inline-block;
-
-  transition: color 0.3s;
-
-  &:hover,
-  &:focus {
-    color: $accentCol;
-    border: none;
-  }
-}
-
-a.a-block {
-  display: block;
-}
-
 a.a-row {
   display: table-row;
 }
 
+a:focus-visible {
+  outline: 1px solid var(--clr-primary);
+}
+
+.route-link {
+  margin: 0 0.2em;
+  transition: color 100ms;
+
+  &-active,
+  &[data-active='true'] {
+    color: var(--clr-primary);
+    font-weight: bold;
+  }
+
+  &:hover {
+    color: var(--clr-primary);
+  }
+}
+
 ul {
   padding: 0;
   list-style: none;
@@ -292,7 +305,7 @@ a.a-button {
     width: 1.3em;
   }
 
-  @include smallScreen() {
+  @include responsive.smallScreen {
     bottom: 1em;
     right: 0;
     left: 50%;
@@ -330,7 +343,7 @@ a.a-button {
   cursor: help;
 }
 
-@include smallScreen {
+@include responsive.smallScreen {
   ::-webkit-scrollbar {
     width: 0.5em;
     height: 0.5em;

src/styles/_journal-section.scss

@@ -1,5 +1,5 @@
-@import 'responsive.scss';
+@use 'responsive';
-@import 'animations.scss';
+@use 'animations';
 
 .journal-list {
   display: flex;
@@ -12,7 +12,7 @@
 .list_wrapper {
   overflow-y: auto;
   height: calc(100vh - 12.5em);
-  min-height: 500px;
+  min-height: 650px;
   margin-top: 0.5em;
   position: relative;
 
@@ -68,7 +68,7 @@
   font-size: 1.2em;
 }
 
-@include smallScreen() {
+@include responsive.smallScreen{
   .journal_top-bar {
     justify-content: center;
     flex-wrap: wrap;

src/styles/_journal-stats.scss

@@ -1,6 +1,5 @@
-@import 'variables.scss';
+@use 'responsive';
-@import 'responsive.scss';
+@use 'badge';
-@import 'badge.scss';
 
 .stats-tab {
   position: absolute;
@@ -11,7 +10,7 @@
   width: 100%;
 
   background-color: #1a1a1a;
-  box-shadow: 0 0 5px 1px $accentCol;
+  box-shadow: 0 0 5px 1px var(--clr-primary);
 
   padding: 1em;
   display: flex;
@@ -33,7 +32,7 @@ hr.section-separator {
   gap: 0.5em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .journal-stats {
     text-align: center;
   }

src/styles/_search-box.scss

@@ -1,4 +1,4 @@
-@import 'responsive.scss';
+@use 'responsive';
 
 .search {
   label {
@@ -11,8 +11,9 @@
     position: relative;
 
     display: flex;
+    align-items: center;
+    gap: 0.25em;
 
-    border-radius: 0.5em;
     min-width: 200px;
     margin-right: 0.25em;
   }
@@ -20,6 +21,8 @@
   &-input {
     border: none;
     background-color: #424242;
+    color: white;
+    border-radius: 0.5em;
 
     padding: 0.35em 0.5em;
     width: 100%;
@@ -27,6 +30,7 @@
 
   &-exit {
     background-color: #424242;
+    border-radius: 0.5em;
 
     img {
       vertical-align: middle;
@@ -39,7 +43,7 @@
     max-width: 300px;
   }
 
-  @include smallScreen {
+  @include responsive.smallScreen {
     &-box,
     &-button {
       margin: 0.5em 0 0 0;
@@ -50,3 +54,15 @@
     }
   }
 }
+
+.search-box > i {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  padding-right: 0.5em;
+}
+
+select.search-input {
+
+}

src/styles/variables.scss

@@ -1,11 +0,0 @@
-$primaryCol: #2c2c2c;
-$secondaryCol: #01e733;
-
-$bgCol: #1d1d1d;
-$bgLigtherCol: #5b5b5b;
-
-$errorCol: #ff1919;
-$warningCol: #ffe15b;
-
-$accentCol: #ffc014;
-$accent2Col: #ff3d5d;

src/views/DriverView.vue

@@ -147,7 +147,8 @@ function copyStockToClipboard() {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/responsive';
+@use '../styles/responsive';
+@use 'sass:color';
 
 $viewBgCol: #1a1a1a;
 
@@ -176,7 +177,7 @@ $viewBgCol: #1a1a1a;
   border-radius: 0.5em 0.5em 0 0;
 
   &:hover {
-    background-color: lighten($viewBgCol, 10);
+    background-color: color.adjust($viewBgCol, $lightness: 10%);
   }
 }
 
@@ -209,7 +210,7 @@ $viewBgCol: #1a1a1a;
   gap: 0.5em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   span.hidable {
     display: none;
   }

src/views/JournalDispatchers.vue

@@ -332,5 +332,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/JournalSection.scss';
+@use '../styles/journal-section';
 </style>

src/views/JournalTimetables.vue

@@ -482,5 +482,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/JournalSection.scss';
+@use '../styles/journal-section';
 </style>

src/views/SceneryView.vue

@@ -13,7 +13,7 @@
           :station="stationInfo"
           :onlineScenery="onlineSceneryInfo"
         />
-        
+
         <SceneryInfo :station="stationInfo" :onlineScenery="onlineSceneryInfo" />
       </div>
 
@@ -173,8 +173,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/responsive.scss';
+@use '../styles/responsive';
-@import '../styles/variables.scss';
 
 button.back-btn {
   img {
@@ -193,7 +192,7 @@ button.back-btn {
     text-align: center;
     padding: 2em 1em;
 
-    color: $warningCol;
+    color: var(--clr-warning);
 
     display: inline-block;
 
@@ -275,7 +274,7 @@ button.back-btn {
   .checkpoint_item {
     &.current {
       font-weight: bold;
-      color: $accentCol;
+      color: var(--clr-primary);
     }
 
     &:not(:last-child)::after {
@@ -286,7 +285,7 @@ button.back-btn {
   }
 }
 
-@include midScreen {
+@include responsive.midScreen {
   .scenery-wrapper {
     grid-template-columns: 1fr;
     gap: 0;
@@ -304,7 +303,7 @@ button.back-btn {
   }
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .scenery-left {
     max-height: 100vh;
   }

src/views/StationsView.vue

@@ -4,7 +4,7 @@
       <div class="stations-options">
         <StationFilterCard
           :showCard="filterCardOpen"
-          :exit="(filterCardOpen = false)"
+          :exit="filterCardOpen = false"
           ref="filterCardRef"
         />
 
@@ -78,8 +78,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/variables.scss';
+@use '../styles/responsive';
-@import '../styles/responsive.scss';
 
 .stations-view {
   position: relative;
@@ -107,15 +106,13 @@ export default defineComponent({
 button.btn-donation {
   margin-left: auto;
 
-  $btnColor: #254069;
+  background-color: #254069;
-
-  background-color: $btnColor;
 
   &:hover {
-    background-color: lighten($btnColor, 5%);
+    background-color: #2e4f81;
   }
 
-  @include smallScreen {
+  @include responsive.smallScreen {
     span {
       display: none;
     }

src/views/TrainsView.vue

@@ -114,7 +114,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/responsive.scss';
+@use '../styles/responsive';
 
 .trains-view {
   position: relative;
@@ -134,7 +134,7 @@ export default defineComponent({
   margin-bottom: 0.5em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen {
   .trains_topbar {
     justify-content: space-between;
   }

vite.config.ts

@@ -1,17 +1,22 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { VitePWA } from 'vite-plugin-pwa';
+import path from 'path';
 
 export default defineConfig({
-  server: {
+  server: { port: 5123, open: true },
-    port: 5001,
+  preview: { port: 4001, open: true },
-    open: true
-  },
-  preview: {
-    port: 4001,
-    open: true
-  },
   publicDir: 'public',
+  css: {
+    preprocessorOptions: {
+      scss: { additionalData: `@use '@/styles/global';`, silenceDeprecations: ['legacy-js-api'] }
+    }
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
   plugins: [
     vue(),
     VitePWA({
@@ -26,20 +31,15 @@ export default defineConfig({
           {
             urlPattern:
               /^https:\/\/stacjownik.spythere.eu\/api\/(getVehicles|getDonators|getSceneries)/i,
-            handler: 'StaleWhileRevalidate',
+            handler: 'NetworkFirst',
             options: {
               cacheName: 'stacjownik-api-cache',
-              cacheableResponse: {
+              cacheableResponse: { statuses: [0, 200] }
-                statuses: [0, 200]
-              }
             }
-          },
+          }
         ]
       },
-      devOptions: {
+      devOptions: { enabled: true, suppressWarnings: true }
-        enabled: true,
-        suppressWarnings: true
-      }
     })
   ],
   build: {