Poprawki responsywności i dostępu; usprawniono layout

src/App.vue

@@ -15,17 +15,11 @@
       <img :src="logoImage" alt="logo pojazdownik" />
     </header>
     <main>
-      <div id="inputs-area">
+      <InputsSection />
-        <InputsSection />
-      </div>
 
-      <div id="list-area">
+      <TrainImageSection />
-        <ListSection />
-      </div>
 
-      <div id="image-area">
+      <ListSection />
-        <TrainImage />
-      </div>
     </main>
     <footer>
       <div class="text--grayed" style="margin-bottom: 0.25em">
@@ -49,14 +43,14 @@ import ListSection from './components/ListSection.vue';
 
 import logoImage from './assets/logo.svg';
 import { useStore } from './store';
-import TrainImage from './components/TrainImageSection.vue';
+import TrainImageSection from './components/TrainImageSection.vue';
 import RandomizerCard from './components/RandomizerCard.vue';
 
 export default defineComponent({
   components: {
     ListSection,
     InputsSection,
-    TrainImage,
+    TrainImageSection,
     RandomizerCard,
   },
 
@@ -73,16 +67,6 @@ export default defineComponent({
       store,
     };
   },
-  mounted() {
-    window.addEventListener('keydown', (ev) => {
-      if (this.store.vehiclePreviewSrc == '') return;
-
-      if (ev.key.toLowerCase() == 'escape') this.store.vehiclePreviewSrc = '';
-      // if(ev.key.toLowerCase() == 'enter')
-    });
-
-    // window.focus();
-  },
 });
 </script>
 
@@ -162,24 +146,13 @@ main {
   gap: 1em 3em;
 
   width: 100vw;
-  max-width: 1300px;
+  max-width: 1200px;
+  min-height: 75vh;
 
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: 1fr 3fr;
-  grid-template-areas: 'inputs list' 'image list';
+  grid-template-rows: 250px auto;
 
   padding: 0.5em;
-
-  #inputs-area {
-    grid-area: inputs;
-  }
-
-  #list-area {
-    grid-area: list;
-  }
-
-  #image-area {
-    grid-area: image;
-  }
 }
 
 /* FOOTER SECTION */
