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

refactor(app): refreshed app's look&feel, improved responsiveness, viewport width and elements' alignment

Browse Source
This commit is contained in:
Spythere
2026-03-28 14:40:15 +01:00
parent d762cb0536
commit 8392e2fa29
13 changed files with 288 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/TrainImageSection.vue
+8 -27
View File
@@ -5,10 +5,7 @@
<img
:src="getThumbnailURL(store.chosenVehicle.type, 'small')"
:data-preview-available="isDataPreviewAvailable"
:data-sponsor-only="
store.chosenVehicle.sponsorOnlyTimestamp &&
store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
"
:data-sponsor-only="store.chosenVehicle.sponsorOnlyTimestamp && store.chosenVehicle.sponsorOnlyTimestamp > Date.now()"
:data-team-only="store.chosenVehicle.teamOnly"
@click="onImageClick"
@keydown.enter="onImageClick"
@@ -21,23 +18,15 @@
<div class="image-info">
<b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
<b style="color: #ccc">
{{
$t(
`preview.${isTractionUnit(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}`
)
}}
{{ $t(`preview.${isTractionUnit(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}`) }}
</b>
<div style="color: #ccc">
<div>
{{ store.chosenVehicle.length }}m |
{{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t |
{{ store.chosenVehicle.maxSpeed }} km/h
{{ store.chosenVehicle.length }}m | {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t | {{ store.chosenVehicle.maxSpeed }} km/h
</div>
<div v-if="isTractionUnit(store.chosenVehicle)">
{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
</div>
<div v-if="isTractionUnit(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>
<div v-else>
{{
@@ -47,18 +36,10 @@
}}
</div>
<b
v-if="
store.chosenVehicle.sponsorOnlyTimestamp &&
store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
"
class="sponsor-only"
>
<b v-if="store.chosenVehicle.sponsorOnlyTimestamp && store.chosenVehicle.sponsorOnlyTimestamp > Date.now()" class="sponsor-only">
{{
$t('preview.sponsor-only', [
new Date(store.chosenVehicle.sponsorOnlyTimestamp).toLocaleDateString(
$i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'
),
new Date(store.chosenVehicle.sponsorOnlyTimestamp).toLocaleDateString($i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'),
])
}}
</b>
@@ -164,8 +145,8 @@ export default defineComponent({
& > div {
position: relative;
max-width: 100%;
width: 380px;
width: 100%;
max-width: 380px;
}
}