colorful lines

resources/components/departures.html

@@ -18,16 +18,9 @@
 
     <ul class="departures__list list-underlined">
         <li class="departure" v-for="departure in departures">
-            <div class="departure__line line">
+            <div class="departure__line">
-                <div class="line__symbol d-flex align-items-center">
+                <line-symbol :line="departure.line"></line-symbol>
-                    <fa :icon="['fac', departure.line.type]" fixed-width class="mr-1"/>
-                    {{ departure.line.symbol }}
-                </div>
                 <div class="line__display">{{ departure.display }}</div>
-                <div class="line__perks flex-space-left">
-                    <fa :icon="['fas', 'walking']" fixed-width v-if="departure.line.fast"/>
-                    <fa :icon="['fal', 'moon']" fixed-width v-if="departure.line.night"/>
-                </div>
             </div>
 
             <div class="departure__time">

resources/components/finder.html

@@ -7,10 +7,6 @@
     <div class="finder__stops" v-else-if="filter.length > 2 && Object.keys(filtered).length > 0">
         <div class="stop-group" v-for="(group, name) in filtered">
             <div class="stop-group__header">
-                <button class="btn btn-action">
-                    <fa :icon="['fal', 'chevron-down']"></fa>
-                </button>
-
                 <h3 class="stop-group__name">{{ name }}</h3>
 
                 <div class="actions flex-space-left">

resources/components/line.html

@@ -0,0 +1,12 @@
+<span class="line__symbol flex" :class="[`line--${line.type}`]">
+    <span class="flex align-items-stretch">
+        <span class="icon">
+            <fa :icon="['fac', line.type]" fixed-width></fa>
+        </span>
+        <span class="badge badge-dark flex">
+            <fa :icon="['fas', 'walking']" fixed-width v-if="line.fast"></fa>
+            <fa :icon="['fal', 'moon']" fixed-width v-if="line.night"></fa>
+            {{ line.symbol }}
+        </span>
+    </span>
+</span>

resources/components/stop-details.html

@@ -3,15 +3,8 @@
         <div class="col-md">
             <strong>Linie:</strong>
             <ul class="stop__lines list-unstyled list-inline">
-                <li v-for="line in lines" class="list-inline-item">
+                <li v-for="line in lines" class="list-inline-item mb-2">
-                    <fa :icon="['fac', line.type]" fixed-width></fa>
+                    <line-symbol :line="line"></line-symbol>
-
-                    <span class="badge badge-dark">
-                        <fa :icon="['fas', 'walking']" fixed-width v-if="line.fast"/>
-                        <fa :icon="['fal', 'moon']" fixed-width v-if="line.night"/>
-
-                        {{ line.symbol }}
-                    </span>
                 </li>
             </ul>
 
@@ -29,13 +22,7 @@
             <ul class="stop__tracks list-underlined">
                 <li v-for="{ track, order } in tracks" class="track">
                     <div class="track__line">
-                        <fa :icon="['fac', track.line.type]" fixed-width></fa>
+                        <line-symbol :line="track.line"></line-symbol>
-                        <span class="badge badge-dark">
-                            <fa :icon="['fas', 'walking']" fixed-width v-if="track.line.fast"/>
-                            <fa :icon="['fal', 'moon']" fixed-width v-if="track.line.night"/>
-
-                            {{ track.line.symbol }}
-                        </span>
                     </div>
                     <div class="track__description">
                         {{ track.description }}

resources/styles/_common.scss

@@ -2,7 +2,8 @@
   @extend .list-unstyled;
 
   > li {
-    border-bottom: 1px solid $text-muted;
+    border-bottom: 1px solid $dark;
+    padding: 2px 0;
   }
 }
 

resources/styles/_departure.scss

@@ -1,10 +1,14 @@
 .departure {
-  display: flex;
+  @extend .flex;
-  align-items: center;
   flex-wrap: wrap;
 
   .departure__line {
+    @extend .flex;
     flex: 3 0;
+
+    .line__symbol {
+      min-width: 5rem;
+    }
   }
 
   .departure__stop {

resources/styles/_line.scss

@@ -1,8 +1,17 @@
 .line {
   @extend .flex;
+}
 
-  .line__symbol {
+.line__symbol {
-    min-width: 4rem;
+  @each $type, $color in $line-types {
+    .icon {
+      padding: 0 .2rem;
+    }
+
+    &.line--#{$type} .icon {
+      background-color: $color;
+      color: color-yiq($color);
+    }
   }
 }
 

resources/styles/_stop.scss

@@ -26,3 +26,7 @@
 
   margin-bottom: 0;
 }
+
+.stop__tracks .line__symbol .badge {
+  flex-grow: 1;
+}

resources/styles/main.scss

@@ -1,13 +1,20 @@
 $border-radius: 0;
 $border-radius-lg: $border-radius;
 $border-radius-sm: $border-radius;
-
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 
 $custom-control-indicator-checked-bg: $dark;
 $custom-control-indicator-active-bg: $dark;
 
+$line-types: (
+  'trolleybus': #419517,
+  'tram':       #cd2e12,
+  'bus':        #005ea8,
+  'train':      $yellow,
+  'unknown':    $dark
+);
+
 @import "~bootstrap/scss/bootstrap";
 
 @import "common";
@@ -16,3 +23,5 @@ $custom-control-indicator-active-bg: $dark;
 @import "line";
 @import "controls";
 @import "popper";
+
+svg.svg-inline--fa { transform: rotate(360deg) }

resources/ts/components/index.ts

@@ -1,4 +1,5 @@
 export * from './utils'
+export * from './line'
 export * from './picker'
 export * from './departures'
 export * from './stop'

resources/ts/components/line.ts

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import { Line } from "../model";
+
+@Component({ template: require('../../components/line.html' )})
+export class LineComponent extends Vue {
+    @Prop(Object)
+    public line: Line;
+}
+
+Vue.component('LineSymbol', LineComponent);

resources/ts/components/utils.ts

@@ -37,6 +37,10 @@ export class PopperComponent extends Vue {
         this._popper.update();
         window.dispatchEvent(new Event('resize'));
     }
+
+    destroyed() {
+        this._popper.destroy();
+    }
 }
 
 @Component({ template: require('../../components/fold.html') })