From 4bd5ee14ca2d9cbaecf95257e731c032a7f49358 Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Sun, 26 Jan 2020 17:46:25 +0100
Subject: [PATCH] Show stops in favourites entry

---
 resources/components/favourites.html          | 19 ++++++++++++-------
 .../{_fabourites.scss => _favourites.scss}    | 15 +++++++++++++++
 resources/styles/main.scss                    |  2 +-
 3 files changed, 28 insertions(+), 8 deletions(-)
 rename resources/styles/{_fabourites.scss => _favourites.scss} (71%)

diff --git a/resources/components/favourites.html b/resources/components/favourites.html
index b47e62a..75cc125 100644
--- a/resources/components/favourites.html
+++ b/resources/components/favourites.html
@@ -1,12 +1,17 @@
 <div class="favourites">
     <ul class="list-underlined" v-if="favourites.length > 0">
-        <li v-for="favourite in favourites" class="flex">
-            <a href="#" @click="choose(favourite)" class="btn btn-action pl-0 flex-grow-1 text-left">
-                <span class="icon">
-                    <fa :icon="['fal', 'star']"></fa>
-                </span>
-                <span class="text">{{ favourite.name }}</span>
-            </a>
+        <li v-for="favourite in favourites" class="favourite">
+            <button @click="choose(favourite)" class="favourite__entry">
+                <div class="icon">
+                    <fa :icon="['fal', 'star']"/>
+                </div>
+                <div class="d-flex flex-column">
+                    <span class="text flex-grow-1">{{ favourite.name }}</span>
+                    <ul class="favourite__stops">
+                        <li class="favourite__stop" v-for="stop in favourite.stops" :key="stop.id"><stop :stop="stop"/></li>
+                    </ul>
+                </div>
+            </button>
             <button class="btn btn-action" @click="remove(favourite)">
                 <fa :icon="['fal', 'trash-alt']"></fa>
             </button>
diff --git a/resources/styles/_fabourites.scss b/resources/styles/_favourites.scss
similarity index 71%
rename from resources/styles/_fabourites.scss
rename to resources/styles/_favourites.scss
index 9309cce..bbb50c9 100644
--- a/resources/styles/_fabourites.scss
+++ b/resources/styles/_favourites.scss
@@ -17,6 +17,21 @@
   }
 }
 
+.favourite {
+  display: flex;
+}
+
+.favourite__entry {
+  @extend .btn;
+  @extend .btn-action;
+
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  padding: 0;
+  text-align: left;
+}
+
 .favourite__stop {
   display: inline-flex;
 
diff --git a/resources/styles/main.scss b/resources/styles/main.scss
index 9d185cd..e56517a 100644
--- a/resources/styles/main.scss
+++ b/resources/styles/main.scss
@@ -60,7 +60,7 @@ $grid-gutter-width: $spacer * 2;
 @import "popper";
 @import "animations";
 @import "form";
-@import "fabourites";
+@import "favourites";
 @import "trip";
 @import "dragscroll";