From 1ade7ded23d036f2a304a661f09518485f9e5ba1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Wed, 27 Nov 2019 12:06:23 +0100
Subject: [PATCH] Left-nav bar: new styles + overflow and hovering to handle
 long names

---
 src/menu-left.pug              | 47 ++++++++++++++-------------
 src/styles/base/main.scss      | 11 +++----
 src/styles/base/menu-left.scss | 59 +++++++++++++++++++++++++---------
 3 files changed, 72 insertions(+), 45 deletions(-)

diff --git a/src/menu-left.pug b/src/menu-left.pug
index c2d902d..c79856b 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -18,29 +18,30 @@ nav#main__menu
     //-   div.menu-icon.icon-briefcase
     //- sib-route(name='job-offer-create', hidden)
     //- sib-route(name='job-offer-edit', use-id, hidden)
-    //- div.divider
-    //- div.menu-wrapper
-    //-   div.menu
-    //-     div.menu-chevron
-    //-       div.menu-icon.icon-arrow-up
-    //-     div.menu-label Projects
-    //-     div.menu-icon.icon-folder-alt
-    //-   sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
-    //-   div.sub-menu.menu-notification
-    //-     sib-display(
-    //-       data-src=`${endpoints.projects}`
-    //-       fields='project(customer.name, dash, name), badge'
-    //-       empty-widget='hd-create'
-    //-       empty-value='project'
-    //-       value-dash=' - '
-    //-       search-fields='team'
-    //-       search-widget-team='sib-form-hidden'
-    //-       search-value-team='-'
-    //-       hd-inherit-user-id='search-value-team'
-    //-       hd-inherit-widgets
-    //-       widget-badge='hd-counter'
-    //-       action-badge='badge'
-    //-     )
+    div.divider
+    div.menu-wrapper
+      div.menu
+        div.menu-chevron
+          div.menu-icon.icon-arrow-up
+        div.menu-label Projects
+        div.menu-icon.icon-folder-alt
+      sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
+      div.sub-menu.menu-notification
+        sib-display(
+          data-src=`${endpoints.projects}`
+          fields='project(customer.name, name), badge'
+          class-customer.name='project-customer'
+          class-name='project-name'
+          empty-widget='hd-create'
+          empty-value='project'
+          search-fields='team'
+          search-widget-team='sib-form-hidden'
+          search-value-team='-'
+          hd-inherit-user-id='search-value-team'
+          hd-inherit-widgets
+          widget-badge='hd-counter'
+          action-badge='badge'
+        )
     div.divider
     div.menu-wrapper
       div.menu
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 283f1be..45a44a7 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -20,12 +20,11 @@ $breakpoints: (phone: 480px,
     background-color: $color-210-25-95;
     color: $color-213-4-50;
     font-size: 1.6rem;
-    overflow: hidden;
-    overflow-wrap: break-word;
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    overflow: hidden;
+    overflow-y: scroll;
+  }
+
+  html {
+    overflow-y: scroll;
   }
 
   main {
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index 6dbea23..ae44b04 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -2,8 +2,8 @@
   background-color: $color-233-18-29;
   color: $color-0-0-100;
   display: block;
-  overflow: auto;
-  flex: 0 0 16em;
+  height: calc(100vh - 82px);
+  max-width: 250px;
   transition: flex-basis 0.5s ease-in-out;
 
   &.open {
@@ -90,6 +90,43 @@
     }
 
     .sub-menu {
+
+      sib-set-default[name='project'] {
+        padding: 10px;
+
+        .project-customer,
+        .project-name {
+          display: inline-block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .project-customer {
+          font-weight: bold;
+          width: 150px;
+        }
+
+        .project-name {
+          padding-left: 14px;
+          width: calc(150px - 10px); /* 10px = padding of the sib-set-default = better alignment */
+        }
+
+        &:hover {
+          background-color: #a2a8bb;
+          border-radius: 2px;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+          color: #3D4057;
+          padding: 10px;
+          /* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */
+          width: auto;
+
+          .project-customer,
+          .project-name {
+            width: auto;
+          }
+        }
+      }
       
       sib-display>div {
 
@@ -108,20 +145,10 @@
             color: $color-244-10-70;
             cursor: pointer;
             padding: 10px 10px 10px 32px;
-          }         
-    
-          sib-route[name='project'] {
-            display: flex;
-            flex: 3;
-
-            sib-display-value {
-              display: block;
-              height: 20px;
-            }
-    
-            sib-display-value[name='dash'] {
-              margin: 0 0.4em;
-            }
+          }
+          
+          &[fields="project(customer.name, name), badge"]>div {
+            padding: 0 0 0 22px;
           }
         }