Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-04 22:08:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dodano uwagi eksploatacyjne do uproszczonego widoku pociągów

Browse Source
This commit is contained in:
Spythere
2022-01-27 22:42:46 +01:00
parent f064a587bd
commit 6d6581a0d8
1 changed files with 48 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TrainsView/TrainInfo.vue
+48 -10
View File
@@ -22,9 +22,23 @@
| |
<span style="color: gold"> {{ train.timetableData.routeDistance }} km </span> <span style="color: gold"> {{ train.timetableData.routeDistance }} km </span>
| |
<span> {{ $t('trains.route-progress') }} {{ confirmedPercentage(train.timetableData.followingStops) }}%</span> <span>
{{ $t('trains.route-progress') }} {{ confirmedPercentage(train.timetableData.followingStops) }}%</span
>
| |
<span v-html="currentDelay(train.timetableData.followingStops)"></span> <span v-html="currentDelay(train.timetableData.followingStops)"></span>
<div class="comments" v-if="getSceneriesWithComments(train.timetableData).length > 0">
<img
class="image-warning"
:src="icons.warning"
:title="
`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData).join(',')})`
"
/>
<b>{{ $t('trains.timetable-comments').toUpperCase() }}</b>
</div>
</div> </div>
</span> </span>
@@ -41,8 +55,7 @@
<span> </span> <span> </span>
<span class="info-stats"> <span class="info-stats">
<span v-for="(stat, i) in STATS.main" :key="stat.name"> <span v-for="stat in STATS.main" :key="stat.name">
<span v-if="i > 0"> &bull; </span>
<span>{{ $t(`trains.option-${stat.name}`).toUpperCase() }}</span <span>{{ $t(`trains.option-${stat.name}`).toUpperCase() }}</span
>: >:
<span class="text--primary">{{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} </span> <span class="text--primary">{{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} </span>
@@ -100,6 +113,7 @@
<div class="info_comments" v-if="getSceneriesWithComments(train.timetableData).length > 0"> <div class="info_comments" v-if="getSceneriesWithComments(train.timetableData).length > 0">
<img <img
class="image-warning"
:src="icons.warning" :src="icons.warning"
:title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData).join(',')})`" :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData).join(',')})`"
/> />
@@ -281,6 +295,10 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../styles/responsive.scss'; @import '../../styles/responsive.scss';
.image-warning {
width: 1.35em;
}
.wrapper { .wrapper {
display: grid; display: grid;
padding: 1em; padding: 1em;
@@ -293,7 +311,7 @@ export default defineComponent({
} }
&.simple-view { &.simple-view {
grid-template-columns: 2fr 1fr 2fr; grid-template-columns: 4fr 1fr 2fr;
grid-template-rows: 1fr; grid-template-rows: 1fr;
&:hover { &:hover {
@@ -302,6 +320,23 @@ export default defineComponent({
.info-stats { .info-stats {
text-align: right; text-align: right;
display: flex;
flex-direction: column;
}
.comments {
display: flex;
align-items: center;
font-size: 0.9em;
margin-top: 1em;
img {
margin-right: 0.5em;
}
} }
@include smallScreen() { @include smallScreen() {
@@ -312,6 +347,15 @@ export default defineComponent({
.info-stats { .info-stats {
text-align: center; text-align: center;
} }
.comments {
flex-direction: column;
justify-content: center;
img {
margin: 0 0 0.5em 0;
}
}
} }
} }
@@ -381,12 +425,6 @@ export default defineComponent({
} }
} }
} }
&_comments {
img {
width: 1.75em;
}
}
} }
.driver { .driver {