Merge branch 'responsive-fix' into 'staging'

Responsive fixes

See merge request startinblox/applications/sib-app!106

config.sample.json

@@ -10,6 +10,7 @@
     "groups": "http://localhost:8000/groups/",
     "joboffers": "http://localhost:8000/job-offers/",
     "projects": "http://localhost:8000/projects/",
+    "customers": "http://localhost:8000/customers/",
     "skills": "http://localhost:8000/skills/",
     "users": "http://localhost:8000/users/"
   }

src/header.pug

@@ -14,7 +14,7 @@ sib-notifications(
 
 include templates/hd-user-avatar.pug
 
-details#user-controls
+details#user-controls.notLoggedIn
   summary(tabindex='0' role='button')
     sib-display#user-controls__profile(
       fields='firstName, account.picture'
@@ -26,6 +26,8 @@ details#user-controls
 
 button(role='log in' onclick="document.querySelector('sib-auth').login();") Login
 
+button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu
+
 sib-auth
   sib-auth-provider(
     data-authority=`${authority}`

src/menu-left.pug

@@ -7,7 +7,7 @@ sib-widget(name='hd-create')
     p.create You are not part of any ${value} yet. To create a new one, you can go to the 
       sib-link(next='admin') administration panel
 
-nav#main__menu
+nav#main__menu.jsLeftMenu
   sib-router#navbar-router(default-route='members')
     //- sib-route.menu(name='members')
     //-   div.menu-label Members
@@ -19,10 +19,11 @@ nav#main__menu
     //- sib-route(name='job-offer-create', hidden)
     //- sib-route(name='job-offer-edit', use-id, hidden)
     //- div.divider
-    //- div.menu-wrapper
+    //- div
     //-   div.menu
     //-     div.menu-chevron
-    //-       div.menu-icon.icon-arrow-up
+    //-       sib-link(next='admin-project-list')
+    //-         div.menu-icon.icon-arrow-right
     //-     div.menu-label Projects
     //-     div.menu-icon.icon-folder-alt
     //-   sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
@@ -44,7 +45,7 @@ nav#main__menu
     //-       order-by='customer.name'
     //-       next='project'
     //-     )
-    div.divider
+    //- div.divider
     div
       div.menu
         div.menu-chevron

src/page-admin-projects-create.pug

@@ -21,29 +21,24 @@ div.content-box__info
   sib-form.block(
     data-src=`${endpoints.projects}`
     
-    fields='line-1(customer.name, name), line-2(customer.logo), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-customer, line-5(customer.companyRegister), line-6(customer.address), line-7(customer.firstName, customer.lastName), line-8(customer.role), line-9(customer.email, customer.phone), fieldset-captain, line-10(captain)'
+    fields='line-1(customer, name), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-captain, line-10(captain)'
 
     class-fieldset-fee='fieldset'
     value-fieldset-fee='Fee'
     widget-fieldset-fee='hd-template-project-title'
     
-    class-fieldset-customer='fieldset'
-    value-fieldset-customer='Customer\'s information'
-    widget-fieldset-customer='hd-template-project-title'
-    
     class-fieldset-captain='fieldset'
     value-fieldset-captain='Captain'
     widget-fieldset-captain='hd-template-project-title'
 
-		label-customer.name='Customer\'s name*'
+		label-customer='Customer'
-    class-customer.name='form-label is-light is-half-width'
+    class-customer='member-select form-label is-light is-half-width'
+    range-customer=`${endpoints.customers}`
+    widget-customer='sib-form-auto-completion'
 
 		label-name='Project\'s name*'
     class-name='form-label is-light is-half-width'
 
-		label-customer.logo='Customer\'s logo'
-    class-customer.logo='form-label is-light is-half-width'
-
 		label-project.description='Project description'
     class-project.description='form-label is-light is-full-width'
     widget-project.description='sib-form-textarea'
@@ -54,28 +49,6 @@ div.content-box__info
 		label-businessProvider.fee='Amount of the contribution'
     class-businessProvider.fee='form-label is-light is-half-width'
 
-		label-customer.companyregister='Company register'
-    class-customer.companyregister='form-label is-light is-half-width'
-
-		label-customer.address='Address'
-    class-customer.address='form-label is-light is-full-width'
-    widget-customer.address='sib-form-textarea'
-
-		label-customer.firstName='Name of the contact'
-    class-customer.firstName='form-label is-light is-half-width'
-
-		label-customer.lastName='Firstname of the contact'
-    class-customer.lastName='form-label is-light is-half-width'
-
-		label-customer.role='Role within the company'
-    class-customer.role='form-label is-light is-half-width'
-
-		label-customer.email='Email'
-    class-customer.email='form-label is-light is-half-width'
-
-		label-customer.phone='Phone'
-    class-customer.phone='form-label is-light is-half-width'
-
     range-captain=`${endpoints.users}`
     class-captain='member-select form-label is-light is-half-width'
     widget-captain='sib-form-auto-completion'

src/page-admin.pug

@@ -1,4 +1,4 @@
-.views-container
+.views-container.sidebar-is-closed
   #admin-circles(hidden)
     include page-admin-circles.pug
   #admin-projects(hidden)
@@ -16,6 +16,6 @@ nav.jsRightMenu(role='navigation')
       sib-route(name='admin-circles')
         li
           a Circles
-      sib-route(name='admin-projects')
+      //- sib-route(name='admin-projects')
-        li
+      //-   li
-          a Projects
+      //-     a Projects

src/page-circle-edit.pug

@@ -3,7 +3,7 @@ div.content-box__info
   include templates/hd-user-avatar.pug
 
   sib-widget(name='hd-user-groups')
-    template ${value.name}
+    template ${await value.name}
 
   sib-widget(name='team-template-edit')
     template
@@ -41,7 +41,7 @@ div.content-box__info
   sib-ac-checker(permission='acl:Write', bind-resources)
     h1 Edit your circle
 
-    sib-form.block.circle-edit-form(
+    sib-form.block.form-edit(
       bind-resources
 
       fields='block-circle__info(name, owner), description'
@@ -65,7 +65,7 @@ div.content-box__info
   h2 Members list
 
   sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-    sib-form.block.team-form(
+    sib-form.block.select-add-member(
       bind-resources 
       nested-field='members'
       fields='user'
@@ -84,7 +84,7 @@ div.content-box__info
       div Name
       div Access
 
-      //-class='table-body'
+    //-class='table-body'
     sib-display(
       class='table-body'
       bind-resources

src/page-circle-profile.pug

@@ -25,10 +25,10 @@ sib-router(default-route='circle-profile', hidden)
 
     sib-display.block(
       bind-resources
-      fields='members.user'
+      fields='members'
 
-      multiple-members.user=''
+      multiple-members=''
-      widget-members.user='circle-team-template'
+      widget-members='circle-team-template'
     )
 
     div.box-button

src/page-circle.pug

@@ -1,4 +1,4 @@
-.views-container
+.views-container.sidebar-is-closed
   .content-box.full-width.with-form
     div.content-box__header
       sib-ac-checker(permission='acl:Read', bind-resources)
@@ -9,6 +9,7 @@
           class-name='h1-like'
           class-description='h1-aside description'
         )
+        button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
     div.content-box__info
       sib-ac-checker(permission='acl:Read', bind-resources)
         #circle-chat(hidden)

src/page-project-edit.pug

@@ -1,89 +1,70 @@
 div.content-box__info
 
-	include templates/hd-user-avatar.pug
+  include templates/hd-user-avatar.pug
 
-	sib-widget(name='hd-fieldset-title')
+  sib-widget(name='hd-fieldset-title')
-		template
+    template
-			label ${label}
+      label ${label}
 			
-	sib-link(class='backlink', bind-resources, next='project-profile') Back
+  sib-link(class='backlink', bind-resources, next='project-profile') Back
 
-	h1 Edit your project
+  h1 Edit your project
 
-	sib-form.form-container.block(
+  sib-form.block.form-edit(
-			bind-resources
+	  bind-resources
-		
+	
-			fields='fieldset-info, block-project__info(customer.name, name, customer.logo, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee), fieldset-customer, block-project__customer(customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone)'
+	  fields='fieldset-info, block-project__info(customer, name, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)'
 
-			class-customer.name='form-label is-light is-half-width'
+    class-customer='member-select form-label is-light is-half-width'
-			class-name='form-label is-light is-half-width'
+    widget-customer='sib-form-auto-completion'
-			class-customer.logo='form-label is-light is-full-width'
+    class-name='form-label is-light is-half-width'
-			class-description='form-label is-light is-full-width'
+    class-description='form-label is-light is-full-width'
-		label-fieldset-info=''
+    label-fieldset-info=''
-			label-customer.name='Customer\'s name'
+    label-customer='Customer'
-			label-name='Project\'s name*'
+    range-customer=`${endpoints.customers}`
-			label-customer.logo='Customer\'s logo'
+    label-name='Project\'s name*'
-			label-description='Project description'
+    label-description='Project description'
-			upload-url-customer.logo=''
+    widget-fieldset-info='hd-fieldset-title'
-		widget-fieldset-info='hd-fieldset-title'
+    widget-description='sib-form-textarea'
-			widget-description='sib-form-textarea'
 
-			class-fieldset-fee='fieldset'
+    class-fieldset-fee='fieldset'
-			class-businessprovider='form-label is-light is-half-width'
+    class-businessprovider='form-label is-light is-half-width'
-			class-businessproviderfee='form-label is-light is-half-width'
+    class-businessproviderfee='form-label is-light is-half-width'
-			label-fieldset-fee='Fee'
+    label-fieldset-fee='Fee'
-			label-businessprovider='Business provider'
+    label-businessprovider='Business provider'
-			label-businessproviderfee='Amount of the contribution'
+    label-businessproviderfee='Amount of the contribution'
-			widget-fieldset-fee='hd-fieldset-title'
+    widget-fieldset-fee='hd-fieldset-title'
 
-			class-fieldset-customer='fieldset'
+    submit-button='Save'
-			class-customer.companyregister='form-label is-light is-half-width'
+  )
-			class-customer.address='form-label is-light is-half-width'
-			class-customer.firstname='form-label is-light is-half-width'
-			class-customer.lastname='form-label is-light is-half-width'
-			class-customer.role='form-label is-light is-half-width'
-			class-customer.email='form-label is-light is-half-width'
-			class-customer.phone='form-label is-light is-half-width'
-			label-fieldset-customer='Customer\'s information'
-			label-customer.companyregister='Company register*'
-			label-customer.address='Address'
-			label-customer.firstname='Name of the contact at the customer\'s premises'
-			label-customer.lastname='Firstname of the contact at the customer\'s premises'
-			label-customer.role='Role within the company'
-			label-customer.email='Email'
-			label-customer.phone='Phone'
-			widget-fieldset-customer='hd-fieldset-title'
 
-			submit-button='Save'
+  h2 Members List
-	)
 
-	h2 Members List
+  sib-form.block.select-add-member(
+    bind-resources 
+    nested-field='members'
+    fields='user'
+    range-user=`${endpoints.users}`
 
-	sib-form.block.team-form(
+    class-user='team form-label is-dark'
-		bind-resources 
+    label-user=''
-		nested-field='members'
+    widget-user='sib-form-auto-completion'
-		fields='user'
-		range-user=`${endpoints.users}`
 
-		class-user='team form-label is-dark'
+    submit-button='Add a member'
-		label-user=''
+  )
-		widget-user='sib-form-auto-completion'
 
-		submit-button='Add a member'
+  .table
-	)
 
-	.table
+    div.table-header.grey-color
+      div Name
+      div Access
 
-	div.table-header.grey-color
+    //-class='table-body'
-	div Name
+    sib-display(
-	div Access
+      class='table-body'
+      bind-resources
+      fields='members'
 
-	//-class='table-body'
+      multiple-members=''
-	sib-display(
+      widget-members='team-template-edit'
-		class='table-body'
+    )
-		bind-resources
-		fields='members'
-
-		multiple-members=''
-		widget-members='team-template-edit'
-	)

src/page-project.pug

@@ -1,4 +1,4 @@
-.views-container
+.views-container.sidebar-is-closed
   .content-box.full-width.with-form
     div.content-box__header
       sib-ac-checker(permission='acl:Read', bind-resources)
@@ -13,6 +13,9 @@
     
           value-const-title1='N°'
         )
+        .mobile-sidebar-button.jsMobileSidebarOpenButton
+          button.icon-arrow-left-circle
+            span MENU
     div.content-box__info
       sib-ac-checker(permission='acl:Read', bind-resources)
         #project-chat(hidden)

src/scripts/index.js

@@ -48,14 +48,33 @@ function closeUserControls() {
   if (userControls) userControls.removeAttribute("open");
 }
 
+function closeLeftMenu() {
+  let leftMenu = document.querySelector('#main__menu');
+  if (leftMenu) leftMenu.removeAttribute("open");
+}
+
+function closeRightMenu() {
+  let rightMenu = document.querySelectorAll('.jsRightMenu');
+  if(Array.from(rightMenu).filter(el=>el.hasAttribute('open')).length > 0) {
+    Array.from(document.querySelectorAll('.views-container')).forEach(vC => vC.classList.toggle('sidebar-is-closed'));
+    Array.from(rightMenu).forEach(el => el.removeAttribute('open'));
+  }
+}
+
+function openRightMenu() {
+  let rightMenu = document.querySelectorAll('.jsRightMenu');
+  Array.from(rightMenu).forEach(el => el.setAttribute('open', ''));
+  Array.from(document.querySelectorAll('.views-container')).forEach(vC => vC.classList.toggle('sidebar-is-closed'));
+}
+
 document.addEventListener('DOMContentLoaded', function (event) {
   const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
-  const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
-  const viewsContainer = Array.from(document.querySelectorAll('.views-container'));
 
   //- View change event
-  // window.addEventListener('navigate', (event) => {
+  window.addEventListener('navigate', (event) => {
-  // });
+    closeLeftMenu();
+    closeUserControls();
+  });
 
   //- Toggle sub-menus
   menuWrappers.forEach(menuWrapper => {
@@ -65,35 +84,26 @@ document.addEventListener('DOMContentLoaded', function (event) {
     });
   });
 
-  //- Open/close menu on the right
-  rightMenus.forEach(rightMenu => {
-    const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
-
-    btnRightMenu.addEventListener('click', e => {
-      rightMenus.forEach(rM => rM.classList.toggle('offsite-is-closed'));
-      viewsContainer.forEach(vC => vC.classList.toggle('sidebar-is-closed'));
-    })
-  });
-
   //- Watch every sib-forms & update data-src of linked sib-display
-  document.querySelectorAll('sib-form').forEach(function(el) {
+  document.querySelectorAll('sib-form').forEach(function (el) {
-    el.addEventListener("save", function(event) {
+    el.addEventListener("save", function (event) {
       //clear cache on this resource
       //NOTE: this is required because the cache is not refreshed after POSTing changes on the resource
-      if(el.component.resource != null) el.component.resource.clearCache();
+      if (el.component.resource != null) el.component.resource.clearCache();
 
       // if of the edited resource || id of the container of the created resource
       const resourceId = event.detail.resource['@id'] || el.dataset.src;
 
       //update all displays which use this resource
       Array.from(document.querySelectorAll('sib-display'))
-      .filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
+        .filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
-      .forEach(e => e.dataset.src = e.dataset.src); // and update them
+        .forEach(e => e.dataset.src = e.dataset.src); // and update them
     });
   });
 
   document.querySelector('sib-auth').getUser().then(user => {
     if (user !== null) {
+      document.querySelectorAll('.notLoggedIn').forEach(el => el.style.visibility = 'visible');
       // Hide login button if already logged
       document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important');
       // Set current user id on set-user-id of sib-display
@@ -106,13 +116,52 @@ document.addEventListener('DOMContentLoaded', function (event) {
 
   // Document -> close menu
   document.addEventListener("click", event => {
-    if (!event.target.closest('#user-controls')) closeUserControls();
+    if (!event.target.closest('#user-controls')) {
+      closeUserControls();
+    }
+    if (!event.target.closest('#main__menu') && event.target.id != "toggleMainMenu") {
+      closeLeftMenu();
+    }
+    if (!event.target.className.includes('jsMobileSidebarOpenButton') && !event.target.className.includes('jsOffsiteToggle')) {
+      closeRightMenu();
+    }
+  });
+
+  document.querySelector('#toggleMainMenu').addEventListener('click', event => {
+    let leftMenu = document.querySelector('#main__menu');
+    if (leftMenu.hasAttribute('open')) {
+      closeLeftMenu();
+    } else {
+      leftMenu.setAttribute('open', '');
+    }
+  });
+
+  Array.from(document.querySelectorAll('.jsMobileSidebarOpenButton')).forEach(el => {
+    el.addEventListener('click', event => {
+      openRightMenu();
+    });
+  });
+
+  const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
+  rightMenus.forEach(rightMenu => {
+    const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
+    btnRightMenu.addEventListener('click', e => {
+      if (rightMenu.hasAttribute('open')) {
+        closeRightMenu();
+      } else {
+        openRightMenu();
+      }
+    })
   });
 
   // listen for keypress
   document.onkeydown = (e) => {
     e = e || window.event;
-    if (e.key === "Escape" || e.key === "Esc") closeUserControls();
+    if (e.key === "Escape" || e.key === "Esc") {
+      closeUserControls();
+      closeLeftMenu();
+      closeRightMenu();
+    }
   };
 
 });

src/styles/abstracts/_mixins.scss

@@ -1,4 +1,58 @@
 @mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) {
   box-shadow: 0 0 8px 0 $shadow;
   background-color: $background;
-}
+}
+
+@mixin breakpoint($min: 0, $max: 0) {
+  $type: type-of($min);
+
+  @if $type==string {
+    @if $min==xs {
+      @media (max-width: 768px) {
+        @content;
+      }
+    }
+
+    @else if $min==sm {
+      @media (max-width: 1024px) {
+        @content;
+      }
+    }
+
+    @else if $min==md {
+      @media (max-width: 1200px) {
+        @content;
+      }
+    }
+
+    @else if $min==lg {
+      @media (min-width: 1201px) {
+        @content;
+      }
+    }
+
+    @else {
+      @warn "Beware ! Breakpoints mixin supports xs, sm, md, lg";
+    }
+  }
+
+  @else if $type==number {
+    $query: "all" !default;
+
+    @if $min !=0 and $max !=0 {
+      $query: "(min-width: #{$min}) and (max-width: #{$max})";
+    }
+
+    @else if $min !=0 and $max==0 {
+      $query: "(min-width: #{$min})";
+    }
+
+    @else if $min==0 and $max !=0 {
+      $query: "(max-width: #{$max});"
+    }
+
+    @media #{$query} {
+      @content;
+    }
+  }
+}

src/styles/base/form.scss

@@ -100,11 +100,13 @@
 
     /* CLASSES Peut-être à sortir de .content-box */
 
-    .block.team-form>form { /* circle-profile */
+    .block.select-add-member>form { /* circle-profile */
       display: flex;
       flex-direction: row;
+      margin-bottom: 2.6rem;
 
       label {
+        margin-top: 0;
 
         >.ss-main {
           font-weight: normal;
@@ -149,7 +151,24 @@
 
 		.form-container>form {
 		  margin-top: 2.7rem;
-		}
+    }
+    
+    .form-edit {
+
+      >form {
+
+        input[type='submit'] {
+          @extend .button,
+          .text-bold,
+          .text-uppercase,
+          .reversed,
+          .button-dark,
+          .bordered;
+          margin-left: auto;
+          margin-top: 3.2rem;
+        }
+      }
+    }
 
 		.form-label {
 		  /*flex: 1 1 auto;*/

src/styles/base/header.scss

@@ -8,13 +8,10 @@
   display: flex;
   flex-shrink: 0;
   // padding: 1.6rem 0.64rem;
+  padding: 0 2.5rem;
   position: relative;
   z-index: 1;
 
-  > *:not(sib-widget) {
-    padding: 0 2.5rem;
-  }
-
   #logo {
     flex: 1 1 0;
   }
@@ -58,9 +55,24 @@
       }
     }
   }
+
+  .notLoggedIn {
+    visibility: hidden;
+  }
+
+  sib-notifications {
+
+    @include breakpoint(sm) {
+      padding: 0;
+    }
+  }
   
   details {
     margin-right: 2.5rem;
+
+    @include breakpoint(sm) {
+      margin-right: 0;
+    }
   
     summary {
   
@@ -142,6 +154,10 @@
           margin-right: 2rem;
           overflow: hidden;
           width: 4.8rem;
+
+          @include breakpoint(sm) {
+            margin-right: 0;
+          }
         }
 
         img {
@@ -168,6 +184,10 @@
           &::before {
             margin-left: 1.5rem;
           }
+
+          @include breakpoint(sm) {
+            display: none;
+          }
         }
       }
     }
@@ -236,5 +256,15 @@
       }
     }
   }
+
+  .mobile-menu-icon {
+    display: none;
+
+    @include breakpoint(sm) {
+      display: block;
+      padding-left: 0;
+      font-size: 26px;
+    }
+  }
 }
 

src/styles/base/main.scss

@@ -22,16 +22,68 @@ $breakpoints: (phone: 480px,
     font-size: 1.6rem;
     min-height: 100vh;
     overflow-wrap: break-word;
+    overflow-x: hidden; /* To stop getting horizontal scrolling if anything overflows the width */
   }
 
   main {
     display: flex;
-    flex-direction: row;
+    overflow: hidden;
-    max-width: 100%;
+    height: calc(100vh - 83px); /* 83px = height of the header */
+    position: relative;
+    width: 100%;
+    
+    backface-visibility: hidden;
+    /*will-change: overflow;*/
   }
 }
 
+/* Add scrollbar to the left and right menu, and to the content */
+nav, .views-container {
+  overflow: auto;
+  height: auto;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+}
 
+/* Custom scrollbar of the left-menu */
+nav {
+  scrollbar-width: thin;
+  scrollbar-color: $color-244-10-70 $color-233-18-29;
+
+  &::-webkit-scrollbar-track {
+    background: $color-233-18-29;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $color-244-10-70;
+    border-radius: 6px;
+    border: 3px solid $color-233-18-29;
+  }
+
+  &::-webkit-scrollbar {
+    width: 11px;
+  }
+}
+
+/* Custom scrollbar of the content */
+.views-container {
+  scrollbar-width: thin;
+  scrollbar-color: $color-244-10-70 white;
+
+  &::-webkit-scrollbar-track {
+    background: white;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $color-244-10-70;
+    border-radius: 6px;
+    border: 3px solid white;
+  }
+
+  &::-webkit-scrollbar {
+    width: 11px;
+  }
+}
 
 /* Quick fix. Will be removed later */
 #admin-circles,
@@ -40,7 +92,6 @@ $breakpoints: (phone: 480px,
 }
 
 
-
 img {
   max-height: 100%;
   max-width: 100%;
@@ -148,6 +199,35 @@ h5 {
   border-bottom: 1px solid $color-221-51-90;
   padding: 3rem;
 
+  @include breakpoint(sm) {
+    background: $color-221-51-90;
+  }
+
+  sib-display {
+    @include breakpoint(sm) {
+      float: left;
+    }
+  }
+
+  .mobile-sidebar-button {
+    @include breakpoint(sm) {
+      float: right;
+      color: $color-233-18-29;
+      font-size: 1.8rem;
+      font-weight: bold!important;
+
+      &::before {
+        font-size: 2.2rem;
+        font-weight: normal;
+        margin-right: 1.2rem;
+      }
+    }
+
+    @include breakpoint($min: 1025px, $max: 0) {
+      display: none;
+    }
+  }
+
   div {
 
     .h1-aside {

src/styles/base/menu-left.scss

@@ -121,32 +121,6 @@
 
         hd-counter {
           margin-top: 16px;
-          margin-left: 8px;
-        }
-
-        &:hover {
-          background-color: $color-233-20-17;
-          box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
-
-          sib-set-default[name='project'] {
-            background-color: $color-233-20-17;
-            color: $color-218-100-98;
-            /* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */
-            z-index: 1000;
-
-            .project-customer,
-            .project-name {
-              width: auto;
-            }
-
-            .project-name {
-              font-weight: normal;
-            }
-          }
-
-          hd-counter {
-            display: none;
-          }
         }
       }
       /* End of specific styles of "Projects" tab */
@@ -214,4 +188,25 @@
       background-color: $color-213-13-86;
     }
   }
+
+  &.jsLeftMenu {
+
+    @include breakpoint(sm) {
+      display: none;
+    }
+  }
+
+  &.jsLeftMenu[open] {
+
+    @include breakpoint(sm) {
+      display: block;
+      bottom: 0;
+      box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
+      min-width: 80%;
+      position: fixed;
+      right: 0;
+      top: 0;
+      z-index: 1;
+    }
+  }
 }

src/styles/base/table.scss

@@ -2,6 +2,7 @@
 #circle-edit,
 #admin-circle-list,
 #admin-circle-create,
+#project-edit,
 #admin-project-list,
 #admin-project-create {
 

src/styles/components/sidebar.scss

@@ -12,11 +12,13 @@
 
   .views-container {
     flex: 1 0 0;
-    -webkit-backface-visibility: hidden;
+    /*-webkit-backface-visibility: hidden;*/
 
     &.sidebar-is-closed {
-      margin-left: -15.5rem;
+      @include breakpoint(769px, 0) {
-      transform: translate(15.5rem);
+        margin-left: -15.5rem;
+        transform: translate(15.5rem);
+      }
     }
   }
 
@@ -27,6 +29,7 @@
   nav {
     background: $color-210-25-95;
     transition: all 0.5s;
+    width: 25rem;
 
     >sib-router {
       background-color: $color-222-52-90;
@@ -49,13 +52,13 @@
           margin: 0;
           padding: 2.15rem 2.55rem;
           position: relative;
-          width: 12em;
+          /*width: 12em;*/
 
           &::before {
             float: left;
             font-size: 4rem;
             margin-left: 0;
-            margin-right: 2.55rem;
+            margin-right: 2.85rem;
           }
         }
 
@@ -110,12 +113,34 @@
       }
     }
 
-    &.offsite-is-closed {
+    &.jsRightMenu {
+
+      @include breakpoint(sm) {
+        display: none;
+      }
+    }
+
+    &.jsRightMenu:not([open]) {
       transform: translate(15.5rem);
 
       & .jsOffsiteToggle::before {
         transform: rotate(180deg);
       }
     }
+    
+    &.jsRightMenu[open] {
+
+      @include breakpoint(sm) {
+        display: block;
+        background: $color-221-51-90;
+        bottom: 0;
+        box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
+        min-width: 60%;
+        position: fixed;
+        right: 0;
+        top: 83px;
+        z-index: 1;
+      }
+    }
   }
 }

src/styles/layout/circle/_index.scss

@@ -1,4 +1,3 @@
 @import 'circle';
 @import 'circle-profile';
-@import 'circle-edit';
 @import 'circle-admin';

src/styles/layout/circle/circle-edit.scss

@@ -1,161 +0,0 @@
-#circle-edit {
-
-  .circle-edit-form>form {
-
-    input[type='submit'] {
-      @extend .button,
-      .text-bold,
-      .text-uppercase,
-      .reversed,
-      .button-dark,
-      .bordered;
-      margin-left: auto;
-      margin-top: 3.2rem;
-    }
-  }
-
-  /*.table-header {
-    background: $color-228-25-79;
-    color: white;
-    display: flex;
-    font-size: 1.6rem;
-    font-weight: 600;
-    justify-content: space-around;
-    text-align: center;
-
-    >*{
-      border-right: 1px solid white;
-      flex: 1;
-      padding: 1rem;
-      width: 50%;
-    }
-
-    >*:last-of-type {
-      border-right: 1px solid $color-228-25-79;
-
-      @media (max-width: 1220px) {
-        display: none;
-      }
-    }
-  }*/
-
-  /*.table-body div team-template-edit {
-    display: flex;
-    justify-content: space-between;
-
-    >* {
-      border-bottom: 1px solid $color-228-25-79;
-      flex: 1;
-      width: 50%;
-    }
-
-    sib-display {
-      border-left: 1px solid $color-228-25-79;
-      padding: 0 2.2rem;
-    }
-
-    sib-ac-checker {
-      align-items: center;
-      border-left: 1px solid $color-228-25-79;
-      border-right: 1px solid $color-228-25-79;
-      display: flex;
-      justify-content: flex-end;
-      padding: 2.7rem 2.2rem;
-
-      @media (max-width: 1220px) {
-        display: none;
-      } 
-    }
-  }*/
-
-  .member-select.color {
-
-    .ss-main {
-      color: $color-233-18-29;
-    }
-  }
-
-  /*sib-multiple[widget='team-template-edit'] {
-
-    label {
-      display: none;
-    }
-
-    >div>team-template-edit>sib-display>div {
-      display: grid;
-      grid-column-gap: 1.6rem;
-      grid-template-columns: 7vh auto;
-      grid-template-rows: repeat(2, 5.2vh);
-
-      >[name$='account.picture'] {
-        align-items: center;
-        align-self: center;
-        background-color: $color-213-20-91;
-        border-radius: 50%;
-        display: flex;
-        grid-column: 1 / span 1;
-        grid-row: 1 / span 2;
-        height: 7vh;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-        width: 7vh;
-
-        img {
-          background-color: white;
-          height: 100%;
-          left: 0;
-          object-fit: cover;
-          position: absolute;
-          top: 0;
-          width: 100%;
-        }
-
-        object {
-          height: 45%;
-          width: 45%;
-        }
-      }
-
-      >[name='sup'] {
-        align-self: end;
-        display: flex;
-        grid-column: 2 / span 1;
-        grid-row: 1 / span 1;
-        margin-bottom: 0.50rem;
-
-        [name$='name'] {
-          font-weight: 600;
-          margin-right: 1rem;
-        }
-
-        sib-multiple {
-          display: flex;
-
-          [name='groups'] {
-            @extend %tag-role;
-          }
-        }
-      }
-
-      >[name='sub'] {
-        align-self: start;
-        grid-column: 2 / span 1;
-        grid-row: 2 / span 1;
-        margin-top: 0.50rem;
-
-        >[name$='profile.city']:not(:empty) {
-          @include mdi('atom');
-          align-items: center;
-          display: flex;
-
-          &::before {
-            color: $color-43-100-50;
-            margin-right: 0.50rem;
-          }
-        }
-      }
-    }
-  }*/
-}
-

src/styles/layout/circle/circle-profile.scss

@@ -7,23 +7,14 @@
 
   .block {
 
-    >form { /* peut-être à mettre dans main.scss */
-      margin-bottom: 2.6rem;
-
-      .form-label.is-dark>label {
-        margin-top: 0;
-      }
-    }
-
      /* peut-être à mettre dans main.scss */
-
     circle-team-template>sib-display>div {
       display: grid;
       grid-column-gap: 1.6rem;
       grid-template-columns: 7vh auto;
       grid-template-rows: repeat(2, 5.2vh);
 
-      >[name='user.account.picture'] {
+      >[name='account.picture'] {
         align-items: center;
         align-self: center;
         background-color: $color-213-20-91;
@@ -70,7 +61,7 @@
           margin-bottom: 1px;
           margin-left: 0.6rem;
 
-          [name='user.groups'] {
+          [name='groups'] {
             @extend %tag-role;
           }
         }

src/styles/layout/project-profile/_index.scss

@@ -1,2 +1,2 @@
 @import 'project';
-@import 'project-profile';
+@import 'project-profile';

src/templates/hd-circle-team.pug

@@ -3,23 +3,24 @@ include hd-user-avatar.pug
 sib-widget(name='circle-team-template')
   template
     sib-display(
-      data-src='${await value}'
+      data-src='${await value.user}'
-      fields='user.account.picture, sup(user.name, is_admin, user.groups), sub(user.profile.city)'
+      fields='account.picture, sup(name, isadmin, groups), sub(profile.city)'
+      value-isadmin='${await value.is_admin}'
 
-      class-user.name='user-name'
+      class-name='user-name'
-      class-is_admin='tag-admin'
+      class-isadmin='tag-admin'
-      class-user.groups='tag-group'
+      class-groups='tag-group'
-      class-user.profile.city='city'
+      class-profile.city='city'
 
-      widget-user.account.picture='hd-user-avatar'
+      widget-account.picture='hd-user-avatar'
-      widget-is_admin='hd-user-admin'
+      widget-isadmin='hd-circle-user-admin'
-      widget-user.groups='hd-user-groups'
+      widget-groups='hd-circle-user-groups'
 
-      multiple-user.groups=''
+      multiple-groups=''
     )
 
-sib-widget(name='hd-user-admin')
+sib-widget(name='hd-circle-user-admin')
-  template ${await value ? "Administrator" : ""}
+  template ${(await value) != "false" ? "Administrator" : ""}
 
-sib-widget(name='hd-user-groups')
+sib-widget(name='hd-circle-user-groups')
   template ${await value.name}

src/templates/hd-project-team.pug

@@ -12,14 +12,14 @@ sib-widget(name='hd-project-team')
       class-user.profile.city='city'
 
       widget-user.account.picture='hd-user-avatar'
-      widget-is_admin='hd-user-admin'
+      widget-is_admin='hd-project-user-admin'
-      widget-user.groups='hd-user-groups'
+      widget-user.groups='hd-project-user-groups'
 
       multiple-user.groups=''
     )
 
-sib-widget(name='hd-user-admin')
+sib-widget(name='hd-project-user-admin')
   template ${await value ? "Administrator" : ""}
 
-sib-widget(name='hd-user-groups')
+sib-widget(name='hd-project-user-groups')
   template ${await value.name}