Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-03 19:48:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

section improvements; hotfixes

Browse Source
This commit is contained in:
Spythere
2023-10-26 21:35:42 +02:00
parent 45b2bd01a2
commit 2bbf9a8ac3
28 changed files with 495 additions and 650 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/TrainImageSection.vue
+79 -116
View File
@@ -1,89 +1,66 @@
<template>
<section class="train-image-section">
<div class="train-image__wrapper">
<div
class="train-image__content"
:class="{ supporter: store.chosenVehicle?.supportersOnly }"
>
<transition name="img-message-anim">
<div
class="empty-message"
v-if="store.imageLoading && store.chosenVehicle?.imageSrc"
>
{{ $t("preview.loading") }}
</div>
</transition>
<div class="train-image__content" :class="{ sponsor: store.chosenVehicle?.isSponsorsOnly }">
<img
v-if="store.chosenVehicle"
tabindex="0"
:src="getThumbnailURL(store.chosenVehicle.type, 'small')"
@click="onImageClick"
@keydown.enter="onImageClick"
@error="onImageError"
type="image/jpeg"
/>
<div class="no-img" v-if="!store.chosenVehicle">
{{ $t("preview.title") }}
</div>
<img
v-if="store.chosenVehicle"
:src="getThumbnailURL(store.chosenVehicle.type, 'small')"
:alt="store.chosenVehicle.type"
@load="onImageLoad"
@click="onImageClick"
/>
<!-- <div class="empty-message" v-if="store.chosenVehicle && !store.chosenVehicle.imageSrc">Ten pojazd nie ma jeszcze podglądu!</div> -->
</div>
<div class="train-image__info" v-if="store.chosenVehicle">
<b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
<b style="color: #ccc">
{{
$t(
`preview.${
isLocomotive(store.chosenVehicle)
? store.chosenVehicle.power
: store.chosenVehicle.useType
}`,
)
}}
</b>
<div style="color: #ccc">
<div>
{{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t
| {{ store.chosenVehicle.maxSpeed }} km/h
</div>
<div v-if="isLocomotive(store.chosenVehicle)">
{{ $t("preview.cabin") }} {{ store.chosenVehicle.cabinType }}
</div>
<div v-else>
{{
store.chosenVehicle.useType == "car-cargo" // ? store.stockData?.usage[store.chosenVehicle.constructionType]
? $t(`usage.${store.chosenVehicle.constructionType}`)
: `${$t("preview.construction")} ${
store.chosenVehicle.constructionType
}`
}}
</div>
<b style="color: salmon" v-if="store.chosenVehicle.supportersOnly">{{
$t("preview.sponsor-only")
}}</b>
</div>
</div>
<div class="train-image__info" v-else>{{ $t("preview.desc") }}</div>
<img v-else src="images/placeholder.jpg" alt="placeholder" />
</div>
<div class="train-image__info" v-if="store.chosenVehicle">
<b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
<b style="color: #ccc">
{{ $t(`preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType}`) }}
</b>
<div style="color: #ccc">
<div>{{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t | {{ store.chosenVehicle.maxSpeed }} km/h</div>
<div v-if="isLocomotive(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>
<div v-else>
{{
store.chosenVehicle.useType == 'car-cargo'
? $t(`usage.${store.chosenVehicle.constructionType}`)
: `${$t('preview.construction')} ${store.chosenVehicle.constructionType}`
}}
</div>
<b style="color: salmon" v-if="store.chosenVehicle.isSponsorsOnly">{{
$t('preview.sponsor-only', [
new Date(store.chosenVehicle.sponsorsOnlyTimestamp).toLocaleDateString($i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'),
])
}}</b>
</div>
</div>
<div class="train-image__info" v-else>{{ $t('preview.desc') }}</div>
</section>
</template>
<script lang="ts">
import { computed, defineComponent } from "vue";
import { useStore } from "../../store";
import { isLocomotive } from "../../utils/vehicleUtils";
import { ILocomotive, Vehicle } from "../../types";
import imageMixin from "../../mixins/imageMixin";
import { computed, defineComponent } from 'vue';
import { useStore } from '../../store';
import { isLocomotive } from '../../utils/vehicleUtils';
import { ILocomotive, Vehicle } from '../../types';
import imageMixin from '../../mixins/imageMixin';
export default defineComponent({
mixins: [imageMixin],
data() {
return {
noImageAvailable: false,
};
},
setup() {
const store = useStore();
@@ -106,88 +83,74 @@ export default defineComponent({
this.store.imageLoading = false;
},
onImageError(e: Event) {
const el = e.target as HTMLImageElement;
if (el.src == '/images/placeholder.jpg') return;
el.src = '/images/placeholder.jpg';
},
isLocomotive(vehicle: Vehicle): vehicle is ILocomotive {
return isLocomotive(vehicle);
},
onImageClick() {
onImageClick(e: Event) {
const target = e.target as HTMLElement;
const chosenVehicle = this.store.chosenVehicle;
if (!chosenVehicle) return;
this.store.vehiclePreviewSrc = this.getThumbnailURL(
chosenVehicle.type,
"large",
);
this.store.lastFocusedElement = target;
this.store.vehiclePreviewSrc = this.getThumbnailURL(chosenVehicle.type, 'large');
},
},
});
</script>
<style lang="scss" scoped>
@import "../../styles/global.scss";
@import '../../styles/global.scss';
.train-image-section {
display: flex;
flex-direction: column;
text-align: center;
grid-row: 3;
grid-column: 1;
margin-top: 2em;
margin-top: 1em;
height: 22em;
}
.train-image {
&__wrapper {
text-align: center;
}
&__content {
border: 1px solid white;
position: relative;
overflow: hidden;
max-width: 22em;
height: 13em;
margin: 0 auto;
&.supporter {
&.sponsor img {
border: 1px solid salmon;
}
img {
max-width: 380px;
width: 100%;
height: 100%;
border: 1px solid white;
cursor: zoom-in;
}
.empty-message,
.no-img {
position: absolute;
left: 0;
bottom: 0;
padding: 0.3em 0;
width: 100%;
}
.empty-message {
background: rgba(#000, 0.75);
}
}
}
.train-image__info {
margin: 1em 0;
font-size: 1.1em;
padding: 0 1em;
padding: 0.5em;
margin: 0.5em auto;
line-height: 1.35;
b {
font-size: 1.1em;
}
width: 100%;
max-width: 380px;
div {
margin: 0.25em 0;
}
background-color: $secondaryColor;
font-weight: bold;
}
// Transition animations