diff --git a/public/images/placeholder.jpg b/public/images/placeholder.jpg index de080be..4f77fd9 100644 Binary files a/public/images/placeholder.jpg and b/public/images/placeholder.jpg differ diff --git a/src/components/sections/TrainImageSection.vue b/src/components/sections/TrainImageSection.vue index 2fa738c..b720c5c 100644 --- a/src/components/sections/TrainImageSection.vue +++ b/src/components/sections/TrainImageSection.vue @@ -1,64 +1,65 @@ @@ -66,7 +67,7 @@ import { computed, defineComponent } from 'vue'; import { useStore } from '../../store'; import { isTractionUnit } from '../../utils/vehicleUtils'; -import { ILocomotive, IVehicle } from '../../types'; +import { IVehicle } from '../../types'; import imageMixin from '../../mixins/imageMixin'; export default defineComponent({ @@ -87,18 +88,8 @@ export default defineComponent({ }; }, - watch: { - chosenVehicle(vehicle: IVehicle, prevVehicle: IVehicle) { - if (vehicle && vehicle.type != prevVehicle?.type) { - this.store.imageLoading = true; - } - }, - }, - methods: { - onImageLoad() { - this.store.imageLoading = false; - }, + isTractionUnit, onImageError(e: Event) { const el = e.target as HTMLImageElement; @@ -107,10 +98,6 @@ export default defineComponent({ el.src = '/images/placeholder.jpg'; }, - isLocomotive(vehicle: IVehicle): vehicle is ILocomotive { - return isTractionUnit(vehicle); - }, - onImageClick(e: Event) { const target = e.target as HTMLElement; @@ -131,22 +118,25 @@ export default defineComponent({ .train-image-section { display: flex; flex-direction: column; + align-items: center; text-align: center; - grid-row: 3; - grid-column: 1; - margin-top: 1em; - height: 22em; + height: 250px; + + & > div { + max-width: 100%; + width: 380px; + } } img { - max-width: 380px; width: 100%; - height: 100%; - border: 1px solid white; - cursor: zoom-in; + &[data-preview-active='true'] { + border: 1px solid white; + cursor: zoom-in; + } &[data-sponsor-only='true'] { border: 1px solid $sponsorColor; @@ -157,18 +147,16 @@ img { } } -.sponsor-only { - color: $sponsorColor; -} +.placeholder { + height: 250px; -.team-only { - color: $teamColor; + background-color: $bgColor; } .image-info { font-size: 1.1em; padding: 0.5em; - margin: 0.5em auto; + // margin: 0.5em auto; line-height: 1.35; width: 100%; diff --git a/src/mixins/stockPreviewMixin.ts b/src/mixins/stockPreviewMixin.ts index ee327ac..0f24882 100644 --- a/src/mixins/stockPreviewMixin.ts +++ b/src/mixins/stockPreviewMixin.ts @@ -14,8 +14,6 @@ export default defineComponent({ methods: { previewStock(stock: IStock) { - // if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true; - if (stock.isLoco) { const chosenLoco = this.store.locoDataList.find((v) => v.type == stock.type) || null; this.store.chosenVehicle = chosenLoco; diff --git a/src/store.ts b/src/store.ts index a080ca6..8bc24da 100644 --- a/src/store.ts +++ b/src/store.ts @@ -34,8 +34,6 @@ export const useStore = defineStore({ isColdStart: false, isDoubleManned: false, - imageLoading: false, - chosenLocoGroup: 'loco-electric' as LocoGroupType, chosenCarGroup: 'wagon-passenger' as WagonGroupType, @@ -126,7 +124,6 @@ export const useStore = defineStore({ try { const vehiclesData = (await http.get('/vehicles')).data; this.vehiclesData = vehiclesData; - } catch (error) { console.error(error); }