src/menu-left.pug

@@ -18,7 +18,7 @@ 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.divider
     //- div.menu-wrapper
     //-   div.menu
     //-     div.menu-chevron
@@ -29,10 +29,11 @@ nav#main__menu
     //-   div.sub-menu.menu-notification
     //-     sib-display(
     //-       data-src=`${endpoints.projects}`
-    //-       fields='project(customer.name, dash, name), badge'
+    //-       fields='project(customer.name, name), badge'
+    //-       class-customer.name='project-customer'
+    //-       class-name='project-name'
     //-       empty-widget='hd-create'
     //-       empty-value='project'
-    //-       value-dash=' - '
     //-       search-fields='team'
     //-       search-widget-team='sib-form-hidden'
     //-       search-value-team='-'
@@ -41,7 +42,7 @@ nav#main__menu
     //-       widget-badge='hd-counter'
     //-       action-badge='badge'
     //-     )
-    div.divider
+    //- div.divider
     div.menu-wrapper
       div.menu
         div.menu-chevron

src/page-circle-edit.pug

@@ -38,45 +38,45 @@ div.content-box__info
 
   sib-link(class="backlink", bind-resources, next='circle-profile') Back
 
-  h1 Edit your circle
+  sib-ac-checker(permission='acl:Write', bind-resources)
+    h1 Edit your circle
 
-  sib-form.block.circle-edit-form(
-    bind-resources
+    sib-form.block.circle-edit-form(
+      bind-resources
 
-    fields='block-circle__info(name, owner), description'
-    range-owner=`${endpoints.users}`
+      fields='block-circle__info(name, owner), description'
+      range-owner=`${endpoints.users}`
 
-    label-owner='owner'
-    label-description='circle subtitle'
+      label-owner='owner'
+      label-description='circle subtitle'
 
-    class-name='form-label is-light is-half-width'
-    class-owner='form-label is-light is-half-width member-select color'
-    class-description='form-label is-light is-full-width'
+      class-name='form-label is-light is-half-width'
+      class-owner='form-label is-light is-half-width member-select color'
+      class-description='form-label is-light is-full-width'
 
-    widget-owner='sib-form-auto-completion'
+      widget-owner='sib-form-auto-completion'
 
-    partial=''
+      partial=''
 
-    submit-button='Save'
-    next='circle-information'
-  )
+      submit-button='Save'
+      next='circle-information'
+    )
 
   h2 Members list
 
-  //- TODO: sib-ac-checker unworking - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/517
-  //- sib-ac-checker(permission='acl:Write', bind-resources, nested-field='team')
-  sib-form.block.team-form(
-    bind-resources 
-    nested-field='members'
-    fields='user'
-    range-user=`${endpoints.users}`
+  sib-ac-checker(permission='acl:Append', bind-resources, nested-field='team')
+    sib-form.block.team-form(
+      bind-resources 
+      nested-field='members'
+      fields='user'
+      range-user=`${endpoints.users}`
 
-    class-user='team form-label is-dark'
-    label-user=''
-    widget-user='sib-form-auto-completion'
+      class-user='team form-label is-dark'
+      label-user=''
+      widget-user='sib-form-auto-completion'
 
-    submit-button='Add a member'
-  )
+      submit-button='Add a member'
+    )
 
   .table
 

src/page-circle-profile.pug

@@ -15,7 +15,7 @@ sib-router(default-route='circle-profile', hidden)
 
         widget-creationDate='sib-display-date'
       )
-      sib-ac-checker.testblock.circle-edit-button(permission='acl:Write', bind-resources)
+      sib-ac-checker.testblock.circle-edit-button(permission='acl:Append', bind-resources, nested-field='members')
         sib-link(class='button text-bold text-uppercase reversed button-blue bordered with-icon icon-pencil' next='circle-edit' bind-resources) Edit and add Members
 
 

src/styles/abstracts/_variables.scss

@@ -4,6 +4,7 @@ $color-45-95-54: hsl(45, 95%, 54%);
 $color-46-100-67: hsl(46, 100%, 67%);
 $color-46-100-50: hsl(46, 100%, 50%);
 $color-0-0-100: hsl(0, 0%, 100%);
+$color-218-100-98: hsl(218, 100%, 98%);
 $color-210-17-91: hsl(210, 17%, 91%);
 $color-222-52-90: hsl(222, 52%, 90%);
 $color-210-25-95: hsl(210, 25%, 95%);
@@ -22,5 +23,6 @@ $color-213-4-50: hsl(213, 4%, 50%);
 $color-213-13-86: hsla(213, 13%, 86%, 0.2);
 $color-0-0-29: hsl(0, 0%, 29%);
 $color-233-18-29: hsl(233, 18%, 29%);
+$color-233-20-17: hsl(233, 20%, 17%);
 $color-216-4-22: hsl(216, 4%, 22%);
 $color-244-73-62: hsl(244, 73%, 62%);

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 {
@@ -102,7 +101,7 @@ h5 {
     flex: 1;
     font-size: 1.6rem;
     margin: 0 auto;
-    min-height: calc(100vh - 84px);
+    min-height: 100%;
   }
 
   &.with-padding {

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: auto;
+  max-width: 250px;
   transition: flex-basis 0.5s ease-in-out;
 
   &.open {
@@ -90,6 +90,41 @@
     }
 
     .sub-menu {
+
+      sib-set-default[name='project'] {
+        padding: 1rem 1rem 1rem 3.2rem;
+
+        .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: $color-233-20-17;
+          box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
+          color: $color-218-100-98;
+          /* 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 +143,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;
           }
         }