diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue index cffc898..f6ee236 100644 --- a/src/components/TrainsView/TrainInfo.vue +++ b/src/components/TrainsView/TrainInfo.vue @@ -4,18 +4,21 @@
- +
- {{ train.timetableData.category }} {{ train.trainNo }} + + {{ train.timetableData.category }} + + {{ train.trainNo }} | {{ train.driverName }}
- {{ train.timetableData.route.replace('|', ' - ') }} + {{ train.timetableData.route.replace('|', ' - ') }}
-
+
{{ train.locoType }} @@ -40,15 +43,10 @@ {{ $t('trains.timetable-comments').toUpperCase() }}
-
- - - {{ train.trainNo }} | - - {{ $t('trains.no-timetable') }} - - +
+ {{ train.locoType }} +
@@ -68,8 +66,8 @@
- -
+ +
{{ train.trainNo }} | @@ -80,7 +78,7 @@
-
+
@@ -93,10 +91,13 @@ - - {{ train.timetableData.category }} - {{ train.trainNo }} | - {{ train.timetableData.routeDistance }} km + +
+ {{ train.timetableData.category }} + {{ ' ' + train.trainNo }} | + + {{ train.driverName }} +
@@ -122,54 +123,56 @@
- -
+ +
+ +
+ +
+ {{ train.timetableData?.routeDistance }} + km - - {{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} +  •  + {{ `${~~(train[stat.name] * (stat.multiplier || 1))}` }} + {{ stat.unit }}
-
- -
- {{ (train[stat.prop] || '---') + (stat.unit || '') }} +
+ + Na scenerii {{ train['currentStationName'] }} -
-
- -
- - {{ train.driverName }} + +  przy semaforze {{ train['signal'] }} - • - - {{ train.locoType }} + + +  na szlaku {{ train['connectedTrack'] }}
- -
- - {{ $t('trains.cars') }}: - {{ train.cars.length }} - - {{ displayLocoInfo(train.locoType) }} -
+
+ {{ train.locoType }} -
- loco - car -
- + +  • {{ $t('trains.cars') }}: + {{ train.cars.length }} + +
+ +
+ loco + + car +
@@ -200,11 +203,6 @@ export default defineComponent({ STATS: { main: [ - { - name: 'mass', - unit: 't', - multiplier: 0.001, - }, { name: 'speed', unit: 'km/h', @@ -213,6 +211,11 @@ export default defineComponent({ name: 'length', unit: 'm', }, + { + name: 'mass', + unit: 't', + multiplier: 0.001, + }, ], position: [ @@ -308,17 +311,17 @@ export default defineComponent({ } .wrapper { - display: grid; padding: 1em; &.extended-view { - grid-template-columns: repeat(auto-fit, minmax(30em, 1fr)); - grid-template-rows: 1fr; + /* grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); + grid-template-rows: 1fr; */ margin-top: 0.5em; } &.simple-view { + display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr; @@ -373,64 +376,62 @@ export default defineComponent({ } } -.info { +.info-timetable { display: flex; - flex-direction: column; - justify-content: space-between; +} - & .timetable { - &_hero { - display: flex; - } +.timetable { + &_general { + display: flex; + justify-content: space-between; + align-items: center; + } - &_general { - display: flex; - justify-content: space-between; - align-items: center; - } + &_hero { + display: flex; + } - &_srjp .activator { - display: flex; - align-items: center; + &_srjp .activator { + display: flex; + align-items: center; - background-color: #22a8d1; - border-radius: 0.5em; - padding: 0.1em 0.35em; - } + background-color: #22a8d1; + border-radius: 0.5em; + padding: 0.1em 0.35em; + } - &_route { - display: flex; - align-items: center; + &_route { + display: flex; + align-items: center; + + font-weight: bold; + + margin: 5px 0; + + font-size: 1.1em; + } + + &_stops { + margin-bottom: 10px; + font-size: 0.8em; + } + + &_warnings { + display: flex; + color: black; + + .warning { + padding: 0.1em 0.65em; + margin-right: 0.35em; font-weight: bold; - margin: 5px 0; + &.twr { + background: var(--clr-twr); + } - font-size: 1.1em; - } - - &_stops { - 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); - } + &.skr { + background: var(--clr-skr); } } } @@ -444,21 +445,13 @@ export default defineComponent({ padding-top: 1em; - &-info { + &_header { text-align: center; word-wrap: break-word; + margin-top: 1em; } - &-name { - font-weight: bold; - } - - &-loco { - width: 100%; - text-align: center; - } - - &-cars { + &_cars { margin: 0.65em 0; white-space: pre-wrap; text-align: center; @@ -470,60 +463,23 @@ export default defineComponent({ } } - &-stock { + &_stock { display: flex; align-items: flex-end; overflow-x: auto; + width: 100%; + + padding: 0.5em 0; + img { margin: 0 auto; } } -} -.stats { - font-size: 0.9em; - display: flex; - flex-direction: column; - justify-content: space-between; - - padding-top: 1em; - - &-main { - display: flex; - justify-content: space-between; - align-items: center; - - & > span { - display: flex; - justify-content: center; - align-items: center; - - width: 100%; - } - - img { - margin: 0 0.3em; - width: 2em; - } - } - - &-position { - display: flex; - - margin-top: 1em; - text-align: center; - - p { - color: var(--clr-accent); - } - - & > span { - width: 100%; - - img { - width: 2em; - } + &_position { + span { + text-align: center; } } } diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue index 3582c84..91783c4 100644 --- a/src/components/TrainsView/TrainSchedule.vue +++ b/src/components/TrainsView/TrainSchedule.vue @@ -177,8 +177,6 @@ $stopNameClr: #22a8d1; } .train-schedule { - max-height: 600px; - padding-top: 1em; margin-top: 1em; diff --git a/src/components/TrainsView/TrainTimetableCard.vue b/src/components/TrainsView/TrainTimetableCard.vue index dd2f407..7df70a8 100644 --- a/src/components/TrainsView/TrainTimetableCard.vue +++ b/src/components/TrainsView/TrainTimetableCard.vue @@ -75,6 +75,7 @@ export default defineComponent({ width: 100%; max-width: 1000px; + @include smallScreen { width: 95%; }