Animacje, dostępność

src/App.vue

@@ -146,11 +146,11 @@ main {
   gap: 1em 3em;
 
   width: 100vw;
-  max-width: 1200px;
+  max-width: 1300px;
   min-height: 75vh;
 
-  grid-template-columns: 1fr 3fr;
-  grid-template-rows: 250px auto;
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: 350px auto;
 
   padding: 0.5em;
 }

src/components/InputsSection.vue

@@ -1,10 +1,10 @@
 <template>
   <section class="inputs-section">
-    <div class="input inputs_loco">
     <div class="input_container">
       <h2 class="input_header">WYBIERZ POJAZDY / WAGONY</h2>
 
       <div class="input_list type">
+        <label for="locomotives-list">Pojazdy trakcyjne</label>
         <select
           id="locomotives-list"
           v-model="store.chosenLoco"
@@ -21,6 +21,8 @@
       </div>
 
       <div class="input_list type">
+        <label for="locomotives-list">Wagony</label>
+
         <select
           id="carwagons-list"
           v-model="store.chosenCar"
@@ -38,6 +40,7 @@
       </div>
 
       <div class="input_list cargo">
+        <label for="cargo-select">Ładunek (tylko wybrane towarowe)</label>
         <select
           id="cargo-select"
           :disabled="
@@ -80,7 +83,6 @@
         <ready-stock-list />
       </div>
     </div>
-    </div>
   </section>
 </template>
 
@@ -176,6 +178,7 @@ export default defineComponent({
       if (!vehicle) return;
 
       const stockObj: IStock = {
+        id: `${Date.now()}`,
         useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
         type: vehicle.type,
         length: vehicle.length,
@@ -198,6 +201,7 @@ export default defineComponent({
       if (!vehicle) return;
 
       const stockObj: IStock = {
+        id: `${Date.now()}`,
         useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
         type: vehicle.type,
         length: vehicle.length,
@@ -263,7 +267,14 @@ export default defineComponent({
 
   &_list {
     margin: 0.5em 0;
-    display: flex;
+
+    label {
+      display: block;
+
+      font-weight: bold;
+      color: $accentColor;
+      margin-bottom: 0.3em;
+    }
 
     select:focus {
       border-color: $accentColor;
@@ -304,23 +315,13 @@ export default defineComponent({
 
 @media screen and (max-width: $breakpointMd) {
   .inputs-section {
-    flex-direction: column;
-  }
-
-  .input {
     justify-content: center;
-
-    margin: 1em 0;
-
-    _header {
     text-align: center;
   }
 
-    &_container > * {
-      display: flex;
+  .input_actions {
     justify-content: center;
   }
 }
-}
 </style>
 

src/components/ListSection.vue

@@ -19,7 +19,7 @@
           1
         </button>
 
-        <input type="number" name="stock-count" id="stock-count" v-model="chosenStockVehicle.count" />
+        <input type="number" min="1" name="stock-count" id="stock-count" v-model="chosenStockVehicle.count" />
 
         <button class="action-btn" @click="addStock(store.chosenStockListIndex)">
           <img :src="icons.add" alt="add vehicle count" />
@@ -94,18 +94,17 @@
         <div class="stock-info">Lista pojazdów jest pusta!</div>
       </li>
 
+      <transition-group name="stock-list-anim">
         <li
           v-for="(stock, i) in store.stockList"
-        :key="stock.type + i"
+          :key="stock.id"
           :class="{ loco: stock.isLoco }"
           tabindex="0"
           @click="onListItemClick(i)"
-
           @keydown.enter="onListItemClick(i)"
           @keydown.w="moveUpStock(i)"
           @keydown.s="moveDownStock(i)"
           @keydown.backspace="removeStock(i)"
-
           ref="itemRefs"
         >
           <div
@@ -132,6 +131,7 @@
             <span class="stock-info__count"> x{{ stock.count }} </span>
           </div>
         </li>
+      </transition-group>
     </ul>
   </section>
 </template>
@@ -476,14 +476,15 @@ export default defineComponent({
 }
 
 ul {
+  position: relative;
+
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  height: 50vh;
+  min-height: 500px;
   margin-top: 1em;
-
-  max-height: 500px;
-  overflow: auto;
-
   padding: 0.25em;
-
-  border: 2px solid gray;
 }
 
 ul > li {
@@ -491,16 +492,14 @@ ul > li {
   align-items: center;
   justify-content: space-between;
 
+  margin: 0.25em 0;
+
   outline: none;
   cursor: pointer;
 
   &:focus-visible {
     outline: 1px solid white;
   }
-
-  &:hover .item-content {
-    color: $accentColor;
-  }
 }
 
 li > .stock-info {
@@ -508,7 +507,6 @@ li > .stock-info {
 
   color: white;
   font-weight: 700;
-  margin: 0.25em 0;
 
   transition: color 100ms;
 
@@ -552,7 +550,31 @@ li > .stock-info {
   }
 }
 
+.stock-list-anim {
+  &-move, /* apply transition to moving elements */
+  &-enter-active,
+  &-leave-active {
+    transition: all 250ms ease;
+  }
+
+  &-enter-from {
+    opacity: 0;
+    transform: translateY(-25px);
+  }
+
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-leave-active {
+    position: absolute;
+  }
+}
+
 @media screen and (max-width: $breakpointMd) {
+  ul {
+    min-height: auto;
+  }
   li > .stock-info {
     font-size: 0.9em;
   }

src/components/RandomizerCard.vue

@@ -98,7 +98,7 @@
 import { defineComponent } from 'vue';
 
 import carUsage from '../data/carUsage.json';
-import { ICarWagon, ILocomotive, ICargo } from '../types';
+import { ICarWagon, ILocomotive, ICargo, IStock } from '../types';
 
 import randomizeIcon from '../assets/randomize-icon.svg';
 import { useStore } from '../store';
@@ -321,7 +321,8 @@ export default defineComponent({
         return;
       }
 
-      const stockObj = {
+      const stockObj: IStock = {
+        id: `${Date.now()+this.store.stockList.length}`,
         type: loco.type,
         length: loco.length,
         mass: loco.mass,
@@ -348,7 +349,8 @@ export default defineComponent({
         return;
       }
 
-      const stockObj = {
+      const stockObj: IStock = {
+        id: `${Date.now()+this.store.stockList.length}`,
         type: car.type,
         length: car.length,
         mass: car.mass,

src/components/ReadyStockList.vue

@@ -39,7 +39,7 @@
 
 <script lang="ts">
 import { defineComponent, inject } from 'vue';
-import { IStore, ILocomotive, ICarWagon, Vehicle } from '../types';
+import { IStore, ILocomotive, ICarWagon, Vehicle, IStock } from '../types';
 
 import iconEIC from '../assets/EIC.png';
 import iconIC from '../assets/IC.svg';
@@ -138,7 +138,8 @@ export default defineComponent({
     addVehicle(vehicle: Vehicle | null) {
       if (!vehicle) return;
 
-      const stockObj = {
+      const stockObj: IStock = {
+        id: `${Date.now() + this.store.stockList.length}`,
         type: vehicle.type,
         length: vehicle.length,
         mass: vehicle.mass,

src/types.ts

@@ -64,6 +64,7 @@ export interface ICargo {
 }
 
 export interface IStock {
+  id: string;
   useType: string;
   type: string;
   length: number;