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

Poprawki interfejsu

Browse Source
This commit is contained in:
Spythere
2021-06-29 17:55:22 +02:00
parent 2a23604b9c
commit 668e2027f9
7 changed files with 58 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TrainsView/TrainTable.vue
+41 -31
View File
@@ -45,19 +45,22 @@
<div class="info_timetable" v-else>
<div class="timetable_general">
<span class="warning twr" v-if="train.timetableData.TWR">
TWR
</span>
<span class="timetable_hero">
<span class="timetable_warnings">
<span class="warning twr" v-if="train.timetableData.TWR">
TWR
</span>
<span class="warning skr" v-if="train.timetableData.SKR">
SKR
</span>
</span>
<span class="warning skr" v-if="train.timetableData.SKR">
SKR
</span>
<span>
<strong>{{ train.timetableData.category }}</strong>
{{ train.trainNo }} |
<span style="color: gold">
{{ train.timetableData.routeDistance }} km
<span>
<strong>{{ train.timetableData.category }}</strong>
{{ train.trainNo }} |
<span style="color: gold">
{{ train.timetableData.routeDistance }} km
</span>
</span>
</span>
@@ -423,6 +426,10 @@ img.train-image {
.info {
.timetable {
&_hero {
display: flex;
}
&_general {
display: flex;
justify-content: space-between;
@@ -441,6 +448,8 @@ img.train-image {
display: flex;
align-items: center;
font-weight: bold;
margin: 5px 0;
font-size: 1.1em;
@@ -450,6 +459,26 @@ img.train-image {
margin-bottom: 10px;
font-size: 0.7em;
}
&_warnings {
display: flex;
color: black;
.warning {
padding: 0.1em 0.65em;
margin-right: 0.35em;
font-weight: bold;
&.twr {
background: var(--clr-twr);
}
&.skr {
background: var(--clr-skr);
}
}
}
}
}
@@ -537,25 +566,6 @@ img.train-image {
}
}
.warning {
padding: 0.1em 0.8em;
margin-right: 0.5em;
display: flex;
align-items: center;
color: black;
font-weight: bold;
&.twr {
background: var(--clr-twr);
}
&.skr {
background: var(--clr-skr);
}
}
@include smallScreen() {
.info-bottom {
text-align: center;