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;