chore(scenery): improved thumbnails checkbox design and elements' padding

src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="scenery-timetable-list">
     <!-- Checkpoints derived from station data -->
-    <div class="timetable-checkpoints" v-if="station?.generalInfo?.checkpoints">
+
+    <div
+      class="timetable-checkpoints"
+      v-if="station?.generalInfo && station.generalInfo.checkpoints.length > 0"
+    >
       <template v-for="(ch, i) in station.generalInfo.checkpoints" :key="i">
         <template v-if="i > 0">&bull;</template>
         <router-link
@@ -15,7 +19,10 @@
     </div>
 
     <!-- Missing checkpoints if scenery is not in database -->
-    <div class="timetable-checkpoints" v-else-if="onlineScenery">
+    <div
+      class="timetable-checkpoints"
+      v-else-if="onlineScenery && onlineScenery.missingCheckpoints.length > 0"
+    >
       <template v-for="(ch, i) in onlineScenery.missingCheckpoints" :key="i">
         <template v-if="i > 0">&bull;</template>
         <router-link
@@ -28,45 +35,47 @@
       </template>
     </div>
 
-    <div>
-      <input
-        type="checkbox"
-        name="show-stock-thumbnails"
-        id="show-stock-thumbnails"
-        v-model="showStockThumbnails"
-      />
-      <label for="show-stock-thumbnails">POKAZUJ PODGLĄDY SKŁADÓW</label>
+    <div class="timetable-options">
+      <div class="thumbnails-checkbox">
+        <label>
+          <input type="checkbox" v-model="showStockThumbnails" />
+          <span>POKAZUJ PODGLĄDY SKŁADÓW</span>
+        </label>
+      </div>
     </div>
 
     <div class="list-container">
-      <transition-group name="list-anim" tag="ul">
-        <li
+      <transition-group name="list-anim">
+        <div
           v-if="apiStore.dataStatuses.connection == 0 && sceneryTimetables.length == 0"
           style="padding-bottom: 5em"
           key="list-loading"
         >
           <Loading />
-        </li>
+        </div>
 
-        <li
+        <div
           class="timetable-item empty"
           v-else-if="sceneryTimetables.length == 0 && !onlineScenery"
           key="list-offline"
         >
           {{ $t('scenery.offline') }}
-        </li>
+        </div>
 
-        <li
+        <div
           class="timetable-item empty"
           v-else-if="sceneryTimetables.length == 0"
           key="list-no-timetables"
         >
           {{ $t('scenery.no-timetables') }}
-        </li>
+        </div>
 
-        <li v-else class="timetable-item" v-for="(row, i) in sceneryTimetables" :key="row.train.id">
-          <!-- {{ row.train.id + row.checkpointStop.arrivalTimestamp.toString() }} -->
-          <router-link class="item-link" tabindex="0" :to="row.train.driverRouteLocation">
+        <router-link
+          v-for="row in sceneryTimetables"
+          class="timetable-item"
+          :to="row.train.driverRouteLocation"
+          :key="row.train.id"
+        >
           <div class="item-top">
             <div class="top-general">
               <span class="general-info">
@@ -187,9 +196,7 @@
 
                 <span class="departure-time" v-else>
                   <div v-if="row.checkpointStop.departureDelay == 0">
-                      <span>{{
-                        timestampToTimeString(row.checkpointStop.departureTimestamp)
-                      }}</span>
+                    <span>{{ timestampToTimeString(row.checkpointStop.departureTimestamp) }}</span>
                   </div>
                   <div v-else>
                     <div>
@@ -213,7 +220,6 @@
             <StockList :trainStockList="row.train.stockList" />
           </div>
         </router-link>
-        </li>
       </transition-group>
     </div>
   </div>
@@ -306,7 +312,6 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
   display: grid;
   grid-template-rows: auto auto 1fr;
   overflow: hidden;
-  gap: 1em;
 }
 
 .top-general {
@@ -336,7 +341,7 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
   flex-wrap: wrap;
   font-size: 1.1em;
 
-  margin-top: 0.5em;
+  margin: 0.5em 0;
 }
 
 .checkpoint-item {
@@ -353,21 +358,46 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
   }
 }
 
+.thumbnails-checkbox {
+  label {
+    cursor: pointer;
+    color: #aaa;
+  }
+
+  input {
+    width: 0;
+    outline: none;
+  }
+
+  input:checked + span {
+    color: var(--clr-success);
+  }
+
+  input:focus-visible + span {
+    outline: 1px solid white;
+  }
+}
+
 .list-container {
   position: relative;
   overflow-y: auto;
+  overflow-x: hidden;
+
+  margin-top: 0.5em;
+  padding: 2px;
+  width: 100%;
 }
 
 .timetable-item {
-  margin: 0.5em 0;
+  display: block;
+
+  margin-bottom: 0.5em;
   padding: 0.35em;
-  max-width: 1100px;
+  width: 100%;
 
   overflow: hidden;
   background: #353535;
 
-  z-index: 10;
-
   &.empty {
     padding: 1rem;
     font-size: 1.2em;
@@ -375,13 +405,13 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
   }
 }
 
-.timetable-item > .item-link > .item-top {
+.timetable-item > .item-top {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1.2em 0.5em;
 }
 
-.timetable-item > .item-link > .item-stock-list {
+.timetable-item > .item-stock-list {
   margin-top: 1em;
 }