@@ -191,15 +164,14 @@ footer {
 
 /* MOBILE VIEWS */
 
-@media screen and (max-width: 1100px) {
+@media screen and (max-width: $breakpointMd) {
   main {
+    display: flex;
+    flex-direction: column;
     grid-template-columns: 1fr;
-    grid-template-areas: 'inputs' 'image' 'list';
+    grid-template-rows: 1fr;
-    justify-items: center;
   }
-}
 
-@media screen and (max-width: 800px) {
   #app {
     font-size: calc(0.75vw + 0.6rem);
   }
@@ -213,7 +185,7 @@ footer {
   }
 }
 
-@media screen and (max-width: 650px) {
+@media screen and (max-width: $breakpointSm) {
   header {
     font-size: 0.75em;
 

src/components/InputsSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="inputs">
+  <section class="inputs-section">
     <div class="input inputs_loco">
       <div class="input_container">
         <h2 class="input_header">WYBIERZ POJAZDY / WAGONY</h2>
@@ -10,14 +10,14 @@
             v-model="store.chosenLoco"
             @focus="onVehicleSelect('loco')"
             @input="onVehicleSelect('loco')"
+            @keydown.enter="addVehicle"
+            @keydown.backspace="removeVehicle"
           >
             <option :value="null" disabled>Wybierz pojazd trakcyjny</option>
             <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
               {{ loco.type }}
             </option>
           </select>
-
-          <button class="btn" @click="addVehicle">DODAJ</button>
         </div>
 
         <div class="input_list type">
@@ -26,6 +26,8 @@
             v-model="store.chosenCar"
             @focus="onVehicleSelect('car')"
             @input="onVehicleSelect('car')"
+            @keydown.enter="addVehicle"
+            @keydown.backspace="removeVehicle"
           >
             <option :value="null" disabled>Wybierz wagon</option>
 
@@ -33,15 +35,6 @@
               {{ car.type }}
             </option>
           </select>
-
-          <button
-            class="btn"
-            @click="switchVehicles"
-            :disabled="store.chosenStockListIndex == -1"
-            :data-disabled="store.chosenStockListIndex == -1"
-          >
-            ZAMIEŃ
-          </button>
         </div>
 
         <div class="input_list cargo">
@@ -55,6 +48,10 @@
             data-select="cargo"
             data-ignore-outside="1"
             v-model="store.chosenCargo"
+            @focus="onVehicleSelect('car')"
+            @input="onVehicleSelect('car')"
+            @keydown.enter="addVehicle"
+            @keydown.backspace="removeVehicle"
           >
             <option :value="null" v-if="!store.chosenCar || !store.chosenCar.loadable">brak dostępnych ładunków</option>
             <option :value="null" v-else>próżny</option>
@@ -65,7 +62,20 @@
           </select>
         </div>
 
-        <div class="input_ready-stock">
+        <div class="input_actions">
+          <button class="btn" @click="addVehicle">DODAJ NOWY</button>
+          <button
+            class="btn"
+            @click="switchVehicles"
+            :disabled="store.chosenStockListIndex == -1"
+            :data-disabled="store.chosenStockListIndex == -1"
+          >
+            ZAMIEŃ ZA
+            <b class="text--accent">
+              {{ store.chosenStockListIndex == -1 ? '' : `${store.chosenStockListIndex + 1}.` }}
+            </b>
+          </button>
+
           <button class="btn" @click="setReadyStockList(true)"><b>REALNE ZESTAWIENIA</b></button>
           <ready-stock-list />
         </div>
@@ -75,10 +85,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, provide, ref } from 'vue';
+import { defineComponent } from 'vue';
 
 import ReadyStockList from './ReadyStockList.vue';
-import { IStore, ILocomotive, ICarWagon, IStock } from '../types';
+import { IStock } from '../types';
 import imageMixin from '../mixins/imageMixin';
 import { useStore } from '../store';
 import { isLocomotive } from '../utils/vehicleUtils';
@@ -103,24 +113,24 @@ export default defineComponent({
     };
   },
 
-  mounted() {
+  // mounted() {
-    document.addEventListener('keydown', (ev) => {
+  //   document.addEventListener('keydown', (ev) => {
-      const keyName = ev.key.toLowerCase();
+  //     const keyName = ev.key.toLowerCase();
-      if (keyName == 'enter') {
+  //     if (keyName == 'enter') {
-        ev.preventDefault();
+  //       ev.preventDefault();
-        this.addVehicle();
+  //       this.addVehicle();
-      }
+  //     }
 
-      if (keyName == 'backspace') {
+  //     if (keyName == 'backspace') {
-        if (this.store.stockList.length == 0) return;
+  //       if (this.store.stockList.length == 0) return;
 
-        const lastStock = this.store.stockList.slice(-1)[0];
+  //       const lastStock = this.store.stockList.slice(-1)[0];
 
-        if (lastStock.count > 1) lastStock.count--;
+  //       if (lastStock.count > 1) lastStock.count--;
-        else this.store.stockList.splice(-1);
+  //       else this.store.stockList.splice(-1);
-      }
+  //     }
-    });
+  //   });
-  },
+  // },
 
   computed: {
     locoOptions() {
@@ -149,6 +159,15 @@ export default defineComponent({
       });
     },
 
+    removeVehicle() {
+      if (this.store.stockList.length == 0) return;
+
+      const lastStock = this.store.stockList.slice(-1)[0];
+
+      if (lastStock.count > 1) lastStock.count--;
+      else this.store.stockList.splice(-1);
+    },
+
     switchVehicles() {
       if (this.store.chosenStockListIndex == -1) return;
 
@@ -170,24 +189,6 @@ export default defineComponent({
         supportersOnly: vehicle.supportersOnly,
       };
 
-      let currentStock = this.store.stockList[this.store.chosenStockListIndex];
-
-      // if (isLocomotive(vehicle) && currentStock && currentStock.type == vehicle.type) {
-      //   this.store.stockList[this.store.chosenStockListIndex].count++;
-      //   return;
-      // }
-
-      // if (
-      //   !isLocomotive(vehicle) &&
-      //   currentStock &&
-      //   currentStock.type == vehicle.type &&
-      //   currentStock.cargo?.id == this.store.chosenCargo?.id
-      // ) {
-      //   this.store.stockList[this.store.chosenStockListIndex].count++;
-
-      //   return;
-      // }
-
       this.store.stockList[this.store.chosenStockListIndex] = stockObj;
     },
 
@@ -240,20 +241,19 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../styles/global';
 
-.inputs {
+.inputs-section {
   display: flex;
   justify-content: space-between;
 
+  grid-row: 1;
+  grid-column: 1;
+
   &_car {
     &.disabled {
       opacity: 0.75;
       pointer-events: none;
     }
   }
-
-  @media screen and (max-width: 800px) {
-    flex-direction: column;
-  }
 }
 
 .input {
@@ -263,7 +263,6 @@ export default defineComponent({
 
   &_list {
     margin: 0.5em 0;
-
     display: flex;
 
     select:focus {
@@ -293,12 +292,27 @@ export default defineComponent({
     }
   }
 
-  @media screen and (max-width: 800px) {
+  &_actions {
+    display: flex;
+    flex-wrap: wrap;
+
+    button {
+      margin: 0.5em 0.5em 0 0;
+    }
+  }
+}
+
+@media screen and (max-width: $breakpointMd) {
+  .inputs-section {
+    flex-direction: column;
+  }
+
+  .input {
     justify-content: center;
 
     margin: 1em 0;
 
-    &_header {
+    _header {
       text-align: center;
     }
 

src/components/ListSection.vue

@@ -1,118 +1,139 @@
 <template>
-  <div class="bottom">
+  <section class="stock-list-section">
-    <section class="stock-list">
+    <div class="list_actions">
-      <div class="stock-list_buttons">
+      <button class="btn" @click="downloadStock">POBIERZ POCIĄG</button>
-        <button class="btn" @click="downloadStock">POBIERZ POCIĄG</button>
+      <button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
-        <button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
+      <span class="spacer"></span>
-        <span></span>
+      <button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
-        <button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
+      <button class="btn" @click="store.isRandomizerCardOpen = true">LOSUJ SKŁAD</button>
-        <button class="btn" @click="store.isRandomizerCardOpen = true">LOSUJ SKŁAD</button>
+    </div>
-      </div>
 
-      <div class="stock-list_specs">
+    <div class="stock_actions" v-if="chosenStockVehicle">
-        <div>
+      <b class="no">
-          Masa: <span class="text--accent">{{ store.totalMass }}t</span> | Długość:
+        POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
-          <span class="text--accent">{{ store.totalLength }}m</span>
+      </b>
-          | Vmax pociągu: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
-        </div>
 
-        <!-- <div v-if="store.chosenRealStockName" style="margin-top: 0.25rem">
+      <div class="count">
-          <b>{{ store.chosenRealStockName.toLocaleUpperCase() }}</b>
+        <button class="action-btn" @click="subStock(store.chosenStockListIndex)">
-        </div> -->
+          <img :src="icons.sub" alt="subtract vehicle count" />
-      </div>
+          1
+        </button>
 
-      <div class="stock-list_string">
+        <input type="number" name="stock-count" id="stock-count" v-model="chosenStockVehicle.count" />
-        <button class="btn--text" v-if="store.stockList.length > 0" @click="copyToClipboard">
+
-          Skopiuj pociąg w formie tekstowej do schowka
+        <button class="action-btn" @click="addStock(store.chosenStockListIndex)">
+          <img :src="icons.add" alt="add vehicle count" />
+          1
         </button>
       </div>
 
-      <div class="warnings">
+      <button class="action-btn" @click="moveUpStock(store.chosenStockListIndex)">
-        <div class="warning" v-if="locoNotSuitable">
+        <img :src="icons.higher" alt="move up vehicle" />
-          Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
+        Przenieś wyżej
-        </div>
+      </button>
 
-        <div class="warning" v-if="trainTooLong && store.isTrainPassenger">
+      <button class="action-btn" @click="moveDownStock(store.chosenStockListIndex)">
-          Maksymalna długość składów pasażerskich nie może przekraczać 350m!
+        <img :src="icons.lower" alt="move down vehicle" />
-        </div>
+        Przenieś niżej
+      </button>
 
-        <div class="warning" v-if="trainTooLong && !store.isTrainPassenger">
+      <button class="action-btn" @click="removeStock(store.chosenStockListIndex)">
-          Maksymalna długość składów innych niż pasażerskie nie może przekraczać 650m!
+        <img :src="icons.remove" alt="remove vehicle" />
-        </div>
+        Usuń
+      </button>
+    </div>
 
-        <div class="warning" v-if="trainTooHeavy">
+    <div class="stock_actions no-chosen-vehicle" v-else>Wybierz pojazd z listy poniżej, aby pokazać opcje</div>
-          Ten skład jest za ciężki! Sprawdź
-          <a
-            target="_blank"
-            href="https://docs.google.com/spreadsheets/d/1bFXUsHsAu4youmNz-46Q1HslZaaoklvfoBDS553TnNk/edit"
-          >
-            dopuszczalne masy składów
-          </a>
-        </div>
 
-        <div class="warning" v-if="tooManyLocomotives">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
+    <div class="stock_specs">
+      <div>
+        Masa: <span class="text--accent">{{ store.totalMass }}t</span> | Długość:
+        <span class="text--accent">{{ store.totalLength }}m</span>
+        | Vmax pociągu: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
       </div>
 
-      <ul ref="list">
+      <!-- <div v-if="store.chosenRealStockName" style="margin-top: 0.25rem">
-        <li v-if="store.stockList.length == 0" class="list-empty">
+          <b>{{ store.chosenRealStockName.toLocaleUpperCase() }}</b>
-          <div class="item-content">Lista pojazdów jest pusta!</div>
+        </div> -->
-        </li>
+    </div>
 
-        <li
+    <div class="stock_clipboard-text">
-          v-for="(stock, i) in store.stockList"
+      <button class="btn--text" v-if="store.stockList.length > 0" @click="copyToClipboard">
-          :key="stock.type + i"
+        Skopiuj pociąg w formie tekstowej do schowka
-          :class="{ loco: stock.isLoco }"
+      </button>
-          tabindex="0"
+    </div>
-          ref="itemRefs"
+
+    <div class="stock_warnings">
+      <div class="warning" v-if="locoNotSuitable">
+        Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
+      </div>
+
+      <div class="warning" v-if="trainTooLong && store.isTrainPassenger">
+        Maksymalna długość składów pasażerskich nie może przekraczać 350m!
+      </div>
+
+      <div class="warning" v-if="trainTooLong && !store.isTrainPassenger">
+        Maksymalna długość składów innych niż pasażerskie nie może przekraczać 650m!
+      </div>
+
+      <div class="warning" v-if="trainTooHeavy">
+        Ten skład jest za ciężki! Sprawdź
+        <a
+          target="_blank"
+          href="https://docs.google.com/spreadsheets/d/1bFXUsHsAu4youmNz-46Q1HslZaaoklvfoBDS553TnNk/edit"
         >
-          <div
+          dopuszczalne masy składów
-            class="item-content"
+        </a>
-            @click="onListItemClick(i)"
+      </div>
-            @dragstart="onDragStart(i)"
-            @drop="onDrop($event, i)"
-            @dragover="allowDrop"
-            draggable="true"
-          >
-            <span class="stock__type">
-              <span v-if="i == store.chosenStockListIndex">&bull;</span>
-              {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
-            </span>
 
-            <span class="stock__cargo" v-if="stock.cargo"> {{ stock.cargo.id }} </span>
+      <div class="warning" v-if="tooManyLocomotives">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
-            <span class="stock__length"> {{ stock.length }}m </span>
+    </div>
-            <span class="stock__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
-            <span class="stock__speed"> {{ stock.maxSpeed }}km/h </span>
-          </div>
 
-          <div class="item-actions">
+    <ul ref="list">
-            <div class="count">
+      <li v-if="store.stockList.length == 0" class="list-empty">
-              <button class="action-btn" @click="subStock(i)">
+        <div class="stock-info">Lista pojazdów jest pusta!</div>
-                <img :src="icons.sub" alt="subtract vehicle count" />
+      </li>
-              </button>
 
-              <span>{{ stock.count }} </span>
+      <li
+        v-for="(stock, i) in store.stockList"
+        :key="stock.type + i"
+        :class="{ loco: stock.isLoco }"
+        tabindex="0"
+        @click="onListItemClick(i)"
 
-              <button class="action-btn" @click="addStock(i)">
+        @keydown.enter="onListItemClick(i)"
-                <img :src="icons.add" alt="add vehicle count" />
+        @keydown.w="moveUpStock(i)"
-              </button>
+        @keydown.s="moveDownStock(i)"
-            </div>
+        @keydown.backspace="removeStock(i)"
 
-            <button class="action-btn" @click="moveUpStock(i)">
+        ref="itemRefs"
-              <img :src="icons.higher" alt="move up vehicle" />
+      >
-            </button>
+        <div
+          class="stock-info"
+          @dragstart="onDragStart(i)"
+          @drop="onDrop($event, i)"
+          @dragover="allowDrop"
+          draggable="true"
+        >
+          <span class="stock-info__no" :data-selected="i == store.chosenStockListIndex">
+            <span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
+            {{ i + 1 }}.
+          </span>
 
-            <button class="action-btn" @click="moveDownStock(i)">
+          <span class="stock-info__type">
-              <img :src="icons.lower" alt="move down vehicle" />
+            {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
-            </button>
+          </span>
 
-            <button class="action-btn" @click="removeStock(i)">
+          <span class="stock-info__cargo" v-if="stock.cargo"> {{ stock.cargo.id }} </span>
-              <img :src="icons.remove" alt="remove vehicle" />
+          <span class="stock-info__length"> {{ stock.length }}m </span>
-            </button>
+          <span class="stock-info__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
-          </div>
+          <span class="stock-info__speed"> {{ stock.maxSpeed }}km/h </span>
-        </li>
+
-      </ul>
+          <span class="stock-info__count"> x{{ stock.count }} </span>
-    </section>
+        </div>
-  </div>
+      </li>
+    </ul>
+  </section>
 </template>
 
 <script lang="ts">
@@ -168,14 +189,22 @@ export default defineComponent({
         })
         .join(';');
     },
+
+    chosenStockVehicle() {
+      return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
+    },
   },
 
   methods: {
+    stockHasWarnings() {
+      return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
+    },
+
     copyToClipboard() {
-      // if (Object.values(this.warnings).some((v) => v.value == true)) {
+      if (this.stockHasWarnings()) {
-      //   alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
+        alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
-      //   return;
+        return;
-      // }
+      }
 
       navigator.clipboard.writeText(this.stockString);
 
@@ -206,7 +235,7 @@ export default defineComponent({
         this.store.chosenVehicle = chosenLoco;
         this.store.chosenLoco = chosenLoco;
 
-        this.store.chosenCargo = null;
+        // this.store.chosenCargo = null;
       } else {
         const chosenCar = this.store.carDataList.find((v) => v.type == vehicle.type) || null;
         this.store.chosenVehicle = chosenCar;
@@ -238,16 +267,22 @@ export default defineComponent({
     },
 
     addStock(index: number) {
+      if (index == -1) return;
+
       this.store.stockList[index].count++;
     },
 
     subStock(index: number) {
+      if (index == -1) return;
+
       if (this.store.stockList[index].count < 2) return;
 
       this.store.stockList[index].count--;
     },
 
     removeStock(index: number) {
+      if (index == -1) return;
+
       this.store.stockList = this.store.stockList.filter((stock, i) => i != index);
     },
 
@@ -258,15 +293,20 @@ export default defineComponent({
 
       this.store.stockList[index] = this.store.stockList[index - 1];
       this.store.stockList[index - 1] = tempStock;
+
+      this.store.chosenStockListIndex = index - 1;
     },
 
     moveDownStock(index: number) {
+      if (index == -1) return;
       if (index > this.store.stockList.length - 2) return;
 
       const tempStock = this.store.stockList[index];
 
       this.store.stockList[index] = this.store.stockList[index + 1];
       this.store.stockList[index + 1] = tempStock;
+
+      this.store.chosenStockListIndex = index + 1;
     },
 
     shuffleCars() {
@@ -290,10 +330,10 @@ export default defineComponent({
     },
 
     downloadStock() {
-      // if (Object.values(this.warnings).some((v) => v.value == true)) {
+      if (this.stockHasWarnings()) {
-      //   alert('Jazda tym pociągiem może być niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
+        alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
-      //   return;
+        return;
-      // }
+      }
 
       const fileName = prompt('Nazwij plik:', 'pociag');
 
@@ -326,6 +366,8 @@ export default defineComponent({
 
       this.store.stockList[vehicleIndex] = this.store.stockList[this.draggedVehicleID];
       this.store.stockList[this.draggedVehicleID] = tempVehicle;
+
+      this.store.chosenStockListIndex = vehicleIndex;
     },
 
     allowDrop(e: DragEvent) {
@@ -338,34 +380,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../styles/global';
 
-.bg-dimmer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  background: rgba(black, 0.85);
-  z-index: 100;
-}
-
-.bottom {
-  display: flex;
-  justify-content: space-between;
-
-  margin-top: 2.5em;
-
-  @media screen and (max-width: 1150px) {
-    flex-direction: column;
-    align-items: center;
-
-    .image {
-      display: flex;
-      padding: 0 0 2em 0;
-    }
-  }
-}
-
 .warnings {
   margin-top: 0.5em;
 }
@@ -384,140 +398,146 @@ export default defineComponent({
   }
 }
 
-.spacer {
+.stock-list-section {
-  flex: 2 1 10%;
+  grid-row: 1 / 3;
+  grid-column: 2;
 }
 
-.stock-list {
+.list_actions {
-  flex-grow: 3;
+  display: flex;
 
-  width: 100%;
+  .spacer {
-
+    flex-grow: 2;
-  &_string {
-    margin-top: 1em;
-    font-weight: bold;
   }
 
-  &_buttons {
+  button {
-    display: flex;
+    font-size: 0.9em;
+    padding: 0.4em 0.55em;
+    margin-right: 0.5em;
 
-    span {
+    &:nth-child(5) {
-      flex-grow: 2;
+      margin-right: 0;
     }
 
-    button {
+    &:focus-visible {
-      font-size: 0.9em;
+      color: $accentColor;
-      padding: 0.4em 0.55em;
+      border-color: $accentColor;
-      margin: 0 0.5em 1em 0;
-
-      &:nth-child(5) {
-        margin-right: 0;
-      }
-
-      &:focus {
-        color: $accentColor;
-        border-color: $accentColor;
-      }
     }
   }
+}
 
-  ul {
+.stock_actions {
-    margin-top: 1em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    max-height: 500px;
+  flex-wrap: wrap;
-    overflow: auto;
+
+  margin: 1em 0;
+
+  &.no-chosen-vehicle {
+    font-size: 1.05em;
+    padding: 0.5em;
   }
 
-  ul li {
+  input#stock-count {
+    width: 3em;
+
+    margin: 0;
+    padding: 0.25em;
     outline: none;
-    cursor: pointer;
+    border: none;
+  }
 
-    &.list-empty {
+  button {
-      border: 1px solid whitesmoke;
+    margin: 0.25em;
-      padding: 0 0.5em;
+    padding: 0.25em;
+
+    border: 2px solid gray;
+    border-radius: 0.25em;
+
+    &:focus-visible {
+      outline: 1px solid white;
     }
 
-    &.selected .item-content {
+    img {
-      color: $accentColor;
+      vertical-align: text-bottom;
-    }
+      margin-right: 0.5em;
 
-    &:focus-visible .item-content {
+      width: 1.1em;
-      color: $accentColor;
+      height: 1.1em;
-    }
-
-    &:hover .item-content {
-      color: $accentColor;
-    }
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .item-content {
-      display: flex;
-      flex-wrap: wrap;
-
-      color: white;
-      font-weight: 700;
-      margin: 0.5em 0;
-
-      transition: color 100ms;
-
-      > span {
-        padding: 0.5em;
-        margin-right: 0.25em;
-        margin-top: 0.25em;
-      }
-
-      @media screen and (max-width: 800px) {
-        span {
-          padding: 0.25em;
-        }
-      }
-    }
-
-    .item-actions {
-      display: flex;
-      align-items: center;
-
-      .count {
-        display: flex;
-        align-items: center;
-
-        margin-right: 0.5em;
-
-        span {
-          margin: 0 0.5em;
-          /* font-size: 1.25em; */
-
-          color: $accentColor;
-        }
-      }
-
-      img {
-        vertical-align: middle;
-
-        width: 1.3em;
-        height: 1.3em;
-      }
-
-      button {
-        margin: 0 0.25em;
-
-        &:focus-visible {
-          outline: 1px solid white;
-        }
-      }
     }
   }
 }
 
-.stock {
+.stock_clipboard-text {
+  margin-top: 1em;
+  font-weight: bold;
+}
+
+ul {
+  margin-top: 1em;
+
+  max-height: 500px;
+  overflow: auto;
+
+  padding: 0.25em;
+
+  border: 2px solid gray;
+}
+
+ul > li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  outline: none;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 1px solid white;
+  }
+
+  &:hover .item-content {
+    color: $accentColor;
+  }
+}
+
+li > .stock-info {
+  display: flex;
+
+  color: white;
+  font-weight: 700;
+  margin: 0.25em 0;
+
+  transition: color 100ms;
+
+  & > span {
+    padding: 0.5em;
+    margin-right: 0.25em;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.stock-info {
+  &__no,
   &__type {
     background-color: #222;
+  }
 
-    &.supporter {
+  &__count {
-      background-color: #ff887b;
+    background-color: #e04e3e;
+  }
+
+  &__no {
+    min-width: 3.5em;
+    text-align: right;
+
+    &[data-selected='true'] {
+      color: $accentColor;
     }
   }
 
@@ -532,18 +552,9 @@ export default defineComponent({
   }
 }
 
-.card-anim {
+@media screen and (max-width: $breakpointMd) {
-  &-enter {
+  li > .stock-info {
-    opacity: 0;
+    font-size: 0.9em;
-  }
-
-  &-enter-active,
-  &-leave-active {
-    transition: opacity 300ms;
-  }
-
-  &-leave-to {
-    opacity: 0;
   }
 }
 </style>

src/components/RandomizerCard.vue

@@ -252,9 +252,7 @@ export default defineComponent({
       if (this.store.stockList.length == 0 || !this.store.stockList[0].isLoco) {
         this.store.stockList.length = 0;
 
-        let locoSet = this.store.locoDataList
+        let locoSet = this.store.locoDataList.filter((loco) => loco.power == 'loco-e' || loco.power == 'loco-s');
-          .filter((loco) => loco.power == 'loco-e' || loco.power == 'loco-s')
-          .filter((loco) => (loco.supportersOnly ? false : true));
 
         if (this.chosenCarTypes.some((car) => this.cargoTypes.includes(car)))
           locoSet = locoSet.filter((loco) => !loco.type.startsWith('EP'));
@@ -303,6 +301,9 @@ export default defineComponent({
         totalStockMass += randCargo?.totalMass || randCar.mass;
       }
 
+      this.store.chosenStockListIndex = -1;
+      this.store.chosenVehicle = null;
+
       this.store.isRandomizerCardOpen = false;
     },
 

src/components/ReadyStockList.vue

@@ -129,6 +129,9 @@ export default defineComponent({
         this.addVehicle(vehicle);
       });
 
+      this.store.chosenStockListIndex = -1;
+      this.store.chosenVehicle = null;
+      
       this.store.isRealStockListCardOpen = false;
     },
 

src/components/TrainImageSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="train-image">
+  <section class="train-image-section">
     <div class="train-image__wrapper">
       <div class="train-image__content">
         <div class="no-img" v-if="!store.chosenVehicle">PODGLĄD WYBRANEGO POJAZDU</div>
@@ -12,35 +12,36 @@
           @click="onImageClick"
         />
       </div>
-    </div>
 
-    <div class="image__info" v-if="store.chosenVehicle">
+      <div class="train-image__info" v-if="store.chosenVehicle">
-      <b class="text--accent">{{ store.chosenVehicle.type }} </b>
+        <b class="text--accent">{{ store.chosenVehicle.type }} </b>
 
-      <div style="color: #ccc">
+        <div style="color: #ccc">
-        <b>{{
+          <b>{{
-          vehicleTypes[
+            vehicleTypes[
-            isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType || 'loco-e'
+              isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType || 'loco-e'
-          ]
+            ]
-        }}</b>
+          }}</b>
 
-        <div>
+          <div>
-          {{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t | {{ store.chosenVehicle.maxSpeed }} km/h
+            {{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t |
-        </div>
+            {{ store.chosenVehicle.maxSpeed }} km/h
+          </div>
 
-        <div v-if="isLocomotive(store.chosenVehicle)">Typ kabiny: {{ store.chosenVehicle.cabinType }}</div>
+          <div v-if="isLocomotive(store.chosenVehicle)">Typ kabiny: {{ store.chosenVehicle.cabinType }}</div>
 
-        <div v-else>
+          <div v-else>
-          {{
+            {{
-            store.chosenVehicle.useType == 'car-cargo'
+              store.chosenVehicle.useType == 'car-cargo'
-              ? carUsage[store.chosenVehicle.constructionType]
+                ? carUsage[store.chosenVehicle.constructionType]
-              : 'Typ konstrukcji: ' + store.chosenVehicle.constructionType
+                : 'Typ konstrukcji: ' + store.chosenVehicle.constructionType
-          }}
+            }}
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="image__info" v-else>Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej</div>
+      <div class="train-image__info" v-else>Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej</div>
+    </div>
   </section>
 </template>
 
@@ -96,27 +97,29 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.train-image {
+@import '../styles/global.scss';
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
 
-  margin-top: 2.5em;
+.train-image-section {
+  grid-row: 2;
+  grid-column: 1;
+
+  display: flex;
 }
 
 .train-image {
   &__wrapper {
-    max-width: 380px;
+    text-align: center;
-    width: 22em;
+    
-    height: 13em;
   }
 
   &__content {
     border: 1px solid white;
     position: relative;
 
-    height: 100%;
+    width: 22em;
+    height: 13em;
+
+    margin: 0 auto;
 
     &.supporter {
       border: 1px solid salmon;
@@ -150,11 +153,8 @@ export default defineComponent({
   }
 }
 
-.image__info {
+.train-image__info {
-  text-align: center;
-
   margin: 1em 0;
-
   font-size: 1.1em;
 
   b {
@@ -165,5 +165,11 @@ export default defineComponent({
     margin: 0.25em 0;
   }
 }
+
+@media screen and (max-width: $breakpointMd) {
+  .train-image-section {
+    justify-content: center;
+  }
+}
 </style>
 

src/styles/global.scss

@@ -1,5 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
 
+$breakpointMd: 960px;
+$breakpointSm: 550px;
+
 $bgColor: #2c3149;
 $textColor: #fff;
 $accentColor: #ffd600;