-
+
{{ 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%;