Show stops in favourites entry

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>

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;
 

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