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

Poprawki z ładowaniem obrazków

Browse Source
This commit is contained in:
Spythere
2022-08-04 23:36:19 +02:00
parent 6c78667baa
commit 4fe0db1440
2 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+2 -2
View File
@@ -6,9 +6,9 @@
<div class="g-card-dimmer" v-if="store.isRandomizerCardOpen" @click="store.isRandomizerCardOpen = false"></div> <div class="g-card-dimmer" v-if="store.isRandomizerCardOpen" @click="store.isRandomizerCardOpen = false"></div>
<div class="g-card-dimmer" v-if="store.isRealStockListCardOpen" @click="store.isRealStockListCardOpen = false"></div> <div class="g-card-dimmer" v-if="store.isRealStockListCardOpen" @click="store.isRealStockListCardOpen = false"></div>
<keep-alive> <!-- <keep-alive> -->
<RandomizerCard v-if="store.isRandomizerCardOpen" /> <RandomizerCard v-if="store.isRandomizerCardOpen" />
</keep-alive> <!-- </keep-alive> -->
<div class="app_container"> <div class="app_container">
<header> <header>
src/components/TrainImageSection.vue
+22 -9
View File
@@ -2,8 +2,12 @@
<section class="train-image-section"> <section class="train-image-section">
<div class="train-image__wrapper"> <div class="train-image__wrapper">
<div class="train-image__content"> <div class="train-image__content">
<transition name="img-message-anim">
<div class="empty-message" v-if="store.imageLoading">ŁADOWANIE OBRAZU...</div>
</transition>
<div class="no-img" v-if="!store.chosenVehicle">PODGLĄD WYBRANEGO POJAZDU</div> <div class="no-img" v-if="!store.chosenVehicle">PODGLĄD WYBRANEGO POJAZDU</div>
<div class="empty-message" v-if="store.imageLoading">ŁADOWANIE OBRAZU...</div>
<img <img
v-if="store.chosenVehicle" v-if="store.chosenVehicle"
:src="store.chosenVehicle.imageSrc" :src="store.chosenVehicle.imageSrc"
@@ -78,7 +82,7 @@ export default defineComponent({
watch: { watch: {
chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) { chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) {
if (vehicle?.type != prevVehicle?.type) { if (vehicle && vehicle.type != prevVehicle?.type) {
this.store.imageLoading = true; this.store.imageLoading = true;
} }
}, },
@@ -122,6 +126,7 @@ export default defineComponent({
&__content { &__content {
border: 1px solid white; border: 1px solid white;
position: relative; position: relative;
overflow: hidden;
width: 22em; width: 22em;
height: 13em; height: 13em;
@@ -143,15 +148,10 @@ export default defineComponent({
.no-img { .no-img {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; bottom: 0;
display: flex;
justify-content: center;
align-items: flex-end;
width: 100%;
height: 100%;
padding: 0.3em 0; padding: 0.3em 0;
width: 100%;
} }
.empty-message { .empty-message {
@@ -174,6 +174,19 @@ export default defineComponent({
} }
} }
// Transition animations
.img-message-anim {
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-active,
&-leave-active {
transition: opacity 75ms ease-in 100ms;
}
}
@media screen and (max-width: $breakpointMd) { @media screen and (max-width: $breakpointMd) {
.train-image-section { .train-image-section {
justify-content: center; justify-content: center;