From 761331a8fa73cc2aa418f358bc02febcbc8d6bee Mon Sep 17 00:00:00 2001
From: "Alex M. Sielicki" <alex@techmilo.com>
Date: Tue, 2 Feb 2016 00:38:44 +0000
Subject: [PATCH] Adding ellipsis to breadcrumb. Closes #575

---
 web-server/css/slycat.css               | 11 +++++++++++
 web-server/templates/slycat-navbar.html |  8 ++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/web-server/css/slycat.css b/web-server/css/slycat.css
index ee27b2262..97e0c13c9 100644
--- a/web-server/css/slycat.css
+++ b/web-server/css/slycat.css
@@ -46,6 +46,17 @@ body
   background-color: transparent;
   margin: 8px 0 0 0;
   padding-left: 0;
+  padding-right: 0;
+  height: 36px;
+  max-width: 566px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.navbar .breadcrumb .project,
+.navbar .breadcrumb .model
+{
+  display: inline;
 }
 
 .bootstrap-styles .navbar .breadcrumb a
diff --git a/web-server/templates/slycat-navbar.html b/web-server/templates/slycat-navbar.html
index fd960f4d1..761d76367 100644
--- a/web-server/templates/slycat-navbar.html
+++ b/web-server/templates/slycat-navbar.html
@@ -14,14 +14,14 @@
       </div>
       <div class="collapse navbar-collapse" id="slycat-navbar-content">
 
-        <ol class="breadcrumb navbar-left">
-          <!-- ko foreach: project -->
-            <li data-bind="css: {'slycat-unclickable': $parent.model().length == 0}">
+        <ol class="breadcrumb navbar-left ellipsis" data-bind="css: {'slycat-no-models': model().length == 0}">
+          <!-- ko foreach: {data:project, afterRender:updateEllipsis} -->
+            <li class="project" data-bind="css: {'slycat-unclickable': $parent.model().length == 0}">
               <a data-bind="text:name,popover:{trigger:'hover',html:true,content:popover()},attr:{href:$parent.server_root + 'projects/' + _id()}"></a>
             </li>
           <!-- /ko -->
           <!-- ko foreach: model -->
-            <li class="slycat-unclickable"><a data-bind="text:name,popover:{trigger:'hover',html:true,content:$parent.model_popover()}"></a></li>
+            <li class="slycat-unclickable model"><a data-bind="text:name,popover:{trigger:'hover',html:true,content:$parent.model_popover()}"></a></li>
           <!-- /ko -->
         </ol>