poprawki layoutu aplikacji

src/App.scss

@@ -56,26 +56,19 @@
 
 // CONTAINER
 .app_container {
-  display: flex;
+  // display: flex;
-  flex-flow: column;
+  // flex-flow: column;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 100%;
 
   min-height: 100vh;
-
-  header {
-    flex: 0 0 auto;
 }
 
-  main {
+.app_main {
-    flex: 1 1 auto;
-
   padding: 0 0.5em;
 }
 
-  footer {
-    flex: 0 1 0.2em;
-  }
-}
-
 .warning {
   background-color: firebrick;
   text-align: center;

src/App.vue

@@ -72,7 +72,7 @@ export default defineComponent({
     window.addEventListener('offline', () => {
       this.store.isOffline = true;
 
-      this.store.activeData.sceneries = [];
+      this.store.activeData.activeSceneries = [];
       this.store.activeData.trains = [];
       this.store.activeData.connectedSocketCount = 0;
 

src/components/StationsView/StationTable.vue

@@ -388,7 +388,8 @@ section.station_table {
 table {
   white-space: nowrap;
   border-collapse: collapse;
-  min-width: 1350px;
+  // min-width: 1350px;
+  width: 100%;
 
   @include smallScreen() {
     min-width: auto;

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,21 +1,20 @@
 <template>
-  <div class="train-table">
+  <div>
-    <transition name="anim" mode="out-in">
+    <transition-group name="list-anim" tag="ul" class="train-list">
-      <div :key="store.dataStatuses.trains">
+      <li class="table-info" key="offline" v-if="store.isOffline">
-        <div class="table-info" v-if="store.isOffline">
         {{ $t('app.offline') }}
-        </div>
+      </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
+      <li
-          class="table-info no-trains"
+        class="table-info"
+        key="no-trains"
         v-else-if="trains.length == 0 && store.dataStatuses.trains != 0"
       >
         {{ $t('trains.no-trains') }}
-        </div>
+      </li>
 
-        <transition-group name="list-anim" tag="ul" class="train-list" v-else>
       <li
         class="train-row"
         v-for="train in currentTrains"
@@ -28,8 +27,6 @@
       </li>
     </transition-group>
   </div>
-    </transition>
-  </div>
 </template>
 
 <script lang="ts">
@@ -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%;

src/styles/filters_options.scss

@@ -4,6 +4,7 @@
 
 .filters-options {
   margin-bottom: 0.5em;
+  position: relative;
 }
 
 .actions-bar {
@@ -57,7 +58,7 @@ h1.option-title {
   background-color: $bgCol;
   box-shadow: 0 5px 10px 2px #0f0f0f;
 
-  width: 97%;
+  width: 100%;
   max-width: 550px;
 
   padding: 1em;

src/views/TrainsView.vue

@@ -113,7 +113,7 @@ export default defineComponent({
 @import '../styles/responsive.scss';
 
 .trains-view {
-  min-height: 100%;
+  min-height: 600px;
   position: relative;
 }