diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue index 38eb517..e053f34 100644 --- a/src/components/TrainsView/TrainSchedule.vue +++ b/src/components/TrainsView/TrainSchedule.vue @@ -17,9 +17,7 @@ v-if=" i > 0 && followingStops[i - 1].departureLine != stop.arrivalLine " - > - {{ stop.arrivalLine }} - + >{{ stop.arrivalLine }}
@@ -33,18 +31,18 @@ delayed: stop.arrivalDelay > 0, preponed: stop.arrivalDelay < 0, }" - >p. - {{ - stylizeTime(stop.arrivalRealTimeString, stop.arrivalDelay) - }}
+ p. + {{ + stylizeTime(stop.arrivalRealTimeString, stop.arrivalDelay) + }} + {{ stop.stopTime }} {{ stop.stopType }} + >{{ stop.stopTime }} {{ stop.stopType }} 0, preponed: stop.departureDelay < 0, }" - >o. - {{ - stylizeTime(stop.departureRealTimeString, stop.departureDelay) - }} + o. + {{ + stylizeTime(stop.departureRealTimeString, stop.departureDelay) + }} + @@ -79,13 +78,15 @@ export default class TrainSchedule extends Vue { @Prop() readonly currentStationName!: string; stylizeTime(timeString: string, delay: number) { - return timeString + (delay != 0 ? " (" + (delay > 0 ? "+" : "") + delay.toString() + ")" : ""); + return ( + timeString + + (delay != 0 ? " (" + (delay > 0 ? "+" : "") + delay.toString() + ")" : "") + ); } click() { - this.$emit('click') + this.$emit("click"); } - } diff --git a/src/views/TimetableView.vue b/src/views/TimetableView.vue index 0f6cdf6..d76b19e 100644 --- a/src/views/TimetableView.vue +++ b/src/views/TimetableView.vue @@ -4,6 +4,7 @@
ODJAZDY
+
DO STACJI PRZEZ @@ -11,6 +12,7 @@ PLAN. ODJAZD OPÓŹNIENIE
+
@@ -24,6 +26,7 @@
+
@@ -31,20 +34,28 @@
+ - - - {{ - timetable.number - ? `${timetable.category} ${timetable.number}` - : "" - }} +
+ + + {{ letter }} + - +
+ +
+ + + {{ num }} + + +
+
- + {{ num }} @@ -63,6 +74,7 @@
+ @@ -459,7 +593,7 @@ $bg: #111; &-header, &-row { display: grid; - grid-template-columns: 4fr 4fr 2fr 1fr 1fr; + grid-template-columns: 4fr 4fr 3fr 1fr 1fr; } &-header { @@ -468,6 +602,7 @@ $bg: #111; justify-content: center; align-items: center; } + text-align: center; font-size: 0.35em; @@ -506,26 +641,28 @@ $bg: #111; display: flex; } -.row-bar { - width: 100%; - height: 3px; - background: white; - - margin-top: 0.5rem; -} - .row { + &-bar { + width: 100%; + height: 3px; + background: white; + + margin-top: 0.5rem; + } + &-type { text-align: center; - span { - display: inline-block; - width: 60%; - min-height: 40px; - line-height: 40px; - - background: firebrick; + div { + margin: 0 0.5em; } + + // span { + // display: inline-block; + // width: 60%; + // min-height: 40px; + // line-height: 40px; + // } } &-delay { @@ -542,6 +679,12 @@ $bg: #111; } } +.type { + &-category { + background: red; + } +} + .roll-anim-enter-active, .roll-anim-leave-active { transition: all 75ms;