diff --git a/src/components/ListSection.vue b/src/components/ListSection.vue index 122da43..c171bcf 100644 --- a/src/components/ListSection.vue +++ b/src/components/ListSection.vue @@ -2,49 +2,7 @@
-
-
-
-
PODGLĄD WYBRANEGO POJAZDU
-
ŁADOWANIE OBRAZU...
- -
-
- -
- {{ (store.chosenLoco || store.chosenCar)?.type }} -
- - {{ vehicleTypes[store.chosenLoco?.power || store.chosenCar?.useType || 'loco-e'] }} - -
- {{ (store.chosenCar || store.chosenLoco)?.length }}m | {{ (store.chosenCar || store.chosenLoco)?.mass }}t | - {{ (store.chosenCar || store.chosenLoco)?.maxSpeed }} km/h -
- -
Typ kabiny: {{ store.chosenLoco.cabinType }}
- -
- {{ - store.chosenCar.useType == 'car-cargo' - ? carUsage[store.chosenCar.constructionType] - : 'Typ konstrukcji: ' + store.chosenCar.constructionType - }} -
-
-
-
+
@@ -157,10 +115,10 @@ import { computed, ComputedRef, defineComponent, inject, provide, reactive, ref import { ICarWagon, ILocomotive, IStore } from '@/types'; import RandomizerCard from './RandomizerCard.vue'; -import carUsage from '@/data/carUsage.json'; +import TrainImage from './TrainImage.vue'; export default defineComponent({ - components: { RandomizerCard }, + components: { RandomizerCard, TrainImage }, setup() { const store = inject('Store') as IStore; @@ -229,17 +187,6 @@ export default defineComponent({ imageOffsetY: 0, draggedVehicleID: -1, - - vehicleTypes: { - 'loco-e': 'ELEKTROWÓZ', - 'loco-s': 'SPALINOWÓZ', - 'loco-ezt': 'ELEKTRYCZNY ZESP. TRAKCYJNY', - 'loco-szt': 'SPALINOWY ZESP. TRAKCYJNY', - 'car-passenger': 'WAGON PASAŻERSKI', - 'car-cargo': 'WAGON TOWAROWY', - } as { [key: string]: string }, - - carUsage: carUsage as { [key: string]: string }, }), computed: { @@ -421,18 +368,6 @@ export default defineComponent({ allowDrop(e: DragEvent) { e.preventDefault(); }, - - onImageLoad() { - this.store.imageLoading = false; - }, - - onImageClick() { - const chosenVehicle = this.store.chosenCar || this.store.chosenLoco; - - if (!chosenVehicle) return; - - this.store.vehiclePreviewSrc = chosenVehicle.imageSrc.replace('300', '800'); - }, }, }); @@ -457,7 +392,7 @@ export default defineComponent({ margin-top: 2.5em; - @media screen and (max-width: 800px) { + @media screen and (max-width: 1150px) { flex-direction: column; align-items: center; @@ -485,73 +420,6 @@ export default defineComponent({ flex: 2 1 10%; } -.image { - flex-grow: 2; - padding: 0 1em 0 0; - - display: flex; - flex-direction: column; - - &__wrapper { - max-width: 380px; - width: 22em; - height: 13em; - } - - &__content { - border: 1px solid white; - position: relative; - - height: 100%; - - &.supporter { - border: 1px solid salmon; - } - - img { - width: 100%; - height: 100%; - - cursor: pointer; - } - - .empty-message, - .no-img { - position: absolute; - left: 0; - top: 0; - - display: flex; - justify-content: center; - align-items: flex-end; - - width: 100%; - height: 100%; - padding: 0.3em 0; - } - - .empty-message { - background: rgba(#000, 0.75); - } - } -} - -.brief-info { - text-align: center; - - margin: 1em 0; - - font-size: 1.1em; - - b { - font-size: 1.1em; - } - - div { - margin: 0.25em 0; - } -} - .stock-list { flex-grow: 3;