feature: animacje list

src/components/JournalView/JournalDispatchersList.vue

@@ -1,6 +1,5 @@
 <template>
-  <ul class="journal-list">
-    <!-- <transition-group name="journal-list-anim"> -->
+  <transition-group class="journal-list" tag="ul" name="list-anim">
     <li v-for="item in computedDispatcherHistory" :class="{ sticky: typeof item == 'string' }">
       <div v-if="typeof item == 'string'" class="journal_day">
         {{ item }}
@@ -9,6 +8,7 @@
       <div
         v-else
         class="journal_item"
+        :key="item.timestampFrom + item.dispatcherId" 
         :class="{ online: item.isOnline }"
         @click="navigateToScenery(item.stationName, item.isOnline)"
         @keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
@@ -44,8 +44,7 @@
         </span>
       </div>
     </li>
-    <!-- </transition-group> -->
-  </ul>
+  </transition-group>
 </template>
 
 <script lang="ts">
@@ -95,6 +94,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/animations.scss';
 @import '../../styles/responsive.scss';
 @import '../../styles/JournalSection.scss';
 
@@ -117,9 +117,12 @@ li.sticky {
   display: flex;
   justify-content: space-between;
   align-items: center;
-
   flex-wrap: wrap;
+  text-align: left;
 
+  gap: 0.25em;
+
+  line-height: 1.7em;
   padding: 0.75em;
 
   &.online {
@@ -155,23 +158,12 @@ li.sticky {
 .dispatcher-level {
   display: inline-block;
   text-align: center;
-  line-height: 150%;
 
-  width: 25px;
-  height: 25px;
+  line-height: 1.45em;
+  width: 1.45em;
+  height: 1.45em;
 
-  margin-right: 0.5em;
+  margin-right: 0.45em;
   border-radius: 0.25em;
 }
-
-@include smallScreen() {
-  .journal_item {
-    flex-direction: column;
-
-    span {
-      margin-top: 0.25em;
-      text-align: center;
-    }
-  }
-}
 </style>

src/components/JournalView/JournalTimetablesList.vue

@@ -1,9 +1,9 @@
 <template>
-  <ul class="journal-list">
+  <transition-group class="journal-list" tag="ul" name="list-anim">
     <li
       v-for="{ timetable, sceneryList, ...item } in computedTimetableHistory"
       class="journal_item"
-      :key="timetable.timetableId"
+      :key="timetable.id"
     >
       <div class="journal_item-info">
         <div class="info-top">
@@ -17,7 +17,6 @@
             <b>{{ timetable.trainNo }}</b>
             | <span>{{ timetable.driverName }}</span> |
             <span class="text--grayed">#{{ timetable.id }}</span>
-
             <span v-if="timetable.driverLevel">
               |
               <b :style="calculateTextExpStyle(timetable.driverLevel)">
@@ -25,7 +24,6 @@
               </b>
             </span>
           </span>
-
           <span>
             <b class="info-date">{{ localeDay(timetable.beginDate, $i18n.locale) }}</b>
             <b
@@ -46,26 +44,20 @@
             </b>
           </span>
         </div>
-
         <div class="info-route">
           <b>{{ timetable.route.replace('|', ' - ') }}</b>
         </div>
-
         <hr />
-
         <div class="scenery-list">
           <span v-for="(scenery, i) in sceneryList" :key="scenery.name" :class="{ confirmed: scenery.confirmed }">
             <span v-if="i > 0"> &gt;</span>
             {{ scenery.name }}
-
             <!-- Data odjazdu ze stacji początkowej -->
             <span v-if="i == 0" v-html="scenery.beginDateHTML"></span>
-
             <!-- Data przyjazdu do stacji końcowej -->
             <span v-if="i == sceneryList.length - 1" v-html="scenery.endDateHTML"> </span>
           </span>
         </div>
-
         <!-- Status RJ -->
         <div style="margin: 0.5em 0">
           <span>
@@ -87,7 +79,6 @@
             </b>
           </span>
         </div>
-
         <!-- Nick dyżurnego -->
         <div v-if="timetable.authorName">
           <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
@@ -95,7 +86,6 @@
             <b>{{ timetable.authorName }}</b>
           </router-link>
         </div>
-
         <button
           v-if="timetable.stockString"
           class="btn--option btn--show"
@@ -104,27 +94,22 @@
           {{ $t('journal.stock-info') }}
           <img :src="getIcon(`arrow-${item.showStock.value ? 'asc' : 'desc'}`)" alt="Arrow" />
         </button>
-
         <div class="info-extended" v-if="timetable.stockString && item.showStock.value">
           <hr />
-
           <div>
             <span class="badge info-badge">
               <span>{{ $t('journal.stock-max-speed') }}</span>
               <span>{{ timetable.maxSpeed }}km/h</span>
             </span>
-
             <span class="badge info-badge">
               <span>{{ $t('journal.stock-length') }}</span>
               <span>{{ timetable.stockLength }}m</span>
             </span>
-
             <span class="badge info-badge">
               <span>{{ $t('journal.stock-mass') }}</span>
               <span>{{ Math.floor(timetable.stockMass! / 1000) }}t</span>
             </span>
           </div>
-
           <ul class="stock-list">
             <li v-for="(car, i) in timetable.stockString.split(';')" :key="i">
               <img
@@ -132,14 +117,13 @@
                 :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
                 :alt="car"
               />
-
               <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
             </li>
           </ul>
         </div>
       </div>
     </li>
-  </ul>
+  </transition-group>
 </template>
 
 <script lang="ts">
@@ -219,11 +203,13 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/animations.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/responsive.scss';
 @import '../../styles/badge.scss';
 @import '../../styles/JournalSection.scss';
 
+
 hr {
   margin: 0.25em 0;
 }

src/components/SceneryView/SceneryTimetable.vue

@@ -41,7 +41,7 @@
         {{ $t('scenery.no-timetables') }}
       </span>
 
-      <transition-group name="timetables-anim">
+      <transition-group name="list-anim">
         <div
           class="timetable-item"
           v-for="(scheduledTrain, i) in computedScheduledTrains"
@@ -272,22 +272,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 @import '../../styles/variables.scss';
-
-.timetables-anim-move,
-.timetables-anim-enter-active,
-.timetables-anim-leave-active {
-  transition: all 250ms ease;
-}
-
-.timetables-anim-enter-from,
-.timetables-anim-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
-
-.timetables-anim-leave-active {
-  position: absolute;
-}
+@import '../../styles/animations.scss';
 
 .scenery-timetable {
   height: 100%;
@@ -486,21 +471,6 @@ export default defineComponent({
   font-size: 0.85em;
 }
 
-.scenery-timetable-list-anim {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-active {
-    transition: all 100ms ease-out;
-  }
-
-  &-leave-active {
-    transition: all 100ms ease-out 100ms;
-  }
-}
-
 @include smallScreen {
   .timetable-item {
     grid-template-columns: 1fr;

src/components/TrainsView/TrainTable.vue

@@ -16,8 +16,7 @@
           <b class="warning-timeout">?</b>
           {{ $t('trains.timeout') }}
         </div> -->
-        
-        <ul class="train-list" v-else>
+        <transition-group name="list-anim" tag="ul" class="train-list" v-else>
           <li
             class="train-row"
             v-for="train in currentTrains"
@@ -27,7 +26,7 @@
           >
             <TrainInfo :train="train" />
           </li>
-        </ul>
+        </transition-group>
       </div>
     </transition>
   </div>
@@ -98,6 +97,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
+@import '../../styles/animations.scss';
 
 .anim {
   &-enter-from,