diff --git a/src/components/TrainsView/TrainStats.vue b/src/components/TrainsView/TrainStats.vue index 866b035..46a0567 100644 --- a/src/components/TrainsView/TrainStats.vue +++ b/src/components/TrainsView/TrainStats.vue @@ -2,28 +2,15 @@
- -

{{ $t("trains.stats") }}

+ +

{{ $t("trains.stats") }}

- -
+ +

- + {{ $t("trains.stats") }}

@@ -83,11 +70,7 @@
{{ $t("trains.stats-locos") }}
-
+
{{ loco[0] }} | {{ loco[1] }}
@@ -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; } diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue index 1fec921..8005a10 100644 --- a/src/components/TrainsView/TrainTable.vue +++ b/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 = 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 + ), }; }, diff --git a/src/styles/card.scss b/src/styles/card.scss index be4633f..b814f3a 100644 --- a/src/styles/card.scss +++ b/src/styles/card.scss @@ -13,7 +13,7 @@ overflow: auto; background: $primaryCol; - box-shadow: 0 0 15px 5px #474747; + box-shadow: 0 0 15px 5px #292929; width: 650px; max-height: 95%;