Poprawki widoków modali/kart

src/components/InputsSection.vue

@@ -98,8 +98,7 @@
           </b>
         </button>
 
-        <button class="btn" @click="setReadyStockList(true)"><b>REALNE ZESTAWIENIA</b></button>
-        <ready-stock-list />
+        <button class="btn" @click="store.isRealStockListCardOpen = true"><b>REALNE ZESTAWIENIA</b></button>
       </div>
     </div>
   </section>
@@ -108,7 +107,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import ReadyStockList from './ReadyStockList.vue';
 import { IStock } from '../types';
 import imageMixin from '../mixins/imageMixin';
 import { useStore } from '../store';
@@ -121,10 +119,6 @@ interface ILocoType {
 }
 
 export default defineComponent({
-  components: {
-    ReadyStockList,
-  },
-
   mixins: [imageMixin],
 
   data: () => ({
@@ -205,10 +199,6 @@ export default defineComponent({
       this.store.swapVehicles = true;
     },
 
-    setReadyStockList(bool = false) {
-      this.store.isRealStockListCardOpen = bool;
-    },
-
     onVehicleSelect(type: 'loco' | 'car') {
       this.$nextTick(() => {
         if (!this.store.chosenLoco && !this.store.chosenCar) return;
@@ -310,7 +300,7 @@ export default defineComponent({
   display: flex;
   justify-content: space-between;
 
-  grid-row: 1;
+  grid-row: 2;
   grid-column: 1;
 }
 

src/components/ListSection.vue

@@ -19,7 +19,7 @@
           :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
           @click="subStock(store.chosenStockListIndex)"
         >
-          <img :src="icons.sub" alt="subtract vehicle count" />
+          <img :src="getIconURL('sub')" alt="subtract vehicle count" />
           1
         </button>
 
@@ -39,7 +39,7 @@
           :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
           @click="addStock(store.chosenStockListIndex)"
         >
-          <img :src="icons.add" alt="add vehicle count" />
+          <img :src="getIconURL('add')" alt="add vehicle count" />
           1
         </button>
       </div>
@@ -49,7 +49,7 @@
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="moveUpStock(store.chosenStockListIndex)"
       >
-        <img :src="icons.higher" alt="move up vehicle" />
+        <img :src="getIconURL('higher')" alt="move up vehicle" />
         Przenieś wyżej
       </button>
 
@@ -58,7 +58,7 @@
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="moveDownStock(store.chosenStockListIndex)"
       >
-        <img :src="icons.lower" alt="move down vehicle" />
+        <img :src="getIconURL('lower')" alt="move down vehicle" />
         Przenieś niżej
       </button>
 
@@ -67,7 +67,7 @@
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="removeStock(store.chosenStockListIndex)"
       >
-        <img :src="icons.remove" alt="remove vehicle" />
+        <img :src="getIconURL('remove')" alt="remove vehicle" />
         Usuń
       </button>
     </div>
@@ -81,7 +81,7 @@
     <div class="stock_specs">
       <b class="real-stock-info" v-if="store.chosenRealStock">
         <span class="text--accent">
-          <img :src="icons[store.chosenRealStock.type]" :alt="store.chosenRealStock.type" />
+          <img :src="getIconURL(store.chosenRealStock.type)" :alt="store.chosenRealStock.type" />
           {{ store.chosenRealStock.number }} {{ store.chosenRealStock.name }}</span
         >
       </b>
@@ -168,25 +168,16 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import RandomizerCard from './RandomizerCard.vue';
 import TrainImage from './TrainImageSection.vue';
 
-import addIcon from '../assets/add-icon.svg';
-import subIcon from '../assets/sub-icon.svg';
-import removeIcon from '../assets/remove-icon.svg';
-import lowerIcon from '../assets/lower-icon.svg';
-import higherIcon from '../assets/higher-icon.svg';
-import TLKIcon from '../assets/TLK.png';
-import EICIcon from '../assets/EIC.png';
-import ICIcon from '../assets/IC.svg';
-
 import { useStore } from '../store';
 import warningsMixin from '../mixins/warningsMixin';
+import imageMixin from '../mixins/imageMixin';
 
 export default defineComponent({
-  components: { RandomizerCard, TrainImage },
+  components: { TrainImage },
 
-  mixins: [warningsMixin],
+  mixins: [warningsMixin, imageMixin],
 
   setup() {
     const store = useStore();
@@ -197,17 +188,6 @@ export default defineComponent({
   },
 
   data: () => ({
-    icons: {
-      add: addIcon,
-      sub: subIcon,
-      remove: removeIcon,
-      lower: lowerIcon,
-      higher: higherIcon,
-      TLK: TLKIcon,
-      EIC: EICIcon,
-      IC: ICIcon,
-    } as { [key: string]: string },
-
     imageOffsetY: 0,
 
     draggedVehicleID: -1,
@@ -437,7 +417,7 @@ export default defineComponent({
 }
 
 .stock-list-section {
-  grid-row: 1 / 3;
+  grid-row: 1 / 4;
   grid-column: 2;
 }
 

src/components/LogoSection.vue

@@ -0,0 +1,30 @@
+<template>
+  <section class="logo-section">
+    <img src="/images/logo.svg" alt="logo pojazdownik" />
+  </section>
+</template>
+
+<script lang="ts">
+export default {
+  setup() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.logo-section {
+  grid-row: 1;
+  grid-column: 1;
+  margin-bottom: 1.5em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+img {
+  width: 25em;
+}
+</style>
+

src/components/TrainImageSection.vue

@@ -112,7 +112,7 @@ export default defineComponent({
 @import '../styles/global.scss';
 
 .train-image-section {
-  grid-row: 2;
+  grid-row: 3;
   grid-column: 1;
 
   margin-top: 2em;

src/components/cards/RandomizerCard.vue

@@ -1,169 +1,175 @@
 <template>
-  <div class="card">
-    <transition name="slide-top">
-      <div class="warning-message" v-if="warningMessage">{{ warningMessage }}</div>
-    </transition>
+  <div class="randomizer-card g-card" v-if="store.isRandomizerCardOpen">
+    <div class="g-card_bg" @click="store.isRandomizerCardOpen = false"></div>
 
-    <div class="card_wrapper" ref="cardWrapper" tabindex="0">
-      <h1><img :src="getIcon('randomize-icon')" alt="ikona losowania" /> LOSUJ SKŁAD</h1>
+    <div class="card_content">
+      <transition name="slide-top">
+        <div class="warning-message" v-if="warningMessage">{{ warningMessage }}</div>
+      </transition>
 
-      <div class="random-stock-selections">
-        <div class="first-row">
-          <h3>WŁAŚCIWOŚCI SKŁADU</h3>
+      <div class="card_wrapper" ref="cardWrapper" tabindex="0">
+        <h1><img :src="getIconURL('randomize')" alt="ikona losowania" /> LOSUJ SKŁAD</h1>
 
-          <div class="max-values">
-            <span>
-              <label for="stock-mass">Maks. masa (t)</label>
-              <input type="number" id="stock-mass" v-model="maxStockMass" />
-            </span>
-            <span>
-              <label for="stock-mass">Maks. długość (m)</label>
-              <input type="number" id="stock-mass" v-model="maxStockLength" />
-            </span>
-            <span>
-              <label for="stock-count">Maks. liczba wagonów</label>
-              <input type="number" id="stock-count" v-model="maxStockCount" />
-            </span>
-          </div>
-        </div>
-
-        <div class="second-row">
-          <div class="select-box locos">
-            <h3>LOKOMOTYWA</h3>
-
-            <select
-              v-model="chosenLocomotive"
-              @change="onLocomotivePreviewSelect()"
-              @focus="onLocomotivePreviewSelect()"
-            >
-              <option :value="undefined">Wybierz lokomotywę</option>
-              <option v-for="loco in store.locoDataList.filter((l) => !l.type.includes('EN'))" :value="loco">
-                {{ loco.type }}
-              </option>
-            </select>
-          </div>
-
-          <div class="car-preview">
-            <div v-if="isPreviewLoading" class="loading">ŁADOWANIE...</div>
-
-            <span class="preview-message" v-if="!previewVehicle">
-              WYBIERZ POJAZD LUB WAGON, BY ZOBACZYĆ JEGO PODGLĄD
-            </span>
-
-            <img v-else :src="previewVehicle.imageSrc" :alt="previewVehicle.type" />
-
-            <span class="preview-message info" v-if="previewVehicle">
-              <button @click="prevPreviewIndex">&lt;</button>
+        <div class="random-stock-selections">
+          <div class="first-row">
+            <h3>WŁAŚCIWOŚCI SKŁADU</h3>
 
+            <div class="max-values">
               <span>
-                {{ previewVehicle.type }}
-                {{
-                  isLocomotive(previewVehicle) ? '' : `(${previewIndex + 1} z ${focusedCarWagon?.availableCars.length})`
-                }}
+                <label for="stock-mass">Maks. masa (t)</label>
+                <input type="number" id="stock-mass" v-model="maxStockMass" />
+              </span>
+              <span>
+                <label for="stock-mass">Maks. długość (m)</label>
+                <input type="number" id="stock-mass" v-model="maxStockLength" />
+              </span>
+              <span>
+                <label for="stock-count">Maks. liczba wagonów</label>
+                <input type="number" id="stock-count" v-model="maxStockCount" />
+              </span>
+            </div>
+          </div>
+
+          <div class="second-row">
+            <div class="select-box locos">
+              <h3>LOKOMOTYWA</h3>
+
+              <select
+                v-model="chosenLocomotive"
+                @change="onLocomotivePreviewSelect()"
+                @focus="onLocomotivePreviewSelect()"
+              >
+                <option :value="undefined">Wybierz lokomotywę</option>
+                <option v-for="loco in store.locoDataList.filter((l) => !l.type.includes('EN'))" :value="loco">
+                  {{ loco.type }}
+                </option>
+              </select>
+            </div>
+
+            <div class="car-preview">
+              <div v-if="isPreviewLoading" class="loading">ŁADOWANIE...</div>
+
+              <span class="preview-message" v-if="!previewVehicle">
+                WYBIERZ POJAZD LUB WAGON, BY ZOBACZYĆ JEGO PODGLĄD
               </span>
 
-              <button @click="nextPreviewIndex">&gt;</button>
-            </span>
+              <img v-else :src="previewVehicle.imageSrc" :alt="previewVehicle.type" />
+
+              <span class="preview-message info" v-if="previewVehicle">
+                <button @click="prevPreviewIndex">&lt;</button>
+
+                <span>
+                  {{ previewVehicle.type }}
+                  {{
+                    isLocomotive(previewVehicle)
+                      ? ''
+                      : `(${previewIndex + 1} z ${focusedCarWagon?.availableCars.length})`
+                  }}
+                </span>
+
+                <button @click="nextPreviewIndex">&gt;</button>
+              </span>
+            </div>
+          </div>
+
+          <div class="select-box carwagons">
+            <h3>
+              WAGONY
+
+              <button class="btn btn--text" @click="showRules = !showRules">[ zasady dodawania wagonów ]</button>
+            </h3>
+
+            <div class="rules" v-if="showRules">
+              <ul>
+                <li>
+                  <b class="text--accent">Typ wagonu</b> musi zaczynać się typem konstrukcyjnym (np. <i>111a</i> lub
+                  <i>203V</i>), wariantem np. <i>111a Grafitti 1</i> lub jego początkiem, np. <i>111a PKPIC</i> (wtedy
+                  losowanie obejmuje wszystkie dostępne warianty typu o takim początku)
+                </li>
+                <li>
+                  <b class="text--accent">Ładunek</b> można wybrać po uprzednim wpisaniu typu konstrukcyjnego wagonu
+                  towarowego (zakładając, że je posiada)
+                </li>
+                <li>
+                  <b class="text--accent">Szansa</b> (waga) określa prawdopodobieństwo wylosowania danego typu wagonu.
+                  Im większa liczba względem reszty wag, tym bardziej prawdopodobne, że zostanie on wybrany
+                </li>
+                <li>
+                  <b class="text--accent">Warianty</b> pokazują liczbę możliwych wagonów w puli w ramach losowania
+                  danego typu
+                </li>
+              </ul>
+            </div>
+
+            <div class="list-wrapper">
+              <ul class="carwagon-list">
+                <li class="text--accent" style="font-weight: bold">
+                  <div>Typ wagonu</div>
+                  <div>Ładunek</div>
+                  <div>Szansa</div>
+                  <div>Warianty</div>
+                  <div>Usuń</div>
+                </li>
+                <li v-for="(stockWagon, i) in chosenCarWagonList">
+                  <div>
+                    <input
+                      class="carwagon-type g-input"
+                      type="text"
+                      list="types-datalist"
+                      v-model="stockWagon.stockString"
+                      @input="onCarWagonTypeInput(stockWagon)"
+                      @focus="onCarWagonTypeFocus(stockWagon)"
+                      placeholder="Kliknij, aby dodać wagon..."
+                    />
+                    <datalist id="types-datalist">
+                      <option value="">Wybierz wagon</option>
+                      <option v-for="carOptionType in allCarOptionsList" :value="carOptionType">
+                        {{ carOptionType }}
+                      </option>
+                    </datalist>
+                  </div>
+                  <div>
+                    <select class="carwagon-cargo" v-model="stockWagon.chosenCargo">
+                      <option :value="undefined">brak</option>
+                      <option
+                        :value="{ id: 'random', totalMass: 0 }"
+                        v-if="stockWagon.availableCargo && stockWagon.availableCargo.length > 0"
+                      >
+                        losowy
+                      </option>
+                      <option v-for="cargo in stockWagon.availableCargo" :value="cargo">
+                        {{ cargo.id }}
+                      </option>
+                    </select>
+                  </div>
+                  <div>
+                    <span class="carwagon-chance">
+                      <input type="number" v-model="stockWagon.chance" max="100" min="1" />
+                    </span>
+                  </div>
+                  <div class="variant-count">{{ stockWagon.availableCars.length }}</div>
+                  <div class="carwagon-remove">
+                    <button @click="removeFromRandomStockList(i)">
+                      <img :src="getIconURL('remove')" alt="remove" />
+                    </button>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+            <button class="btn btn--outline" @click="addToRandomStockList">+ NOWY WAGON</button>
           </div>
         </div>
 
-        <div class="select-box carwagons">
-          <h3>
-            WAGONY
-
-            <button class="btn btn--text" @click="showRules = !showRules">[ zasady dodawania wagonów ]</button>
-          </h3>
-
-          <div class="rules" v-if="showRules">
-            <ul>
-              <li>
-                <b class="text--accent">Typ wagonu</b> musi zaczynać się typem konstrukcyjnym (np. <i>111a</i> lub
-                <i>203V</i>), wariantem np. <i>111a Grafitti 1</i> lub jego początkiem, np. <i>111a PKPIC</i> (wtedy
-                losowanie obejmuje wszystkie dostępne warianty typu o takim początku)
-              </li>
-              <li>
-                <b class="text--accent">Ładunek</b> można wybrać po uprzednim wpisaniu typu konstrukcyjnego wagonu
-                towarowego (zakładając, że je posiada)
-              </li>
-              <li>
-                <b class="text--accent">Szansa</b> (waga) określa prawdopodobieństwo wylosowania danego typu wagonu. Im
-                większa liczba względem reszty wag, tym bardziej prawdopodobne, że zostanie on wybrany
-              </li>
-              <li>
-                <b class="text--accent">Warianty</b> pokazują liczbę możliwych wagonów w puli w ramach losowania danego
-                typu
-              </li>
-            </ul>
-          </div>
-
-          <div class="list-wrapper">
-            <ul class="carwagon-list">
-              <li class="text--accent" style="font-weight: bold">
-                <div>Typ wagonu</div>
-                <div>Ładunek</div>
-                <div>Szansa</div>
-                <div>Warianty</div>
-                <div>Usuń</div>
-              </li>
-              <li v-for="(stockWagon, i) in chosenCarWagonList">
-                <div>
-                  <input
-                    class="carwagon-type g-input"
-                    type="text"
-                    list="types-datalist"
-                    v-model="stockWagon.stockString"
-                    @input="onCarWagonTypeInput(stockWagon)"
-                    @focus="onCarWagonTypeFocus(stockWagon)"
-                    placeholder="Kliknij, aby dodać wagon..."
-                  />
-                  <datalist id="types-datalist">
-                    <option value="">Wybierz wagon</option>
-                    <option v-for="carOptionType in allCarOptionsList" :value="carOptionType">
-                      {{ carOptionType }}
-                    </option>
-                  </datalist>
-                </div>
-                <div>
-                  <select class="carwagon-cargo" v-model="stockWagon.chosenCargo">
-                    <option :value="undefined">brak</option>
-                    <option
-                      :value="{ id: 'random', totalMass: 0 }"
-                      v-if="stockWagon.availableCargo && stockWagon.availableCargo.length > 0"
-                    >
-                      losowy
-                    </option>
-                    <option v-for="cargo in stockWagon.availableCargo" :value="cargo">
-                      {{ cargo.id }}
-                    </option>
-                  </select>
-                </div>
-                <div>
-                  <span class="carwagon-chance">
-                    <input type="number" v-model="stockWagon.chance" max="100" min="1" />
-                  </span>
-                </div>
-                <div class="variant-count">{{ stockWagon.availableCars.length }}</div>
-                <div class="carwagon-remove">
-                  <button @click="removeFromRandomStockList(i)">
-                    <img :src="getIcon('remove-icon')" alt="remove" />
-                  </button>
-                </div>
-              </li>
-            </ul>
-          </div>
-
-          <button class="btn btn--outline" @click="addToRandomStockList">+ NOWY WAGON</button>
+        <div class="stock-actions">
+          <button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="generateRandomStock">
+            LOSUJ SKŁAD!
+          </button>
+          <button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="store.isRandomizerCardOpen = false">
+            ZAMKNIJ
+          </button>
         </div>
       </div>
-
-      <div class="stock-actions">
-        <button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="generateRandomStock">
-          LOSUJ SKŁAD!
-        </button>
-        <button class="btn" style="font-size: 1.15em; margin-top: 2em" @click="store.isRandomizerCardOpen = false">
-          ZAMKNIJ
-        </button>
-      </div>
     </div>
   </div>
 </template>
@@ -171,11 +177,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import { ICargo, ICarWagon, ILocomotive, IStock, IVehicleData, Vehicle } from '../types';
+import { ICargo, ICarWagon, ILocomotive, Vehicle } from '../../types';
 
-import { useStore } from '../store';
-import stockMixin from '../mixins/stockMixin';
-import { isLocomotive } from '../utils/vehicleUtils';
+import { useStore } from '../../store';
+import stockMixin from '../../mixins/stockMixin';
+import imageMixin from '../../mixins/imageMixin';
+import { isLocomotive } from '../../utils/vehicleUtils';
 
 interface RandomStockCarWagon {
   stockString: string;
@@ -195,7 +202,7 @@ export default defineComponent({
     };
   },
 
-  mixins: [stockMixin, stockMixin],
+  mixins: [stockMixin, imageMixin],
 
   activated() {
     (this.$refs['cardWrapper'] as any).focus();
@@ -399,16 +406,12 @@ export default defineComponent({
 
       return { carWagon: randCarWagon!, cargo: randCargo };
     },
-
-    getIcon(name: string) {
-      return new URL(`../assets/${name}.svg`, import.meta.url).href;
-    },
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/global.scss';
+@import '../../styles/global.scss';
 
 h1 {
   display: flex;
@@ -429,15 +432,10 @@ h3 {
   margin: 0 0 0.5em 0;
 }
 
-.card {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
 
-  z-index: 100;
+
+.card_content {
   overflow-y: hidden;
-
   border: 2px solid white;
 
   width: 95vw;
@@ -446,10 +444,12 @@ h3 {
   height: 90vh;
   max-height: 900px;
 
-  background: #111;
+  background-color: #111;
 
   border-radius: 1em;
 
+  z-index: 99;
+
   .card_wrapper {
     display: flex;
     flex-direction: column;
@@ -474,8 +474,6 @@ h3 {
   text-align: center;
   padding: 0.25em;
 
-  border-radius: 1em 1em 0 0;
-
   background-color: #b2222288;
 }
 

src/components/cards/RealStockCard.vue

@@ -1,56 +1,59 @@
 <template>
-  <div class="ready-stock-list" v-if="store.isRealStockListCardOpen">
-    <div class="top-sticky">
-      <button class="btn btn--text exit" @click="store.isRealStockListCardOpen = false">&lt; POWRÓT</button>
+  <div class="real-stock-card g-card" v-if="store.isRealStockListCardOpen">
+    <div class="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>
 
-      <div class="header">
-        <h1>
-          REALNE ZESTAWIENIA
-          <div>by <a href="https://td2.info.pl/profile/?u=17708" target="_blank">Railtrains997</a></div>
-        </h1>
-        <p>
-          Pełne informacje o zestawieniach dostępne na stronie
-          <a href="http://bocznica.eu/files/archiwum/2021r_2021-11-04.html" target="_blank">bocznica.eu</a> (stan na
-          listopad 2021r.)
-        </p>
+    <div class="card_content">
+      <div class="top-sticky">
+        <button class="btn btn--text exit" @click="store.isRealStockListCardOpen = false">&lt; POWRÓT</button>
 
-        <input type="text" tabindex="0" v-model="searchedReadyStockName" placeholder="Szukaj zestawienia..." />
+        <div class="header">
+          <h1>
+            REALNE ZESTAWIENIA
+            <div>by <a href="https://td2.info.pl/profile/?u=17708" target="_blank">Railtrains997</a></div>
+          </h1>
+          <p>
+            Pełne informacje o zestawieniach dostępne na stronie
+            <a href="http://bocznica.eu/files/archiwum/2021r_2021-11-04.html" target="_blank">bocznica.eu</a> (stan na
+            listopad 2021r.)
+          </p>
+
+          <input type="text" tabindex="0" v-model="searchedReadyStockName" placeholder="Szukaj zestawienia..." />
+        </div>
       </div>
+
+      <ul v-if="responseStatus == 'loaded'">
+        <li
+          v-for="(stock, key) in computedReadyStockList"
+          :key="key"
+          tabindex="0"
+          @click="choseStock(stock.name, stock.type, stock.number, stock.stockString)"
+          @keydown.enter="choseStock(stock.name, stock.type, stock.number, stock.stockString)"
+        >
+          <img :src="getIconURL(stock.type)" :alt="stock.type" />
+
+          <b class="text--accent"> {{ stock.name }}</b>
+          <div>{{ stock.number }}</div>
+        </li>
+      </ul>
     </div>
-
-    <ul v-if="responseStatus == 'loaded'">
-      <li
-        v-for="(stock, key) in computedReadyStockList"
-        :key="key"
-        tabindex="0"
-        @click="choseStock(stock.name, stock.type, stock.number, stock.stockString)"
-        @keydown.enter="choseStock(stock.name, stock.type, stock.number, stock.stockString)"
-      >
-        <img v-if="stock.type != 'iR' && stock.type != 'RE'" :src="icons[stock.type]" alt="" />
-        <span v-else>{{ stock.type }}</span>
-
-        <b class="text--accent"> {{ stock.name }}</b>
-        <div>{{ stock.number }}</div>
-      </li>
-    </ul>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { Vehicle, IStock, IReadyStockList } from '../types';
+import { Vehicle, IStock, IReadyStockList } from '../../types';
 
-import iconEIC from '../assets/EIC.png';
-import iconIC from '../assets/IC.svg';
-import iconTLK from '../assets/TLK.png';
-import { useStore } from '../store';
-import { isLocomotive } from '../utils/vehicleUtils';
+import { useStore } from '../../store';
+import { isLocomotive } from '../../utils/vehicleUtils';
+import imageMixin from '../../mixins/imageMixin';
 
 interface ResponseJSONData {
   [key: string]: string;
 }
 
 export default defineComponent({
+  mixins: [imageMixin],
+
   setup() {
     return {
       store: useStore(),
@@ -62,12 +65,6 @@ export default defineComponent({
     isMobile: 'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/) ? true : false,
 
     searchedReadyStockName: '',
-
-    icons: {
-      EIC: iconEIC,
-      IC: iconIC,
-      TLK: iconTLK,
-    } as { [key: string]: string },
   }),
 
   computed: {
@@ -177,8 +174,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/global.scss';
+
 .exit {
-  padding: 1em 0;
   font-size: 1.2em;
 }
 
@@ -191,16 +189,8 @@ input {
   }
 }
 
-.ready-stock-list {
-  position: fixed;
-  z-index: 101;
-
-  top: 50%;
-  left: 50%;
-
-  transform: translate(-50%, -50%);
-
-  background: #333;
+.card_content {
+  background-color: #1c1c1c;
   border-radius: 1em;
 
   height: 85vh;
@@ -210,11 +200,12 @@ input {
   padding: 0 1em;
 
   overflow-y: auto;
+  z-index: 100;
 
   .top-sticky {
     position: sticky;
     top: 0;
-    background: #333;
+    background: #1c1c1c;
   }
 
   .header {
@@ -262,10 +253,10 @@ input {
 
     cursor: pointer;
 
-    background: #444;
+    background: #2b2b2b;
 
     img {
-      max-width: 1.5em;
+      height: 0.85em;
     }
 
     span {