chore: added hiding rolling stock preview on hover

src/components/DriverView/DriverTrainCard.vue

@@ -63,7 +63,7 @@
       </div>
     </transition>
 
-    <StockList :trainStockList="chosenTrain.stockList" :key="chosenTrain.id" />
+    <StockList :trainStockList="chosenTrain.stockList" :key="chosenTrain.id" :showPreviews="true" />
     <TrainSchedule :train="chosenTrain" />
   </div>
 </template>

src/components/Global/StockList.vue

@@ -7,6 +7,7 @@
           :vehicle-string="vehicleString"
           :images="images"
           :image-fallbacks="imagesFallbacks"
+          :show-previews="showPreviews"
         />
       </li>
     </ul>
@@ -23,7 +24,8 @@ export default defineComponent({
 
   props: {
     trainStockList: { type: Array as PropType<string[]>, required: true },
-    tractionOnly: { type: Boolean, required: false }
+    tractionOnly: { type: Boolean, required: false },
+    showPreviews: { type: Boolean }
   },
 
   data() {

src/components/Global/VehicleThumbnail.vue

@@ -11,7 +11,8 @@
         :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnailImage}.png`"
         height="70"
         loading="lazy"
-        data-tooltip-type="VehiclePreviewTooltip"
+        :data-crosshair-cursor="showPreviews"
+        :data-tooltip-type="showPreviews ? 'VehiclePreviewTooltip' : ''"
         :data-tooltip-content="vehicleString"
         @error="onImageError($event, imageFallbacks[imageIndex])"
         @load="onImageLoad"
@@ -20,13 +21,14 @@
   </div>
 </template>
 
-<script setup lang="ts">    
+<script setup lang="ts">
 import { computed, PropType, Ref, ref } from 'vue';
 
 const props = defineProps({
   vehicleString: { type: String, required: true },
   images: { type: Object as PropType<string[]>, required: true },
-  imageFallbacks: { type: Object as PropType<string[]>, required: true }
+  imageFallbacks: { type: Object as PropType<string[]>, required: true },
+  showPreviews: { type: Boolean }
 });
 
 const thumbRef = ref(null) as Ref<HTMLElement | null>;
@@ -74,8 +76,10 @@ function onImageLoad() {
   display: flex;
   justify-content: center;
   align-items: flex-end;
-  cursor: crosshair;
-
   padding: 0.5em 0;
+
+  &[data-crosshair-cursor='true'] {
+    cursor: crosshair;
+  }
 }
 </style>

src/components/JournalView/JournalTimetables/EntryDetails.vue

@@ -129,6 +129,7 @@
                   : stockHistory[currentHistoryIndex].stockString
                 ).split(';')
               "
+              :showPreviews="true"
             />
           </div>
         </div>

src/components/TrainsView/TrainTableItem.vue

@@ -4,7 +4,7 @@
       <TrainInfo :train="train" />
 
       <div class="train-stats">
-        <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+        <StockList :trainStockList="train.stockList" :tractionOnly="true" :showPreviews="true" />
 
         <div>
           <span>{{ train.speed }}km/h</span>