Fix order of scheduled and actual departure time

resources/components/departures.html

@@ -1,30 +1,7 @@
 <div class="departures" v-responsive>
     <ul class="departures__list list-underlined">
-        <li class="departure" v-for="departure in departures">
+        <departure :departure="departure" v-for="departure in departures"/>
-            <div class="departure__line">
-                <line-symbol :line="departure.line"/>
-                <div class="line__display">{{ departure.display }}</div>
-            </div>
-
-            <div class="departure__time">
-                <fa :icon="['far', 'clock']" v-if="!departure.estimated" title="Czas rozkładowy, nieuwzględniający aktualnej sytuacji komunikacyjnej."/>
-                <span class="departure__estimated" v-if="departure.estimated && departure.scheduled.format('HH:mm') !== departure.estimated.format('HH:mm')">{{ departure.estimated.format('HH:mm') }}</span>
-                <span class="badge" :class="[departure.delay < 0 ? 'badge-danger' : 'badge-warning']"
-                      v-if="departure.delay < 0 || departure.delay > 30">
-                    {{ departure.delay|signed }}s
-                </span>
-                <span :class="[ 'departure__scheduled', departure.estimated && departure.scheduled.format('HH:mm') !== departure.estimated.format('HH:mm') && 'departure__scheduled--delayed']">
-                    {{ departure.scheduled.format('HH:mm') }}
-                </span>
-            </div>
-
-            <div class="departure__stop">
-                <fa :icon="['fal', 'sign']" fixed-width class="mr-1"/>
-                <stop :stop="departure.stop"/>
-            </div>
-        </li>
     </ul>
-
     <div class="alert alert-info" v-if="stops.length === 0">
         <fa :icon="['fal', 'info-circle']"/>
         Wybierz przystanki korzystając z wyszukiwarki poniżej, aby zobaczyć listę odjazdów.

resources/components/departures/departure.html

@@ -0,0 +1,29 @@
+<li class="departure">
+    <div class="departure__line">
+        <line-symbol :line="departure.line"/>
+        <div class="line__display">{{ departure.display }}</div>
+    </div>
+
+    <div class="departure__time">
+        <fa :icon="['far', 'clock']" v-if="!departure.estimated" title="Czas rozkładowy, nieuwzględniający aktualnej sytuacji komunikacyjnej."/>
+        <span :class="[ 'departure__time', 'departure__time--delayed']" v-if="timeDiffers">
+            {{ departure.scheduled.format('HH:mm') }}
+        </span>
+        <span class="badge" :class="[departure.delay < 0 ? 'badge-danger' : 'badge-warning']"
+              v-if="departure.delay < 0 || departure.delay > 30">
+                    {{ departure.delay|signed }}s
+        </span>
+        <span class="departure__time">{{ time.format('HH:mm') }}</span>
+    </div>
+
+    <div class="departure__stop">
+        <fa :icon="['fal', 'sign']" fixed-width class="mr-1 flex-shrink-0"/>
+        <stop :stop="departure.stop"/>
+
+        <div class="stop__actions flex-space-left">
+            <button class="btn btn-action">
+                <fa :icon="['far', 'code-commit']" rotation="90" />
+            </button>
+        </div>
+    </div>
+</li>

resources/styles/_common.scss

@@ -95,7 +95,7 @@
 }
 
 svg.svg-inline--fa {
-  transform: rotate(360deg)
+  //transform: rotate(360deg)
 }
 
 .btn-unstyled {

resources/styles/_departure.scss

@@ -1,36 +1,29 @@
 .departure {
   @extend .flex;
   flex-wrap: wrap;
+}
 
-  .departure__line {
+.departure__line {
   @extend .flex;
   flex: 3 0;
 
   .line__symbol {
     min-width: 6rem;
   }
-  }
+}
 
-  .departure__stop {
+.departure__stop {
   @extend .flex;
   width: 100%;
+}
 
-    .stop {
+.departure__time {
-      flex: 1 1 auto;
-    }
-  }
-
-  .departure__time {
   width: 9rem;
   text-align: right;
+}
 
-    .departure__scheduled--delayed {
+.departure__time--delayed {
   text-decoration: line-through;
-    }
-  }
-
-
-
 }
 
 .departures {

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 {

resources/styles/_stop.scss

@@ -5,6 +5,8 @@
 }
 
 .stop__name {
+  flex: 1 0;
+  line-height: 1.2;
 }
 
 .stop__variant {

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);