poprawki layoutu aplikacji

src/components/TrainsView/TrainInfo.vue

@@ -246,10 +246,6 @@ export default defineComponent({
     font-size: 1.15em;
   }
 
-  .train-stats {
-    font-size: 1.1em;
-  }
-
   .general-info,
   .general-status,
   .general-timetable {

src/components/TrainsView/TrainOptions.vue

@@ -159,9 +159,6 @@ export default defineComponent({
     },
 
     onFilterChange(filter: TrainFilter) {
-      // if (this.lastSelectedFilter?.id === filter.id)
-      //   this.trainFilterList.forEach((tf) => (tf.isActive = filter.id === tf.id));
-
       filter.isActive = !filter.isActive;
       this.lastSelectedFilter = filter;
     },

src/components/TrainsView/TrainTable.vue

@@ -1,34 +1,31 @@
 <template>
-  <div class="train-table">
-    <transition name="anim" mode="out-in">
-      <div :key="store.dataStatuses.trains">
-        <div class="table-info" v-if="store.isOffline">
-          {{ $t('app.offline') }}
-        </div>
+  <div>
+    <transition-group name="list-anim" tag="ul" class="train-list">
+      <li class="table-info" key="offline" v-if="store.isOffline">
+        {{ $t('app.offline') }}
+      </li>
 
-        <Loading v-else-if="trains.length == 0 && store.dataStatuses.trains == 0" />
+      <Loading v-else-if="trains.length == 0 && store.dataStatuses.trains == 0" key="loading" />
 
-        <div
-          class="table-info no-trains"
-          v-else-if="trains.length == 0 && store.dataStatuses.trains != 0"
-        >
-          {{ $t('trains.no-trains') }}
-        </div>
+      <li
+        class="table-info"
+        key="no-trains"
+        v-else-if="trains.length == 0 && store.dataStatuses.trains != 0"
+      >
+        {{ $t('trains.no-trains') }}
+      </li>
 
-        <transition-group name="list-anim" tag="ul" class="train-list" v-else>
-          <li
-            class="train-row"
-            v-for="train in currentTrains"
-            :key="train.trainId"
-            tabindex="0"
-            @click.stop="selectModalTrain(train.trainId, $event.currentTarget)"
-            @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
-          >
-            <TrainInfo :train="train" />
-          </li>
-        </transition-group>
-      </div>
-    </transition>
+      <li
+        class="train-row"
+        v-for="train in currentTrains"
+        :key="train.trainId"
+        tabindex="0"
+        @click.stop="selectModalTrain(train.trainId, $event.currentTarget)"
+        @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
+      >
+        <TrainInfo :train="train" />
+      </li>
+    </transition-group>
   </div>
 </template>
 
@@ -104,6 +101,10 @@ export default defineComponent({
   }
 }
 
+.train-table {
+  position: relative;
+}
+
 .table-info {
   text-align: center;
 
@@ -149,6 +150,7 @@ img.train-image {
 .train {
   &-list {
     position: relative;
+    overflow-y: hidden;
 
     @include smallScreen() {
       width: 100%;