hotfixy wyglądu

src/App.scss

@@ -1,71 +0,0 @@
-@import './styles/responsive.scss';
-@import './styles/variables.scss';
-@import './styles/global.scss';
-@import './styles/animations.scss';
-
-.route {
-  margin: 0 0.2em;
-
-  &-active,
-  &[data-active='true'] {
-    color: $accentCol;
-    font-weight: bold;
-  }
-}
-
-// APP
-#app {
-  color: white;
-  font-size: 1rem;
-  overflow-x: hidden;
-
-  @include smallScreen() {
-    font-size: calc(0.65rem + 0.8vw);
-  }
-
-  @include screenLandscape() {
-    font-size: calc(0.45rem + 0.8vw);
-  }
-}
-
-// CONTAINER
-.app_container {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  grid-template-columns: 100%;
-
-  min-height: 100vh;
-}
-
-.app_main {
-  padding: 0 0.5em;
-}
-
-.warning {
-  background-color: firebrick;
-  text-align: center;
-  padding: 0.5em 0.4em;
-  max-width: 1100px;
-  margin: 0 auto;
-
-  border-radius: 0 0 1em 1em;
-}
-
-// FOOTER
-footer.app_footer {
-  max-width: 100%;
-  padding: 0.5em;
-
-  img {
-    width: 1.1em;
-    vertical-align: text-bottom;
-  }
-
-  z-index: 10;
-
-  background: #111;
-  color: white;
-
-  text-align: center;
-  vertical-align: middle;
-}

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app_container">
+  <div class="app_container" v-cloak>
     <transition name="modal-anim">
       <keep-alive>
         <TrainModal v-if="store.chosenModalTrainId" />
@@ -175,4 +175,74 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" src="./App.scss"></style>
+<style lang="scss">
+@import './styles/global';
+@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;
+
+  @include smallScreen() {
+    font-size: calc(0.65rem + 0.8vw);
+  }
+
+  @include screenLandscape() {
+    font-size: calc(0.45rem + 0.8vw);
+  }
+}
+
+// CONTAINER
+.app_container {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 100%;
+
+  min-height: 100vh;
+}
+
+.app_main {
+  padding: 0 0.5em;
+}
+
+.warning {
+  background-color: firebrick;
+  text-align: center;
+  padding: 0.5em 0.4em;
+  max-width: 1100px;
+  margin: 0 auto;
+
+  border-radius: 0 0 1em 1em;
+}
+
+// FOOTER
+footer.app_footer {
+  max-width: 100%;
+  padding: 0.5em;
+
+  img {
+    width: 1.1em;
+    vertical-align: text-bottom;
+  }
+
+  z-index: 10;
+
+  background: #111;
+  color: white;
+
+  text-align: center;
+  vertical-align: middle;
+}
+</style>

src/components/StationsView/StationTable.vue

@@ -286,7 +286,9 @@
           </tbody>
         </table>
 
-        <Loading v-if="apiStore.dataStatuses.connection == Status.Loading" />
+        <Loading
+          v-if="apiStore.dataStatuses.connection == Status.Loading && stations.length == 0"
+        />
 
         <div class="no-stations" v-else-if="stations.length == 0">
           {{ $t('sceneries.no-stations') }}

src/mixins/trainInfoMixin.ts

@@ -148,11 +148,6 @@ export default defineComponent({
       if (distance < 1000) return `${distance}m`;
 
       return `${(distance / 1000).toPrecision(2)}km`;
-    },
-
-    onImageError(e: Event) {
-      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = '/images/icon-unknown.png';
     }
   }
 });

src/router/index.ts

@@ -1,6 +1,4 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
-import JournalDispatchersVue from '../views/JournalDispatchers.vue';
-import JournalTimetablesVue from '../views/JournalTimetables.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -38,7 +36,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/journal/timetables',
     name: 'JournalTimetables',
-    component: JournalTimetablesVue,
+    component: () => import('../views/JournalTimetables.vue'),
     props: (route) => ({
       region: route.query.region
     })
@@ -46,7 +44,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/journal/dispatchers',
     name: 'JournalDispatchers',
-    component: JournalDispatchersVue,
+    component: () => import('../views/JournalDispatchers.vue'),
     props: (route) => ({
       region: route.query.region
     })

src/styles/global.scss

@@ -1,4 +1,6 @@
-@import 'fonts.scss';
+@import 'fonts';
+@import 'variables';
+@import 'responsive';
 
 :root {
   --clr-primary: #ffc014;