From 0df673467c94a62ad28770622c62f5701623db87 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 22 Oct 2024 21:22:22 +0200
Subject: [PATCH] fix: image loading styles

---
 .../Tooltip/VehiclePreviewTooltip.vue         | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/components/Tooltip/VehiclePreviewTooltip.vue b/src/components/Tooltip/VehiclePreviewTooltip.vue
index a5f56cc..778248e 100644
--- a/src/components/Tooltip/VehiclePreviewTooltip.vue
+++ b/src/components/Tooltip/VehiclePreviewTooltip.vue
@@ -1,22 +1,22 @@
 <template>
   <div class="tooltip-content">
-    <div v-if="imageState == 'loading'" class="loading-info">
-      {{ $t('vehicle-preview.loading') }}
+    <div class="image-box">
+      <div v-if="imageState == 'loading'" class="loading-info">
+        {{ $t('vehicle-preview.loading') }}
+      </div>
+
+      <div v-if="imageState == 'error'" class="loading-info">{{ $t('vehicle-preview.error') }}</div>
+
+      <img
+        v-if="tooltipStore.type"
+        @load="onImageLoad"
+        @error="onImageError"
+        width="300"
+        height="176"
+        :src="`https://stacjownik.spythere.eu/static/images/${vehicleName}--300px.jpg`"
+      />
     </div>
 
-    <div v-if="imageState == 'error'">{{ $t('vehicle-preview.error') }}</div>
-
-    <img
-      v-if="tooltipStore.type"
-      @load="onImageLoad"
-      @error="onImageError"
-      width="300"
-      height="176"
-      :src="`https://stacjownik.spythere.eu/static/images/${vehicleName}--300px.jpg`"
-    />
-
-    <div v-if="imageState == 'error'" class="error-placeholder"></div>
-
     <div class="vehicle-name">
       {{ vehicleName.replace(/_/g, ' ') }}
       <span v-if="vehicleCargo">({{ vehicleCargo.id }})</span>
@@ -97,10 +97,17 @@ export default defineComponent({
   border-radius: 0.5em;
 }
 
+.image-box {
+  position: relative;
+  min-height: 150px;
+}
+
 .loading-info {
   position: absolute;
   left: 50%;
-  transform: translateX(-50%);
+  top: 50%;
+  font-size: 1.15em;
+  transform: translate(-50%, -50%);
 }
 
 img {