hotfixy komponentów

src/App.vue

@@ -1,5 +1,6 @@
 <template>
-  <ImageFullscreenPreview />
+  <AppModals />
+  <ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
   <AppContainerView />
 </template>
 
@@ -8,6 +9,7 @@ import { defineComponent } from 'vue';
 import { useStore } from './store';
 import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
 import AppContainerView from './views/AppContainerView.vue';
+import AppModals from './components/app/AppModals.vue';
 
 export default defineComponent({
   data() {
@@ -24,7 +26,7 @@ export default defineComponent({
     this.store.fetchStockInfoData();
     this.store.handleRouting();
   },
-  components: { ImageFullscreenPreview, AppContainerView },
+  components: { ImageFullscreenPreview, AppContainerView, AppModals },
 });
 </script>
 

src/components/cards/RealStockCard.vue

@@ -1,6 +1,4 @@
 <template>
-  <div class="g-card-dimmer" @click="store.isRealStockListCardOpen = false"></div>
-
   <div class="real-stock-card g-card" @keydown.esc="store.isRealStockListCardOpen = false">
     <div class="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>
 

src/components/sections/StockSection.vue

@@ -3,11 +3,11 @@
     <div class="section_modes">
       <button
         class="btn"
-        v-for="(id, name) in sectionModes"
+        v-for="(id, name, i) in sectionModes"
         @click="chooseSection(id)"
         :data-selected="store.stockSectionMode == id"
       >
-        {{ name }}
+        <span class="text--accent">{{ i + 1 }}.</span> {{ name }}
         <span v-if="id == 'stock-list'">({{ store.stockList.length }})</span>
       </button>
     </div>
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, KeepAlive } from 'vue';
+import { computed, KeepAlive, onMounted } from 'vue';
 import { useStore } from '../../store';
 import StockListTab from '../tabs/StockListTab.vue';
 import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
@@ -38,6 +38,13 @@ const sectionModes: { [key: string]: SectionMode } = {
   'GNR SKŁADU': 'stock-generator',
 };
 
+const sectionKeyIndexes: { [key: string]: SectionMode } = {
+  '1': 'stock-list',
+  '2': 'wiki-list',
+  '3': 'number-generator',
+  '4': 'stock-generator',
+};
+
 const chosenSectionComponent = computed(() => {
   switch (store.stockSectionMode) {
     case 'stock-list':
@@ -60,6 +67,14 @@ const chosenSectionComponent = computed(() => {
 function chooseSection(sectionId: SectionMode) {
   store.stockSectionMode = sectionId;
 }
+
+onMounted(() => {
+  window.addEventListener('keydown', (e) => {
+    if (e.key == '1' || e.key == '2' || e.key == '3' || e.key == '4') {
+      store.stockSectionMode = sectionKeyIndexes[e.key];
+    }
+  });
+});
 </script>
 
 <style lang="scss">

src/components/sections/TrainImageSection.vue

@@ -144,7 +144,7 @@ export default defineComponent({
       width: 100%;
       height: 100%;
 
-      cursor: pointer;
+      cursor: zoom-in;
     }
 
     .empty-message,

src/components/tabs/WikiListTab.vue

@@ -26,7 +26,13 @@
         </thead>
 
         <tbody v-if="wikiMode == 'locomotives'">
-          <tr v-for="loco in computedLocoList" @click="previewLocomotive(loco)" @dblclick="addLocomotive(loco)">
+          <tr
+            v-for="loco in computedLocoList"
+            @click="previewLocomotive(loco)"
+            @keydown.enter="previewLocomotive(loco)"
+            @dblclick="addLocomotive(loco)"
+            tabindex="0"
+          >
             <td>
               <img
                 :src="`https://spythere.github.io/api/td2/images/${loco.type}--300px.jpg`"
@@ -45,7 +51,13 @@
         </tbody>
 
         <tbody v-else>
-          <tr v-for="car in computedCarList" @click="previewCarWagon(car)" @dblclick="addCarWagon(car)">
+          <tr
+            v-for="car in computedCarList"
+            @keydow.enter="previewCarWagon(car)"
+            @click="previewCarWagon(car)"
+            @dblclick="addCarWagon(car)"
+            tabindex="0"
+          >
             <td>
               <img
                 :src="`https://spythere.github.io/api/td2/images/${car.type}--300px.jpg`"

src/components/utils/ImageFullscreenPreview.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="image-preview" v-if="store.vehiclePreviewSrc">
+  <div
+    class="image-preview"
+    @click="store.vehiclePreviewSrc = ''"
+    @keydown.esc="store.vehiclePreviewSrc = ''"
+    tabindex="0"
+  >
     <img :src="store.vehiclePreviewSrc" alt="preview" />
   </div>
 </template>
@@ -14,6 +19,10 @@ export default defineComponent({
       store: useStore(),
     };
   },
+
+  mounted() {
+    this.$el.focus();
+  },
 });
 </script>
 
@@ -32,10 +41,12 @@ export default defineComponent({
   height: 100%;
 
   background: rgba(black, 0.85);
+  cursor: zoom-out;
 
   img {
-    width: 90%;
-    max-width: 800px;
+    max-width: 100%;
+    height: auto;
+    max-height: 100%;
   }
 }
 </style>