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

Poprawki responsywności i dostępu; usprawniono layout

Browse Source
This commit is contained in:
Spythere
2022-07-31 17:36:11 +02:00
parent 27405485bd
commit 37f35f94c9
7 changed files with 397 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TrainImageSection.vue
+42 -36
View File
@@ -1,5 +1,5 @@
<template>
<section class="train-image">
<section class="train-image-section">
<div class="train-image__wrapper">
<div class="train-image__content">
<div class="no-img" v-if="!store.chosenVehicle">PODGLĄD WYBRANEGO POJAZDU</div>
@@ -12,35 +12,36 @@
@click="onImageClick"
/>
</div>
</div>
<div class="image__info" v-if="store.chosenVehicle">
<b class="text--accent">{{ store.chosenVehicle.type }} </b>
<div class="train-image__info" v-if="store.chosenVehicle">
<b class="text--accent">{{ store.chosenVehicle.type }} </b>
<div style="color: #ccc">
<b>{{
vehicleTypes[
isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType || 'loco-e'
]
}}</b>
<div style="color: #ccc">
<b>{{
vehicleTypes[
isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType || 'loco-e'
]
}}</b>
<div>
{{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t | {{ store.chosenVehicle.maxSpeed }} km/h
</div>
<div>
{{ store.chosenVehicle.length }}m | {{ store.chosenVehicle.mass }}t |
{{ store.chosenVehicle.maxSpeed }} km/h
</div>
<div v-if="isLocomotive(store.chosenVehicle)">Typ kabiny: {{ store.chosenVehicle.cabinType }}</div>
<div v-if="isLocomotive(store.chosenVehicle)">Typ kabiny: {{ store.chosenVehicle.cabinType }}</div>
<div v-else>
{{
store.chosenVehicle.useType == 'car-cargo'
? carUsage[store.chosenVehicle.constructionType]
: 'Typ konstrukcji: ' + store.chosenVehicle.constructionType
}}
<div v-else>
{{
store.chosenVehicle.useType == 'car-cargo'
? carUsage[store.chosenVehicle.constructionType]
: 'Typ konstrukcji: ' + store.chosenVehicle.constructionType
}}
</div>
</div>
</div>
</div>
<div class="image__info" v-else>Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej</div>
<div class="train-image__info" v-else>Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej</div>
</div>
</section>
</template>
@@ -96,27 +97,29 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.train-image {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
@import '../styles/global.scss';
margin-top: 2.5em;
.train-image-section {
grid-row: 2;
grid-column: 1;
display: flex;
}
.train-image {
&__wrapper {
max-width: 380px;
width: 22em;
height: 13em;
text-align: center;
}
&__content {
border: 1px solid white;
position: relative;
height: 100%;
width: 22em;
height: 13em;
margin: 0 auto;
&.supporter {
border: 1px solid salmon;
@@ -150,11 +153,8 @@ export default defineComponent({
}
}
.image__info {
text-align: center;
.train-image__info {
margin: 1em 0;
font-size: 1.1em;
b {
@@ -165,5 +165,11 @@ export default defineComponent({
margin: 0.25em 0;
}
}
@media screen and (max-width: $breakpointMd) {
.train-image-section {
justify-content: center;
}
}
</style>