From 8e35be2b830c87dfce31ab649f6236e568344b8d Mon Sep 17 00:00:00 2001
From: brunosimon <simon.bruno.77@gmail.com>
Date: Mon, 25 Dec 2017 21:56:19 +0100
Subject: [PATCH] :lipstick: Site > Projects hub > Add ellipsis

---
 site/src/components/projects-hub/style.styl    | 18 +++++++++++++-----
 site/src/components/projects-hub/template.html |  4 ++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/site/src/components/projects-hub/style.styl b/site/src/components/projects-hub/style.styl
index 0ae74e8..ebb4fb7 100644
--- a/site/src/components/projects-hub/style.styl
+++ b/site/src/components/projects-hub/style.styl
@@ -16,7 +16,7 @@
         opacity 0.6
 
     .select-projects
-        line-height 40px
+        line-height 22px
         cursor pointer
 
         .arrow-down
@@ -31,15 +31,23 @@
             &.hover
                 display none
 
-        .current
-            padding-left 20px
-
         .others
             display none
             top 100%
             background #393855
 
-            .other-project
+        .project
+            padding-top 9px
+            padding-bottom 9px
+            text-overflow ellipsis
+
+            &.current
+                padding-left 20px
+                white-space nowrap
+                overflow hidden
+                padding-right 92px
+
+            &.other-project
                 display block
                 padding-left 20px
 
diff --git a/site/src/components/projects-hub/template.html b/site/src/components/projects-hub/template.html
index 0a166b0..a5605a7 100644
--- a/site/src/components/projects-hub/template.html
+++ b/site/src/components/projects-hub/template.html
@@ -4,7 +4,7 @@
     </div>
 
     <div v-if="projectsCount > 1" class="select-projects">
-        <div class="current">
+        <div class="current project">
             {{ currentProject.name }}
         </div>
 
@@ -12,7 +12,7 @@
         <img class="icon arrow-down hover" src="../../../static/svg/arrow-down-hover.svg" alt="">
 
         <div class="others">
-            <a class="other-project" v-if="currentProject.slug !== project.slug" href="#" v-for="project in projects" :key="project.slug" @click.prevent="onProjectClick(project.slug)">
+            <a class="other-project project" v-if="currentProject.slug !== project.slug" href="#" v-for="project in projects" :key="project.slug" @click.prevent="onProjectClick(project.slug)">
                 {{ project.name }}
             </a>
         </div>