feature: ellipsis - refactoring

src/styles/left-nav/_index.scss

@@ -30,6 +30,7 @@ nav {
     margin-right: 3px;
     opacity: 0.8;
     vertical-align: top;
+    width: 12px;
 
     div {
       font-family: simple-line-icons;
@@ -37,19 +38,39 @@ nav {
     }
   }
 
-  .sub-menu-name {
-    margin-right: 14px;
+
+  /* Ellipsis */
+  .ellipsis {
+
+    hubl-menu-fix-url-circle,
+    hubl-menu-fix-url-project {
+      display: block;
+    }
+
+    .ellipsis-content,
+    .ellipsis-content>div {
+
+      @media(min-width: 1024px) {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
   }
 
 
 
+  .sub-menu-name {
+    margin-right: 15px;
+  }
+
 
   /* Ellipsis for project tab */
+  .circle-tab,
   .project-tab {
 
-    hubl-menu-fix-url-project {
-      display: block;
-    }
+
 
     .project-customer,
     .project-name {
@@ -57,7 +78,7 @@ nav {
       width: calc(80vw - 96px);
 
       @media(min-width: 1024px) {
-        width: calc(100% - 10px);
+        width: 100%;
       }
     }
 

src/views/partials/menu-left.pug

@@ -49,10 +49,17 @@ solid-widget(name='hubl-menu-fix-url-circle')
     solid-link.segment.lg-full(data-src="${value}" next="circle")
       solid-display(
         data-src='${value}'
-        fields='status, name, jabberID, badge'
-        class-status='sub-menu-icon'
-        class-name='sub-menu-name ellipsis'
-        class-badge='sub-menu-badge'
+        fields='segment(status, circle(name, jabberID), badge)'
+        class-segment="segment lg-full padding-top-xxsmall padding-right-small padding-left-medium"
+
+        class-status='segment sub-menu-icon'
+
+        class-circle='segment lg-three-quarter sub-menu-name'
+
+        class-name='segment ellipsis-content'
+
+        class-badge='segment badge'
+
         value-badge='${value}'
         widget-status='hubl-menu-publicprivate'
         widget-badge='hubl-counter'
@@ -73,8 +80,8 @@ solid-widget(name='hubl-menu-fix-url-project')
 
         class-project='segment lg-three-quarter sub-menu-name'
 
-        class-customer.name='segment project-customer'
-        class-name='segment project-name'
+        class-customer.name='segment ellipsis-content'
+        class-name='segment ellipsis-content'
 
         class-badge='segment badge text-top'
 
@@ -141,7 +148,7 @@ solid-router#navbar-router(default-route='dashboard')
           div
           div
           div
-        solid-display.project-tab.text-color-white(
+        solid-display.ellipsis.text-color-white(
           bind-user
           nested-field='projects'
           fields='project'
@@ -170,7 +177,7 @@ solid-router#navbar-router(default-route='dashboard')
           div
           div
           div
-        solid-display.circle-tab.segment.lg-full(
+        solid-display.ellipsis.text-color-white(
           bind-user
           nested-field='circles'
           fields='circle'