From 8c362995961217b4ca1179e69c25290fff546c89 Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Sat, 15 Sep 2018 15:15:40 +0200
Subject: [PATCH] colorful lines

---
 resources/components/departures.html   | 11 ++---------
 resources/components/finder.html       |  4 ----
 resources/components/line.html         | 12 ++++++++++++
 resources/components/stop-details.html | 19 +++----------------
 resources/styles/_common.scss          |  3 ++-
 resources/styles/_departure.scss       |  8 ++++++--
 resources/styles/_line.scss            | 13 +++++++++++--
 resources/styles/_stop.scss            |  4 ++++
 resources/styles/main.scss             | 13 +++++++++++--
 resources/ts/components/index.ts       |  1 +
 resources/ts/components/line.ts        | 11 +++++++++++
 resources/ts/components/utils.ts       |  4 ++++
 12 files changed, 67 insertions(+), 36 deletions(-)
 create mode 100644 resources/components/line.html
 create mode 100644 resources/ts/components/line.ts

diff --git a/resources/components/departures.html b/resources/components/departures.html
index faa0a73..dd4ea85 100644
--- a/resources/components/departures.html
+++ b/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="line__symbol d-flex align-items-center">
-                    <fa :icon="['fac', departure.line.type]" fixed-width class="mr-1"/>
-                    {{ departure.line.symbol }}
-                </div>
+            <div class="departure__line">
+                <line-symbol :line="departure.line"></line-symbol>
                 <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">
diff --git a/resources/components/finder.html b/resources/components/finder.html
index 7816bff..cc35fd5 100644
--- a/resources/components/finder.html
+++ b/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">
diff --git a/resources/components/line.html b/resources/components/line.html
new file mode 100644
index 0000000..bdb7a06
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/components/stop-details.html b/resources/components/stop-details.html
index aa2a531..ec8ff4a 100644
--- a/resources/components/stop-details.html
+++ b/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">
-                    <fa :icon="['fac', line.type]" fixed-width></fa>
-
-                    <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 v-for="line in lines" class="list-inline-item mb-2">
+                    <line-symbol :line="line"></line-symbol>
                 </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>
-                        <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>
+                        <line-symbol :line="track.line"></line-symbol>
                     </div>
                     <div class="track__description">
                         {{ track.description }}
diff --git a/resources/styles/_common.scss b/resources/styles/_common.scss
index ba8397f..3817c30 100644
--- a/resources/styles/_common.scss
+++ b/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;
   }
 }
 
diff --git a/resources/styles/_departure.scss b/resources/styles/_departure.scss
index eec0796..926a346 100644
--- a/resources/styles/_departure.scss
+++ b/resources/styles/_departure.scss
@@ -1,10 +1,14 @@
 .departure {
-  display: flex;
-  align-items: center;
+  @extend .flex;
   flex-wrap: wrap;
 
   .departure__line {
+    @extend .flex;
     flex: 3 0;
+
+    .line__symbol {
+      min-width: 5rem;
+    }
   }
 
   .departure__stop {
diff --git a/resources/styles/_line.scss b/resources/styles/_line.scss
index 3404cdc..48ef102 100644
--- a/resources/styles/_line.scss
+++ b/resources/styles/_line.scss
@@ -1,8 +1,17 @@
 .line {
   @extend .flex;
+}
 
-  .line__symbol {
-    min-width: 4rem;
+.line__symbol {
+  @each $type, $color in $line-types {
+    .icon {
+      padding: 0 .2rem;
+    }
+
+    &.line--#{$type} .icon {
+      background-color: $color;
+      color: color-yiq($color);
+    }
   }
 }
 
diff --git a/resources/styles/_stop.scss b/resources/styles/_stop.scss
index 6b3054d..222382a 100644
--- a/resources/styles/_stop.scss
+++ b/resources/styles/_stop.scss
@@ -25,4 +25,8 @@
   font-weight: bold;
 
   margin-bottom: 0;
+}
+
+.stop__tracks .line__symbol .badge {
+  flex-grow: 1;
 }
\ No newline at end of file
diff --git a/resources/styles/main.scss b/resources/styles/main.scss
index 4b05596..32e2bfd 100644
--- a/resources/styles/main.scss
+++ b/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";
@@ -15,4 +22,6 @@ $custom-control-indicator-active-bg: $dark;
 @import "departure";
 @import "line";
 @import "controls";
-@import "popper";
\ No newline at end of file
+@import "popper";
+
+svg.svg-inline--fa { transform: rotate(360deg) }
\ No newline at end of file
diff --git a/resources/ts/components/index.ts b/resources/ts/components/index.ts
index 1bafc2c..b7d91f8 100644
--- a/resources/ts/components/index.ts
+++ b/resources/ts/components/index.ts
@@ -1,4 +1,5 @@
 export * from './utils'
+export * from './line'
 export * from './picker'
 export * from './departures'
 export * from './stop'
diff --git a/resources/ts/components/line.ts b/resources/ts/components/line.ts
new file mode 100644
index 0000000..bce6353
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/resources/ts/components/utils.ts b/resources/ts/components/utils.ts
index dda02f5..f15599c 100644
--- a/resources/ts/components/utils.ts
+++ b/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') })