Wybierz przystanki korzystając z wyszukiwarki poniżej, aby zobaczyć listę odjazdów.
diff --git a/resources/components/departures/departure.html b/resources/components/departures/departure.html
new file mode 100644
index 0000000..a83199c
--- /dev/null
+++ b/resources/components/departures/departure.html
@@ -0,0 +1,29 @@
+
+
+
+
{{ departure.display }}
+
+
+
+
+
+ {{ departure.scheduled.format('HH:mm') }}
+
+
+ {{ departure.delay|signed }}s
+
+ {{ time.format('HH:mm') }}
+
+
+
+
diff --git a/resources/styles/_common.scss b/resources/styles/_common.scss
index 29b9570..9e8c0ce 100644
--- a/resources/styles/_common.scss
+++ b/resources/styles/_common.scss
@@ -95,7 +95,7 @@
}
svg.svg-inline--fa {
- transform: rotate(360deg)
+ //transform: rotate(360deg)
}
.btn-unstyled {
@@ -108,4 +108,4 @@ svg.svg-inline--fa {
.icon {
padding: .5rem 0.75rem;
-}
\ No newline at end of file
+}
diff --git a/resources/styles/_departure.scss b/resources/styles/_departure.scss
index 08be2ad..10d908a 100644
--- a/resources/styles/_departure.scss
+++ b/resources/styles/_departure.scss
@@ -1,36 +1,29 @@
.departure {
@extend .flex;
flex-wrap: wrap;
+}
- .departure__line {
- @extend .flex;
- flex: 3 0;
+.departure__line {
+ @extend .flex;
+ flex: 3 0;
- .line__symbol {
- min-width: 6rem;
- }
- }
-
- .departure__stop {
- @extend .flex;
- width: 100%;
-
- .stop {
- flex: 1 1 auto;
- }
- }
-
- .departure__time {
- width: 9rem;
- text-align: right;
-
- .departure__scheduled--delayed {
- text-decoration: line-through;
- }
+ .line__symbol {
+ min-width: 6rem;
}
+}
+.departure__stop {
+ @extend .flex;
+ width: 100%;
+}
+.departure__time {
+ width: 9rem;
+ text-align: right;
+}
+.departure__time--delayed {
+ text-decoration: line-through;
}
.departures {
diff --git a/resources/styles/_line.scss b/resources/styles/_line.scss
index 6a80024..52d476f 100644
--- a/resources/styles/_line.scss
+++ b/resources/styles/_line.scss
@@ -2,6 +2,10 @@
@extend .flex;
}
+.line__display {
+ line-height: 1.2;
+}
+
.line__symbol {
@each $type, $color in $line-types {
.icon {
@@ -45,4 +49,4 @@
flex: 1 1 auto;
white-space: normal;
}
-}
\ No newline at end of file
+}
diff --git a/resources/styles/_stop.scss b/resources/styles/_stop.scss
index 96fea65..5151334 100644
--- a/resources/styles/_stop.scss
+++ b/resources/styles/_stop.scss
@@ -5,6 +5,8 @@
}
.stop__name {
+ flex: 1 0;
+ line-height: 1.2;
}
.stop__variant {
diff --git a/resources/ts/components/departures.ts b/resources/ts/components/departures.ts
index a96968b..99114e4 100644
--- a/resources/ts/components/departures.ts
+++ b/resources/ts/components/departures.ts
@@ -7,7 +7,7 @@ import store from '../store'
const { State } = namespace('departures');
@Component({ template: require("../../components/departures.html"), store })
-export class Departures extends Vue {
+export class DeparturesComponent extends Vue {
@State
departures: Departure[];
@@ -15,4 +15,21 @@ export class Departures extends Vue {
stops: Stop[];
}
-Vue.component('Departures', Departures);
+@Component({ template: require("../../components/departures/departure.html"), store })
+export class DepartureComponent extends Vue {
+ @Prop(Object)
+ departure: Departure;
+
+ get timeDiffers() {
+ const departure = this.departure;
+
+ return departure.estimated && departure.scheduled.format('HH:mm') !== departure.estimated.format('HH:mm');
+ }
+
+ get time() {
+ return this.departure.estimated || this.departure.scheduled;
+ }
+}
+
+Vue.component('Departures', DeparturesComponent);
+Vue.component('Departure', DepartureComponent);