From 2b0792775fb03b4e0cbdb0baf1600b87009faa9f Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Thu, 6 Feb 2020 23:01:25 +0100
Subject: [PATCH] Fix overflow errors

---
 resources/components/favourites.html  |  2 +-
 resources/components/finder.html      |  2 +-
 resources/components/picker/stop.html | 14 ++++++++------
 resources/styles/_favourites.scss     |  2 ++
 resources/styles/_stop.scss           | 20 ++++++++++++++++----
 resources/styles/main.scss            |  1 +
 templates/app.html.twig               |  2 +-
 7 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/resources/components/favourites.html b/resources/components/favourites.html
index 1c37382..0e49f25 100644
--- a/resources/components/favourites.html
+++ b/resources/components/favourites.html
@@ -5,7 +5,7 @@
                 <div class="icon">
                     <fa :icon="['fal', 'star']"/>
                 </div>
-                <div class="d-flex flex-column">
+                <div class="overflow-hidden">
                     <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>
diff --git a/resources/components/finder.html b/resources/components/finder.html
index 9f26c5a..72c38f4 100644
--- a/resources/components/finder.html
+++ b/resources/components/finder.html
@@ -24,7 +24,7 @@
                 <li v-for="stop in group" :key="stop.id" class="d-flex">
                     <picker-stop :stop="stop" class="flex-grow-1">
                         <template v-slot:primary-action>
-                            <button @click="select(stop, $event)" class="btn btn-action align-self-start">
+                            <button @click="select(stop, $event)" class="btn btn-action">
                                 <tooltip>dodaj przystanek</tooltip>
                                 <fa :icon="['fal', 'check']" />
                             </button>
diff --git a/resources/components/picker/stop.html b/resources/components/picker/stop.html
index 1e9de69..23600fd 100644
--- a/resources/components/picker/stop.html
+++ b/resources/components/picker/stop.html
@@ -1,12 +1,14 @@
 <div class="finder__stop">
     <div class="d-flex">
         <slot name="primary-action" />
-        <div style="overflow: hidden">
-            <stop :stop="stop" />
-<!--            <div style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, ut!</div>-->
-            <ul class="stop__destinations">
-                <li class="stop__destination" v-for="destination in stop.destinations" :key="destination.id"><stop :stop="destination"/></li>
-            </ul>
+        <div class="overflow-hidden align-self-center">
+            <stop :stop="stop" class="my-1"/>
+            <div class="stop__destinations" v-if="stop.destinations && stop.destinations.length > 0">
+                <fa :icon="['far', 'chevron-right']" />
+                <ul class="ml-1">
+                    <li class="stop__destination" v-for="destination in stop.destinations" :key="destination.id">{{ destination.name }}</li>
+                </ul>
+            </div>
         </div>
 
         <div class="stop__actions flex-space-left">
diff --git a/resources/styles/_favourites.scss b/resources/styles/_favourites.scss
index 27f3d79..76b41c6 100644
--- a/resources/styles/_favourites.scss
+++ b/resources/styles/_favourites.scss
@@ -31,6 +31,8 @@
   align-items: center;
   padding: 0;
   text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .favourite__stop {
diff --git a/resources/styles/_stop.scss b/resources/styles/_stop.scss
index e0c48fe..d194b20 100644
--- a/resources/styles/_stop.scss
+++ b/resources/styles/_stop.scss
@@ -1,13 +1,15 @@
-.stop, .stop-group__header {
+.stop-group__header {
   @extend .flex;
 
   flex-wrap: wrap;
 }
 
+.stop {
+  flex-wrap: nowrap;
+}
+
 .stop__name {
-  //flex: 1 0;
   line-height: 1.1;
-  margin-right: .5em;
 }
 
 .stop__actions {
@@ -26,6 +28,10 @@
   margin-bottom: 0;
 }
 
+.stop__variant {
+  margin-left: .5em;
+}
+
 .stop__tracks .line__symbol .badge {
   flex-grow: 1;
 }
@@ -48,7 +54,13 @@
 }
 
 .stop__destinations {
-  @extend .favourite__stops;
+  display: flex;
+  font-size: $small-font-size;
+  align-items: center;
+
+  ul {
+    @extend .favourite__stops;
+  }
 }
 
 .stop__destination {
diff --git a/resources/styles/main.scss b/resources/styles/main.scss
index e56517a..9038407 100644
--- a/resources/styles/main.scss
+++ b/resources/styles/main.scss
@@ -9,6 +9,7 @@ $primary: #005ea8;
 
 $custom-control-indicator-checked-bg: $dark;
 $custom-control-indicator-active-bg: $dark;
+$small-font-size: $font-size-base * 0.8;
 
 $line-types: (
   'trolleybus': #419517,
diff --git a/templates/app.html.twig b/templates/app.html.twig
index f364419..464825c 100644
--- a/templates/app.html.twig
+++ b/templates/app.html.twig
@@ -103,7 +103,7 @@
                     <li v-for="stop in stops" :key="stop.id" class="d-flex align-items-center">
                         <picker-stop :stop="stop" class="flex-grow-1">
                             <template v-slot:primary-action>
-                                <button @click="remove(stop)" class="btn btn-action align-self-start">
+                                <button @click="remove(stop)" class="btn btn-action">
                                     <tooltip>usuń przystanek</tooltip>
                                     <fa :icon="['fal', 'times']"></fa>
                                 </button>