Poprawki z wyglądem

src/components/SceneryView/SceneryTimetable.vue

@@ -16,12 +16,7 @@
         </div>
 
         <ul class="option-list" :class="{ open: listOpen }">
-          <li
+          <li class="option-item" v-for="(cp, i) in stationInfo.checkpoints" :key="i" @click="() => chooseOption(cp.checkpointName)">
-            class="option-item"
-            v-for="(cp, i) in stationInfo.checkpoints"
-            :key="i"
-            @click="() => chooseOption(cp.checkpointName)"
-          >
             <input type="option-radio" name="sort" />
             <label :id="cp.checkpointName">{{ cp.checkpointName }}</label>
           </li>
@@ -31,35 +26,27 @@
 
     <span class="timetable-item loading" v-if="dataStatus == 0">Ładowanie...</span>
 
-    <span
+    <span class="timetable-item empty" v-else-if="computedScheduledTrains.length == 0">Brak aktywnych rozkładów!</span>
-      class="timetable-item empty"
-      v-else-if="computedScheduledTrains.length == 0"
-    >Brak aktywnych rozkładów!</span>
 
     <transition-group name="list-anim">
       <div class="timetable-item" v-for="(scheduledTrain, i) in computedScheduledTrains" :key="i+1">
         <span class="timetable-general">
           <span class="general-info">
-            <router-link
+            <router-link :to="{
-              :to="{
                   name: 'TrainsView',
                   params: {
                     passedSearchedTrain: scheduledTrain.trainNo.toString(),
                   },
-                }"
+                }">
-            >
               <span>
                 <strong>{{ scheduledTrain.category }}</strong>
                 {{ scheduledTrain.trainNo }}
               </span>
             </router-link>|
             <span>
-              <a
+              <a :href="
-                :href="
                     'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId
-                  "
+                  " target="_blank">{{ scheduledTrain.driverName }}</a>
-                target="_blank"
-              >{{ scheduledTrain.driverName }}</a>
             </span>
 
             <div class="info-route">
@@ -93,10 +80,7 @@
             <span class="stop-arrow arrow"></span>
           </span>
           <span class="schedule-departure">
-            <span
+            <span class="departure-time terminates" v-if="scheduledTrain.stopInfo.terminatesHere">KOŃCZY BIEG</span>
-              class="departure-time terminates"
-              v-if="scheduledTrain.stopInfo.terminatesHere"
-            >KOŃCZY BIEG</span>
             <span class="departure-time" v-else>
               {{ scheduledTrain.stopInfo.departureTimeString }} ({{
               scheduledTrain.stopInfo.departureDelay

src/views/HistoryView.vue

@@ -24,32 +24,32 @@
 
       <div class="list">
         <div class="list_wrapper">
-          <div class="list_loading" v-if="dataLoading">POBIERANIE DANYCH...</div>
+          <!-- <div class="list_loading" v-if="dataLoading">POBIERANIE DANYCH...</div> -->
-          <ul class="list_content" v-else-if="computedHistoryList.length != 0">
+          <transition name="list-anim" :key="inputStationName" mode="out-in">
-            <li v-if="currentDispatcherFrom != -1" class="current">
+            <ul class="list_content" v-if="!dataLoading && computedHistoryList.length != 0">
-              <div class="dispatcher-name">{{ currentDispatcher }}</div>
+              <li v-if="currentDispatcherFrom != -1" class="current">
-              <div class="dispatcher-date">
+                <div class="dispatcher-name">{{ currentDispatcher }}</div>
-                <span style="color: #bbb">{{ new Date(currentDispatcherFrom).toLocaleDateString('pl-PL') }}</span>
+                <div class="dispatcher-date">
-                {{ new Date(currentDispatcherFrom).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })}}
+                  <span style="color: #bbb">{{ new Date(currentDispatcherFrom).toLocaleDateString('pl-PL') }}</span>
-              </div>
+                  {{ new Date(currentDispatcherFrom).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })}}
-            </li>
-
-            <li v-for="(history, i) in computedHistoryList" :key="i">
-              <div class="dispatcher-name">{{history.dispatcherName }}</div>
-              <div class="dispatcher-date">
-                <div>
-                  <span style="color: #888">{{history.dispatcherFromDate }}</span>
-                  {{ history.dispatcherFromTime }}
                 </div>
-                <div>
+              </li>
-                  <span style="color: #888">{{ history.dispatcherToDate }}</span>
+              <li v-for="(history, i) in computedHistoryList" :key="i">
-                  {{ history.dispatcherToTime }}
+                <div class="dispatcher-name">{{history.dispatcherName }}</div>
+                <div class="dispatcher-date">
+                  <div>
+                    <span style="color: #888">{{history.dispatcherFromDate }}</span>
+                    {{ history.dispatcherFromTime }}
+                  </div>
+                  <div>
+                    <span style="color: #888">{{ history.dispatcherToDate }}</span>
+                    {{ history.dispatcherToTime }}
+                  </div>
                 </div>
-              </div>
+              </li>
-            </li>
+            </ul>
-          </ul>
+            <div v-if="!dataLoading && inputStationName != ''" class="list_no-info">BRAK ZEBRANYCH DANYCH O RUCHU!</div>
-
+          </transition>
-          <div v-else-if="inputStationName != ''" class="list_no-info">BRAK ZEBRANYCH DANYCH O RUCHU!</div>
         </div>
       </div>
     </div>
@@ -154,7 +154,7 @@ export default class HistoryView extends Vue {
 
 .history {
   &_view {
-    font-size: 1.5em;
+    font-size: 1.2em;
     display: flex;
   }
 
@@ -166,6 +166,23 @@ export default class HistoryView extends Vue {
   }
 }
 
+.list-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease-out;
+  }
+
+  &-enter,
+  &-leave-to {
+    opacity: 0.1;
+    transform: scale(0.95);
+  }
+
+  &-move {
+    transition: transform 100ms;
+  }
+}
+
 .disclaimer {
   color: #aaa;
 }
@@ -243,12 +260,19 @@ export default class HistoryView extends Vue {
     }
   }
 
+  &_content {
+    max-height: 550px;
+    overflow: auto;
+
+    padding: 0.2em 0.5em;
+  }
+
   &_content > li {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
 
     background: #222;
-    padding: 0.5em 0.8em;
+    padding: 0.3em 0.8em;
     margin: 0.3em 0;
 
     gap: 10em;
@@ -269,6 +293,9 @@ export default class HistoryView extends Vue {
       display: flex;
       justify-content: center;
       align-items: center;
+
+      font-size: 1.1em;
+      font-weight: 500;
     }
   }
 }