Adding ellipsis to breadcrumb. Closes #575

sandialabs · Feb 2, 2016 · 761331a · 761331a
1 parent 9590159
commit 761331a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git 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
@@ -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>