Poprawki wizualne

src/components/TrainsView/TrainStats.vue

@@ -2,28 +2,15 @@
   <div class="train-stats">
     <div class="stats_button">
       <action-button @click="toggleStatsOpen">
-        <img
-          :src="statsIcon"
-          :alt="$t('trains.stats')"
-        />
-        <p class="xd">{{ $t("trains.stats") }}</p>
+        <img :src="statsIcon" :alt="$t('trains.stats')" />
+        <p>{{ $t("trains.stats") }}</p>
       </action-button>
     </div>
 
-    <transition
-      name="stats-anim"
-      class="stats_wrapper"
-      tag="div"
-    >
-      <div
-        class="stats-body"
-        v-if="trainStatsOpen"
-      >
+    <transition name="stats-anim" class="stats_wrapper" tag="div">
+      <div class="stats-body" v-if="trainStatsOpen">
         <h2 class="stats-header">
-          <img
-            :src="statsIcon"
-            :alt="$t('trains.stats')"
-          />
+          <img :src="statsIcon" :alt="$t('trains.stats')" />
           {{ $t("trains.stats") }}
         </h2>
 
@@ -83,11 +70,7 @@
           <div class="title stats-title">{{ $t("trains.stats-locos") }}</div>
 
           <div class="loco-list stats-content">
-            <div
-              class="loco-item"
-              v-for="(loco, i) in locoList"
-              :key="i"
-            >
+            <div class="loco-item" v-for="(loco, i) in locoList" :key="i">
               {{ loco[0] }} | {{ loco[1] }}
             </div>
           </div>
@@ -259,16 +242,11 @@ export default defineComponent({
   position: relative;
   top: 0;
   z-index: 99;
-
-  &:focus {
-    color: red;
-  }
 }
 
 .stats {
   &_wrapper {
     margin-bottom: 0.5em;
-
     outline: none;
   }
 

src/components/TrainsView/TrainTable.vue

@@ -22,6 +22,8 @@
         :key="i"
         :ref="
           (el) => {
+            observer.observe(el);
+
             if (!train.timetableData) return;
             elList[train.timetableData.timetableId] = el;
           }
@@ -264,32 +266,40 @@ export default defineComponent({
 
     onBeforeUpdate(() => {
       elList.value.length = 0;
+      observer.disconnect();
     });
 
     const timetableDataStatus: ComputedRef<DataStatus> = computed(
       () => store.getters[GETTERS.timetableDataStatus]
     );
 
-    const timetableLoaded = computed(
-      () => timetableDataStatus.value === DataStatus.Loaded
-    );
-    const timetableError = computed(
-      () => timetableDataStatus.value === DataStatus.Error
-    );
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          (entry.target as HTMLElement).classList.add("visible");
+          return;
+        }
 
-    const distanceLimitExceeded = computed(
-      () =>
-        props.computedTrains.findIndex(
-          ({ timetableData }) =>
-            timetableData && timetableData.routeDistance > 200
-        ) != -1
-    );
+        (entry.target as HTMLElement).classList.remove("visible");
+      });
+    });
 
     return {
-      timetableLoaded,
-      timetableError,
-      distanceLimitExceeded,
       elList,
+      observer,
+      timetableLoaded: computed(
+        () => timetableDataStatus.value === DataStatus.Loaded
+      ),
+      timetableError: computed(
+        () => timetableDataStatus.value === DataStatus.Error
+      ),
+      distanceLimitExceeded: computed(
+        () =>
+          props.computedTrains.findIndex(
+            ({ timetableData }) =>
+              timetableData && timetableData.routeDistance > 200
+          ) != -1
+      ),
     };
   },