Merge branch 'release/job-board' into feature/job-board

.gitlab-ci.yml

@@ -264,3 +264,21 @@ volumes:
   when: manual
   tags:
     - deploy
+
+communityhubl:
+  stage: deployment
+  environment:
+    name: communityhubl
+    url: https://community.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_HUBL_COMMUNITY" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* community-hubl@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy

client.sample.happy-dev.css

@@ -19,6 +19,11 @@
   --color-h1: var(--color-title);
   --color-h2: var(--color-title);
 
+  /* Depreciated */
+  --color-tag-group-text: #9BA0A7;
+  --color-tag-group-border: var(--color-primary);
+  --color-label-dark: var(--color-grey-6);
+
   /* Header's elements */
   --color-header-background: var(--color-white);
   --color-bell: var(--color-complementary-darken);
@@ -58,8 +63,6 @@
   /* Tags */
   --color-tag-admin-text: var(--color-complementary);
   --color-tag-admin-border: var(--color-complementary);
-  --color-tag-group-text: #9BA0A7;
-  --color-tag-group-border: var(--color-primary);
 
   /* Form elements */
   --color-button-white: var(--color-white);
@@ -78,7 +81,6 @@
   --color-select-add-button: var(--color-button-secondary);
   --color-select-add-button-background: var(--color-button-white);
 
-  --color-label-dark: var(--color-complementary);
   --color-label-light: var(--color-grey-6);
 
   /* Skill */
@@ -142,22 +144,27 @@
 }
 
 /* Button to delete a channel */
+/* box-button is depreciated */
+#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete,
 #circle-profile>div>div.box-button>sib-ac-checker>sib-delete {
   background: var(--color-white);
   border: 1px solid var(--color-complementary);
   color: var(--color-complementary);
 }
 
+#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete>button,
 #circle-profile>div>div.box-button>sib-ac-checker>sib-delete>button {
   color: var(--color-complementary);
 }
 
+#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete:hover,
 #circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover {
   background: var(--color-complementary);
   border: 1px solid var(--color-complementary);
   color: var(--color-white);
 }
 
+#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete:hover>button,
 #circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover>button {
   color: var(--color-white);
 }
@@ -209,3 +216,7 @@
   border: 1px solid var(--color-complementary);
   color: var(--color-white);
 }
+
+#members-list .send-display sib-link::before {
+    background-color: var(--color-directory-complementary)!important;
+}

src/header.pug

@@ -1,11 +1,6 @@
-#logo
+.logo
-  sib-link(next='members')
+  sib-link(next='dashboard')
-    img(src=`${clientLogo || '/images/logo.png'}` style=`height:${clientLogoHeight || '32px'}`)
+    img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`)
-
-//- #search-bar
-//-   input#search-input(type='search')
-//-   i#search-icon.icon-magnifier(aria-hidden='true')
-//-   i#close-search-icon.icon-close(aria-hidden='true')
 
 sib-notifications.notLoggedIn(
   nested-field="inbox"
@@ -18,6 +13,8 @@ details#user-controls.notLoggedIn
   summary(tabindex='0' role='button')
     sib-display#user-controls__profile(
       fields='first_name, account.picture'
+      class-first_name='flex'
+      class-account.picture='avatar'
       widget-account.picture='hubl-user-avatar'
       bind-user
     )

src/images/alien.svg

@@ -1,4 +1,4 @@
-<svg class="alien" fill="#AAA9B9" width="135.47mm" height="135.51mm" version="1.1" viewBox="0 0 135.47 135.51" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+<svg class="alien" fill="#A59D9D" width="135.47mm" height="135.51mm" version="1.1" viewBox="0 0 135.47 135.51" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
  <metadata>
   <rdf:RDF>
    <cc:Work rdf:about="">

src/index.pug

@@ -14,12 +14,16 @@ html(lang="en")
     if clientCSS
       link(rel='stylesheet', href=`${clientCSS}`)
   body
-    header#header(role='banner')
+
+    .wrapper
+
+      header#header.header.is-spaced(role='banner')
         include header.pug
 
-    main.notLoggedIn
+      nav#main__menu.left-menu.jsLeftMenu
         include menu-left.pug
-      div#viewport
+
+      main#viewport.content.notLoggedIn
 
         if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
           #dashboard(hidden).no-sidebar.with-padding

src/menu-left.pug

@@ -47,7 +47,7 @@ sib-widget(name='hubl-menu-fix-url-project')
       order-by="customer.name"
     )
 
-nav#main__menu.jsLeftMenu
+
 sib-router#navbar-router(default-route='dashboard')
   if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
     sib-route.menu(name='dashboard')
@@ -60,7 +60,7 @@ nav#main__menu.jsLeftMenu
       div.menu-icon.icon-people
     div.divider
   if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
-      sib-route.menu(name='job-offers' rdf-type='hd:joboffer')
+    sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
       div.menu-label Offres de mission
       div.menu-icon.icon-briefcase
     div.divider
@@ -100,7 +100,7 @@ nav#main__menu.jsLeftMenu
           div.menu-icon.icon-folder-alt
       sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
       div.sub-menu.menu-notification
-          sib-display(
+        sib-display.circle-tab(
           bind-user
           nested-field='circles'
           fields='circle'
@@ -120,7 +120,7 @@ nav#main__menu.jsLeftMenu
         div.menu-icon.icon-envelope-letter
       sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
       div.sub-menu.menu-notification
-          sib-display.nosub(
+        sib-display.nosub.message-tab(
           data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
           fields='name, chatProfile.jabberID, badge'
           search-fields="name"

src/page-admin.pug

@@ -12,7 +12,7 @@ nav.jsRightMenu(role='navigation')
   sib-router(default-route='admin-circles')
     ul
       li.jsOffsiteToggle
-        a Fold menu
+        a Replier le menu
       if (endpoints.users || (endpoints.get && endpoints.get.users))
         sib-route.active-color(name='admin-users')
           li

src/page-circle.pug

@@ -1,7 +1,7 @@
 .views-container.sidebar-is-closed
-  .content-box.full-width.with-form
+  .content-box.flex.full-width.with-form
     div.content-box__header
-      sib-ac-checker(permission='acl:Read', bind-resources)
+      sib-ac-checker.flex.space-between(permission='acl:Read', bind-resources)
         sib-display(
           bind-resources
           fields='name, description'
@@ -10,11 +10,11 @@
           class-description='h1-aside description'
         )
         button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
-    div
+    div.content-box__height
       sib-ac-checker(permission='acl:Read', bind-resources)
         #circle-chat(hidden)
           include views/circle/page-circle-chat.pug
-        #circle-information(hidden)
+        #circle-information.content-box__height(hidden)
           include views/circle/page-circle-profile.pug
 
 nav.jsRightMenu(role='navigation')

src/page-dashboard.pug

@@ -1,5 +1,5 @@
 .views-container
-  h2 Tableau de bord
+  h1 Tableau de bord
   sib-dashboard(
     data-src=`${endpoints.dashboards || endpoints.get.dashboards}`
   )

src/page-messages.pug

@@ -1,15 +1,16 @@
-.content-box.full-width
+.content-box.flex.full-width
 
-  sib-display.content-box__header(
+  div.content-box__header
+    sib-display(
       bind-resources
       fields='name, parenthesis, username, endParenthesis'
       value-parenthesis=" ("
       value-endParenthesis=")"
 
-    class-parenthesis='name'
+      class-parenthesis='h1-like'
-    class-endParenthesis='name'
+      class-endParenthesis='h1-like'
-    class-name='name'
+      class-name='h1-like'
-    class-username='name'
+      class-username='h1-like'
     )
 
   .chat-view

src/page-project.pug

@@ -1,7 +1,7 @@
 .views-container.sidebar-is-closed
-  .content-box.full-width.with-form
+  .content-box.flex.full-width.with-form
     div.content-box__header
-      sib-ac-checker(permission='acl:Read', bind-resources)
+      sib-ac-checker.flex.space-between(permission='acl:Read', bind-resources)
         sib-display(
           bind-resources
           fields='const-title1, number, customer.name, name'
@@ -9,25 +9,18 @@
           class-const-title1='h1-like'
           class-number='h1-like word-spacing-right'
           class-customer.name='h1-like'
-          class-name='h1-aside name'
+          class-name='h1-aside'
     
           value-const-title1='N°'
         )
-        .mobile-sidebar-button.jsMobileSidebarOpenButton
+        button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
-          button.icon-arrow-left-circle
+    div.content-box__height
-            span MENU
-    div
       sib-ac-checker(permission='acl:Read', bind-resources)
         #project-chat(hidden)
           include views/project/page-project-chat.pug
-        #project-information(hidden)
+        #project-information.content-box__height(hidden)
           include views/project/page-project-profile.pug
 
-dialog(id='project-contributions-help').modal
-  sib-link(next='project-profile')
-    button.icon-close
-  img(src='/images/contributions-help.png')
-
 nav.jsRightMenu(role='navigation')
   sib-router(default-route='project-chat')
     ul

src/styles/abstracts/_mixins.scss

@@ -8,25 +8,25 @@
 
   @if $type==string {
     @if $min==xs {
-      @media (max-width: 768px) {
+      @media (max-width: 576px) {
         @content;
       }
     }
 
     @else if $min==sm {
-      @media (max-width: 1024px) {
+      @media (max-width: 768px) {
         @content;
       }
     }
 
     @else if $min==md {
-      @media (max-width: 1200px) {
+      @media (max-width: 991px) {
         @content;
       }
     }
 
     @else if $min==lg {
-      @media (min-width: 1201px) {
+      @media (min-width: 992px) {
         @content;
       }
     }

src/styles/abstracts/_variables.scss

@@ -34,7 +34,7 @@
   --color-highlight-primary: var(--color-primary);
   --color-user-panel: var(--color-black);
   --color-bell: var(--color-secondary);
-  --color-avatar-background: var(--color-grey-11);
+  --color-avatar-background: var(--color-grey-10);
   --color-title: var(--color-secondary);
   --color-h1: var(--color-secondary);
   --color-h2: var(--color-secondary);
@@ -74,12 +74,12 @@
   --color-scrollbar-right-track: var(--color-grey-9);
   --color-scrollbar-left-background: var(--color-secondary);
   --color-scrollbar-left-track: var(--color-grey-11);
+  --color-scrollbar-table-background: var(--color-grey-10);
+  --color-scrollbar-table-track: var(--color-secondary);
 
   /* tags */
   --color-tag-admin-text: var(--color-complementary);
   --color-tag-admin-border: var(--color-complementary);
-  --color-tag-group-text: var(--color-primary);
-  --color-tag-group-border: var(--color-primary);
 
   /* Form elements */
   --color-button-white: var(--color-white);
@@ -98,7 +98,6 @@
   --color-select-add-button: var(--color-button-secondary);
   --color-select-add-button-background: var(--color-button-white);
 
-  --color-label-dark: var(--color-secondary);
   --color-label-light: var(--color-grey-6);
 
   /* skill */
@@ -119,8 +118,7 @@
   --color-backlink: var(--color-secondary);
   --color-content-header: var(--color-grey-9);
 
-  
+  /* job board */
-/*Variables for the job board*/
   --color-job-board-primary:  var(--color-primary) !important;
   --color-job-board-secondary: var(--color-secondary)!important;
   --color-job-board-complementary: var(--color-complementary)!important;
@@ -129,6 +127,13 @@
   --color-job-board-black-1: var(--color-black)!important;
   --color-job-board-grey-10: #E4E8ED !important; // for some reason with the var it doesh't work var(--color-grey-12) !important;
 
+  /* directory */
+  --color-directory-primary: var(--color-primary)!important;
+  --color-directory-secondary: var(--color-secondary)!important;
+  --color-directory-complementary: var(--color-complementary)!important;
+  --color-directory-complementary-darken: var(--color-complementary-darken)!important;
+  --color-directory-white: var(--color-white)!important;
+  --color-directory-black: var(--color-black)!important;
 }
 
 /* Variables for event */

src/styles/base/_compat.scss

@@ -1,34 +0,0 @@
-%grid-layer {
-    display: grid;
-    font-size: 16px;
-    grid-template-columns: [start]auto[middle]25%[end];
-    grid-template-rows: [start]7em[middle]auto[end];
-}
-
-%flex-grid-layer {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-}
-
-%grid-layer-main {
-    @extend %flex-grid-layer;
-    grid-column-start: start;
-    grid-column-end: end;
-    grid-row-start: start;
-    grid-row-end: end;
-}
-
-%grid-layer-links {
-    @extend %flex-grid-layer;
-    grid-column-start: middle;
-    grid-column-end: end;
-    grid-row-start: start;
-    grid-row-end: middle;
-}
-
-%containerV {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-}

src/styles/base/about.scss

@@ -44,7 +44,7 @@
     cursor: pointer;
     font-weight: bold;
     text-transform: uppercase;
-    width: 25%;
+    width: 50%;
     font-size: 1.1rem;
     align-self: center;
     padding: 0.5rem 1.5rem;

src/styles/base/form.scss

@@ -1,9 +1,17 @@
-#admin-circle-create,
+.form form {
-#admin-project-create,
+  display: block;
-#admin-users-create,
+  height: fit-content;
-#admin-users-edit {
+  margin-bottom: 75px;
+  transition: all .3s ease;
 
-  input[type='submit'] {
+  @include breakpoint(lg) {
+    display: flex;
+    flex-direction: column;
+    transition: all .3s ease;
+  }
+}
+
+.button-register>form>input[type=submit] {
   @extend .button,
   .text-bold,
   .text-uppercase,
@@ -13,65 +21,44 @@
   margin-left: auto;
   margin-top: 3.2rem;
 }
-}
 
-.content-box {
+.form-label {
-
+  /*flex: 1 1 auto;*/
-  &.with-form {
-
-    h1 {
-      color: var(--color-title);
-      font-weight: bold;
-      font-size: 2rem;
-
-      &.centered {
-        text-align: center;
-      }
-    }
-    
-    .fieldset {
-      border-bottom: 1px solid var(--color-fieldset-border);
-      color: var(--color-title);
-      display: flex;
-      flex: 1 0 100%;
-      font-size: 1.8rem;
-      font-weight: 600;
-      margin: 2.6rem 0 1.8rem;
-      padding-bottom: 0.8rem;
-    }
-
-    [name^='block-'] {
-      margin-bottom: 2.75rem;
-    }
-
-    [name$='border-top'] {
-      border-top: 1px solid var(--color-grey-10);
-      margin-top: 3rem;
-    }
-
-    form {
-      display: flex;
-      flex-direction: column;
-    }
-
-    sib-set-default:not([name='user-thumb']) {
-			clear: both;
-	    display: flex!important;
-			flex-wrap: wrap;
-			max-width: 100%;
-			
-			sib-form-label-text {
-				float: left;
-				width: 50%;
-			}
-		}
   
   label {
     display: flex;
-      flex-direction: column;
+    flex-direction: column; /* To align label and input vertically */
+    font-weight: 600;
+    margin-bottom: 0.8rem;
+    margin-top: 1.8rem;
+    text-transform: uppercase;
+  }
   
-      input:not([type='file']),
+  &.is-light label {
-      textarea {
+    color: var(--color-label-light);
+  }
+}
+
+[name^='line-'] {
+  
+  @include breakpoint(lg) {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.is-full-width {
+  box-sizing: border-box;
+  flex: 1 1 100%;
+}
+
+.is-half-width {
+  box-sizing: border-box;
+  flex: 0 1 calc(50% - 2.5rem);
+}
+
+.input-text-like input:not([type='file']):not([type='search']):not([type='submit']),
+.input-text-like textarea {
   -webkit-tap-highlight-color: var(--color-grey-7);
   background-color: var(--color-input-background);
   box-sizing: border-box;
@@ -79,13 +66,9 @@
   color: var(--color-input-text);
   /*flex: 1 1 0;  Problem on Firefox for input type date*/
   line-height: 1;
+  margin-top: 0.8rem;
   min-width: 0;
   padding: 1rem;
-      }
-
-      input:not([type="search"]):not([type="file"]),
-      textarea {
-        border: 2px solid var(--color-input-background);
   
   &:focus,
   &:active {
@@ -96,9 +79,26 @@
 textarea {
   height: 100px;
 }
+    
+.content-box {
+  
+  &.with-form {
+
+    /*sib-set-default:not([name='user-thumb']) {
+      clear: both;
+	    display: flex!important;
+			flex-wrap: wrap;
+			max-width: 100%;
+			
+			sib-form-label-text {
+				float: left;
+				width: 50%;
+			}
+    }*/
+  }
 }
 
-    sib-form[set-user-id-select] {
+/*sib-form[set-user-id-select] {
 
   input[type="submit"] {
     margin-left: 0;
@@ -108,34 +108,33 @@
   select {
     display: none;
   }
-    }
+}*/
 
-    /* CLASSES Peut-être à sortir de .content-box */
 
-    .block.select-add-member>form { /* circle-profile */
+/* WIDGETS SIB  (let in .content-box to override default styles) */
-      display: flex;
-      flex-direction: row;
-      margin-bottom: 2.6rem;
 
-      label {
+sib-form-auto-completion,
-        margin-top: 0;
+hubl-status {
 
-        >.ss-main {
+  .ss-main {
     font-weight: normal;
-          min-width: 35vw;
     text-transform: none;
   
-          >.ss-single-selected {
+
-            align-items: center;
+    .ss-single-selected {
       background-color: var(--color-input-background);
       border: none;
       border-radius: 0px;
       color: var(--color-input-text);
-            display: flex;
+      font-weight: normal;
-            justify-content: flex-end;
+      margin-top: 0.8rem;
-            min-height: 4.2rem;
+      min-height: 4.6rem;
       padding-left: 1.2rem;
 
+      .ss-disabled {
+        color: var(--color-grey-5);
+      }
+
       .ss-arrow {
         font-size: 1.8rem;
         margin: 0 18px 0 0;
@@ -146,126 +145,49 @@
         }
       }
     }
+  }
 
   .ss-list {
     color: var(--color-select-list);
-          }
+    font-weight: normal;
-        }
+    text-transform: none;
-      }
-
-      >input[type='submit'] {
-        @extend
-          .button,
-          .btn-margin-left,
-          .text-bold,
-          .text-uppercase,
-          .button-complementary,
-          .bordered;
-        margin-top: auto;
-        margin-bottom: auto;
   }
 }
 
-		.form-container>form {
+/* Additional styles for the select to add a member in circle-edit */
-		  margin-top: 2.7rem;
+.block.select-add>form {
+  display: block;
+
+  @include breakpoint(lg) {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 2.6rem;
   }
 
-    .form-edit>form {
+  label {
+    margin-top: 0;
+  }
+
+  .ss-main {
+    min-width: 35vw;
+  }
 
   input[type='submit'] {
     @extend .button,
     .text-bold,
     .text-uppercase,
-        .reversed,
+    .button-complementary,
-        .button-secondary,
     .bordered;
-        margin-left: auto;
+    margin: 10px 0;
-        margin-top: 3.2rem;
+    width: 100%;
-      }
-    }
 
-		.form-label {
+    @include breakpoint(lg) {
-		  /*flex: 1 1 auto;*/
+      margin: auto 0 auto 2.2rem;
-		  font-weight: 600;
+      width: auto;
-
-		  &.is-dark label {
-		    color: var(--color-label-dark);
-		    margin-top: 3rem;
-
-		    &>*:nth-child(2) {
-		      margin-top: 0.8rem;
-		    }
-		  }
-
-		  &.is-light label {
-		    color: var(--color-label-light);
-		    margin-top: 1.8rem;
-		    text-transform: uppercase;
-
-		    &>*:nth-child(2) {
-		      margin-top: 0.8rem;
     }
   }
 }
-
+/* End */
-		.is-full-width {
-		  flex: 1 1 100%;
-		}
-
-		.is-half-width {
-		  box-sizing: border-box;
-		  flex: 0 0 50%;
-
-		  &:nth-child(even) {
-		    padding-left: 1.7rem;
-		  }
-
-		  &:nth-child(odd) {
-		    padding-right: 1.7rem;
-		  }
-		}
-
-    /* WIDGETS SIB */
-
-    sib-form-auto-completion.member-select, hubl-status {
-      align-self: flex-end;
-
-      >label:first-of-type>div {
-        font-weight: 600;
-      }
-
-      .ss-single-selected {
-        background-color: var(--color-input-background);
-        border: none;
-        border-radius: 0px;
-        color: var(--color-input-text);
-        display: flex;
-        font-weight: normal;
-        margin-top: 0.8rem;
-        min-height: 4.4rem;
-        padding-left: 1rem;
-        text-transform: none;
-
-        .ss-disabled {
-          color: var(--color-grey-5);
-        }
-
-        .ss-arrow span {
-          border: solid var(--color-input-icon);
-          border-width: 0 2px 2px 0;
-        }
-      }
-
-      .ss-content .ss-list .ss-option {
-        color: var(--color-input-text);
-        font-weight: normal;
-        text-transform: none;
-      }
-    }
-
-    hubl-status {
-      align-self: auto;
-    }
 
 sib-form-date {
   input[type="date"] {
@@ -330,15 +252,7 @@
   }
 }
 
-    sib-multiple-form {
+/*sib-multiple-select {
-      margin-top: 1.8rem;
-    }
-
-    sib-multiple-select {
-
-      &.select-groups .ss-values .ss-disabled::before {
-        content: "Sélectionne des groupes";
-      }
 
   &.select-skills .ss-values .ss-disabled::before {
     content: "Select skills";
@@ -413,7 +327,7 @@
       }
     }
   }
-    }
+}*/
 
 /* CUSTOM WIDGETS */
 
@@ -439,5 +353,3 @@
     }
   }
 }
-  }
-}

src/styles/base/header.scss

@@ -1,75 +1,57 @@
 #header {
-  max-height: 83px;
+  max-height: 50px;
-  height: 83px;
+  height: 50px;
+  display: flex;
   align-items: center;
   background-color: var(--color-header-background);
   color: var(--color-black);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
-  display: flex;
   flex-shrink: 0;
-  // padding: 1.6rem 0.64rem;
+  position: fixed;
+  z-index: 999;
+  width: -webkit-fill-available;
+  width: -moz-available;
+
+  @include breakpoint(lg) {
+    max-height: 83px;
+    height: 83px;
+    position: relative;
+  }
+
+  &.is-spaced {
+    padding: 0 0.8rem;
+
+    @include breakpoint(lg) {
       padding: 0 2.5rem;
-  position: relative;
-  z-index: 1;
-
-  #logo {
-    flex: 1 1 0;
-  }
-  
-  #search-bar {
-    position: relative;
-    
-    #search-input {
-      border-radius: 10em;
-      padding: 0.64rem 1.28rem;
-      border: 1px solid var(--color-grey-10);
-      height: 3.8rem;
-      width: 28rem;
-      -webkit-appearance: textfield;
-    
-      & ~ #close-search-icon,
-      & ~ #search-icon {
-        color: var(--color-grey-10);
-        display: block;
-        font-size: 1.7rem;
-        margin: auto;
-        position: absolute;
-        right: 3.7rem;
-        top: 50%;
-        transform: translateY(-50%);
-        -webkit-text-stroke: 1px var(--color-grey-10);
-      }
-    
-      & ~ #close-search-icon {
-        opacity: 0;
-      }
-    
-      &:focus {
-        & ~ #close-search-icon {
-          opacity: 1;
-        }
-    
-        & ~ #search-icon {
-          visibility: hidden;
-        }
-      }
     }
   }
 
-  sib-notifications {
+  >*:not(:first-child) {
-    color: var(--color-bell);
+    margin-left: 2rem;
 
-    @include breakpoint(sm) {
+    @include breakpoint(lg) {
-      padding: 0;
+      margin-left: 0;
     }
   }
 
+  .logo {
+    flex: 1 0 0;
+    align-items: stretch;
+  }
+
+  /* To remove the place taken by this element */
+  sib-widget[name='hubl-user-avatar'] {
+    display: contents;
+  }
+}
+  
+/* General styling for both notification and user's panel */
 details {
-    margin-right: 2.5rem;
+  margin-right: 0;
   position: relative;
 
-    @include breakpoint(sm) {
+  @include breakpoint(lg) {
-      margin-right: 0;
+    margin-right: 2.5rem;
   }
 
   summary {
@@ -83,13 +65,25 @@
     }
   }
 }
+/* End */
+
+sib-notifications {
+  color: var(--color-bell);
+
+  @include breakpoint(sm) {
+    padding: 0;
+  }
 
   .sib-notifications__container {
     position: relative;
   
     .sib-notifications__button {
       @include icon('bell');
+        font-size: 2.5rem;
+
+      @include breakpoint(lg) {
         font-size: 3rem;
+      }
   
       &::before {
         margin-left: 0;
@@ -100,16 +94,37 @@
       }
   
       .sib-notifications__counter {
-        left: 2.1rem;
+        left: 2rem;
         position: absolute;
+        top: 1px;
+
+        @include breakpoint(lg) {
+          left: 2.1rem;
           top: -3px;
         }
       }
+    }
   
     .sib-notifications__list {
+      overflow-x: hidden;
+      position: fixed;
+      left: 0;
+      top: 4.5rem;
+      width: 100vw;
+
+      @include breakpoint(md) {
+        border: 0;
+        border-radius: 0;
+      }
+
+      @include breakpoint(lg) {
         position: absolute;
+        left: auto;
         right: 0;
         top: 5.6rem;
+        width: 300px;
+      }
+    }
   }
 }
 
@@ -122,14 +137,21 @@
   user-select: none;
 
   summary {
-      padding: 18px;
     cursor: pointer;
     display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
 
+    @include breakpoint(lg) {
+      padding: 18px;
+    }
+    
     &:focus {
-        background-color: var(--color-user-panel-header-background-open);
+      background-color: transparent;
       color: var(--color-user-panel-header-text-open);
       outline: none;
+
+      @include breakpoint(lg) {
+        background-color: var(--color-user-panel-header-background-open);
+      }
     }
   }
 
@@ -143,38 +165,21 @@
       }
 
       hubl-user-avatar {
-          align-items: center;
+        height: 3.3rem;
-          background-color: var(--color-avatar-background);
-          border-radius: 50%;
-          display: flex;
-          height: 4.8rem;
-          justify-content: center;
-          margin-right: 2rem;
-          overflow: hidden;
-          width: 4.8rem;
-
-          @include breakpoint(sm) {
         margin-right: 0;
-          }
+        width: 3.3rem;
-        }
 
-        img {
+        @include breakpoint(lg) {
-          background-color: white;
+          height: 4.8rem;
-          height: 100%;
+          margin-right: 2rem;
-          object-fit: cover;
+          width: 4.8rem;
-          object-position: center;
-          width: 100%;
         }
-
-        object {
-          height: 45%;
-          width: 45%;
       }
       
       sib-display-value[name='first_name'] {
         @include icon('arrow-down');
         align-items: center;
-          display: flex;
+        display: none;
         flex-direction: row-reverse;
         font-size: 1.8rem;
         font-weight: 600;
@@ -183,8 +188,8 @@
           margin-left: 1.5rem;
         }
 
-          @include breakpoint(sm) {
+        @include breakpoint(lg) {
-            display: none;
+          display: flex;
         }
       }
     }
@@ -195,8 +200,14 @@
     position: absolute;
     right: 0;
     z-index: 1;
+    /* Quick fix for mobile version */
+    width: 215px;
+    top: 42px;
+    
+    @include breakpoint (lg) {
       width: 100%;
       top: 83px;
+    }
     
     > nav {
       background-color: var(--color-user-panel-list-background);
@@ -219,6 +230,7 @@
             border-bottom: 1px solid var(--color-user-panel-list-border);
             margin-right: 0;
             padding: 1.6rem 1.3rem;
+
             &:hover {
               color: var(--color-user-panel-list-text-hover);
             }
@@ -231,6 +243,10 @@
         padding: 1.6rem 1.3rem;
         text-align: left;
         width: 100%;
+
+        &:hover {
+          color: var(--color-user-panel-list-text-hover);
+        }
       }
     }
   }
@@ -256,13 +272,13 @@
 }
 
 .mobile-menu-icon {
-    display: none;
 
-    @include breakpoint(sm) {
   display: block;
   padding-left: 0;
-      font-size: 26px;
+  font-size: 24px;
-    }
+
+  @include breakpoint(lg) {
+    display: none;
   }
 }
 

src/styles/base/main.scss

@@ -9,23 +9,12 @@
 
   body {
     background-color: var(--color-main-background);
+    box-sizing: border-box;
     color: var(--color-main-text);
     font-size: 1.6rem;
-    min-height: 100vh;
+    /* Fix for viewport height bug in webkit for mobile */
-    overflow-wrap: break-word;
+    height: -webkit-fill-available;
-    overflow-x: hidden; /* To stop getting horizontal scrolling if anything overflows the width */
+    min-height: -webkit-fill-available;
-  }
-
-  main {
-    display: flex;
-    z-index: 0;
-    overflow: hidden;
-    height: calc(100vh - 83px); /* 83px = height of the header */
-    position: relative;
-    width: 100%;
-    
-    backface-visibility: hidden;
-    /*will-change: overflow;*/
   }
 
   .notLoggedIn {
@@ -33,8 +22,88 @@
   }
 }
 
+/* Fix for sib-dashboard fixture */
+sib-dashboard section {
+  padding: 1rem !important;
+
+  @include breakpoint(lg) {
+    padding: 4.2rem !important;
+  }
+
+  .icon {
+    display: inline-block;
+  }
+}
+
+.wrapper {
+  display: grid;
+  grid-template-areas: 
+    "header"
+    "content";
+
+  @include breakpoint(lg) {
+    grid-template-columns: 265px auto;
+    grid-template-areas:
+      "header header"
+      "leftmenu content";
+  }
+}
+
+.header {
+  grid-area: header;
+}
+
+.left-menu {
+  grid-area: leftmenu;
+
+  @include breakpoint(lg) {
+    height: calc(100vh - 83px); /* 83px = nav height */
+    position: sticky;
+    top: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &.jsLeftMenu {
+    display: none;
+
+    @include breakpoint(lg) {
+      display: block;
+    }
+  }
+
+  &.jsLeftMenu[open] {
+    display: block;
+    bottom: 0;
+    box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
+    width: 80vw;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1000;
+
+    @include breakpoint(lg) {
+      display: none;
+    }
+  }
+}
+
+.content {
+  grid-area: content;
+
+  @include breakpoint(lg) {
+    position: sticky;
+    top: 0;
+    overflow-y: auto;
+    height: calc(100vh - 83px);
+    overflow-x: hidden;
+  }
+}
+
+
+
 /* Add scrollbar to the left and right menu, and to the content */
-nav, .views-container {
+nav, .views-container, .table-wrapper {
   overflow: auto;
   height: auto;
   -webkit-overflow-scrolling: touch;
@@ -81,6 +150,26 @@ nav {
   }
 }
 
+/* Custom scrollbar of the table */
+.table-wrapper {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background);
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--color-scrollbar-table-background);
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar {
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-scrollbar-table-track);
+    border-radius: 10px;
+  }
+}
+
 /* Quick fix. Will be removed later */
 #admin-circles,
 #admin-projects,
@@ -143,6 +232,7 @@ h2, .h2-like {
 h3 {
   color: var(--color-title);
   font-size: 1.7rem;
+  margin: 0;
 }
 
 h4 {
@@ -153,17 +243,44 @@ h5 {
   font-size: 2rem;
 }
 
-%padding-main {
+.avatar {
-  padding: 1.3rem;
+  align-items: center;
+  background-color: var(--color-avatar-background);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+
+  img {
+    background-color: white;
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    object-position: center;
+    position: absolute;
+    top: 0;
+    width: 100%;
   }
 
-%padding-block {
+  object {
-  padding: 3.2rem;
+    height: 45%;
+    width: 45%;
+  }
+}
+
+.customer-logo {
+  box-sizing: border-box;
+  display: flex;
+  height: 8.5vh;
+  justify-content: flex-end;
+  margin-top: 20px;
+  text-align: end;
+  width: 15vw;
 }
 
 .content-box {
   @include window-style-modal();
-  display: flex;
   flex-direction: column;
   flex-grow: 1;
   margin: 2rem 1rem 5rem 2rem;
@@ -175,29 +292,20 @@ h5 {
     margin: 0 auto;
     min-height: 100%;
   }
-
-  &.with-padding {
-    @extend %padding-main;
-  }
 }
 
 /* Header inside circle, project view  */
 .content-box__header {
   border-bottom: 1px solid var(--color-content-header);
+  padding: 1.8rem 0 1.4rem;
+  margin: 0 1.6rem;
+
+  @include breakpoint(lg) {
   padding: 3rem;
-
+  margin: 0;
-  @include breakpoint(sm) {
-    background: var(--color-grey-10);
-  }
-
-  sib-display {
-    @include breakpoint(sm) {
-      float: left;
-    }
   }
 
   .mobile-sidebar-button {
-    @include breakpoint(sm) {
     float: right;
     color: var(--color-secondary);
     font-size: 1.8rem;
@@ -208,14 +316,27 @@ h5 {
       font-weight: normal;
       margin-right: 1.2rem;
     }
-    }
 
-    @include breakpoint($min: 1025px, $max: 0) {
+    @include breakpoint(lg) {
       display: none;
     }
   }
 
+  sib-display {
+    @include breakpoint(sm) {
+      float: left;
+    }
+  }
+
+  /* For sib-display on project, circle, or private message view */
+  sib-display {
+    width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */
+
     div {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: calc(100% - 20px);
       
       .h1-aside {
         font-size: 1.8rem;
@@ -239,14 +360,30 @@ h5 {
       }
     }
   }
-
-.content-box__info {
-  @extend %padding-block;
-  display: flex;
-  flex-direction: column;
 }
 
-.modal {
+.content-box__height {
+  min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */
+
+  @include breakpoint(lg) {
+    min-height: calc(100vh - 83px - 84px);
+  }
+}
+
+.content-box__info {
+  flex-direction: column;
+  padding: 1rem;
+
+  @include breakpoint(lg) {
+    padding: 3.2rem;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+/*.modal {
   color: var(--color-white);
   margin: 75px;
   padding: 40px;
@@ -267,6 +404,40 @@ h5 {
       color: var(--color-secondary);
     }
   }
+}*/
+
+.admin-header {
+  /* Quick fix for alignment on mobile before admin content rework */
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 20px;
+  /*end */
+
+  @include breakpoint(lg) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 5rem;
+  }
+
+  h3 {
+    /* Quick fix for alignment on mobile before admin content rework */
+    margin-bottom: 20px;
+    /* end */
+
+    @include breakpoint(lg) {
+      margin-top: 0;
+    }
+  }
+
+  sib-ac-checker,
+  sib-link {
+    width: 100%;
+
+    @include breakpoint(lg) {
+      width: auto;
+    }
+  }
 }
 
 .backlink {
@@ -288,32 +459,37 @@ h5 {
   }
 }
 
-.name {
+.centered {
-  color: var(--color-grey-1);
+  text-align: center;
-  font-size: 2rem;
-  font-weight: bold;
 }
 
-.username {
+.flex {
+  display: flex;
+}
 
-  &::before {
+.desktop-button__end {
-    content: '@';
+  display: block;
+
+  @include breakpoint(lg) {
+    display: flex;
+    justify-content: flex-end;
   }
 }
 
 .space-between {
-  display: flex;
   justify-content: space-between;
+
+  &.with-padding {
     padding-bottom: 1.4rem;
   }
-
-.position-end {
-  text-align: end;
 }
 
-.section {
+.mobile-vertical-align {
-  border-bottom: 1px solid var(--color-grey-10);
+  flex-direction: column;
-  padding: 4.5rem;
+
+  @include breakpoint(lg) {
+    flex-direction: row;
+  }
 }
 
 .word-spacing-left {
@@ -324,8 +500,14 @@ h5 {
   margin-right: 0.60rem;
 }
 
-// Compatibility layer for non-updated components
+.mobile-margin__bottom {
-@import 'compat';
+  margin-bottom: 1rem;
+
+  @include breakpoint(lg) {
+    margin-bottom: 0;
+  }
+}
+
 // Other base components
 @import 'form';
 @import 'table';
@@ -356,9 +538,34 @@ a,
       font-size: 1.4rem;
     }
 
-    &.btn-margin-left {
+    &.mobile-full-width {
+      margin-bottom: 1rem;
+      padding-left: 5rem;
+      width: -webkit-fill-available;
+      width: -moz-available;
+
+      @include breakpoint(lg) {
+        margin-bottom: 0;
+        padding-left: 2.5rem;
+        width: auto;
+      }
+
+      &::before {
+        margin-left: -2.6rem;
+
+        @include breakpoint(lg) {
+          margin-left: 0;
+        }
+      }
+    }
+
+    &.desktop-btn-margin__left {
+      margin: 0;
+
+      @include breakpoint(lg) {
         margin-left: 2.2rem;
       }
+    }
 
     &.small {
 

src/styles/base/menu-left.scss

@@ -1,10 +1,6 @@
 #main__menu {
   background-color: var(--color-menu-background);
   color: var(--color-menu-text);
-  display: block;
-  max-width: 250px;
-  min-height: calc(100vh - 83px); /* 83px = nav height */
-  flex: 1;
   /*transition: flex-basis 0.5s ease-in-out;*/
 
   &.open {
@@ -16,18 +12,22 @@
   }
 
   sib-router {
-  
     .menu-wrapper {
       &.is-closed {
         .sub-menu {
           display: none;
         }
+
         .menu-chevron {
           transform: rotate(180deg);
         }
       }
     }
 
+    sib-link {
+      width: 100%;
+    }
+
     .menu {
       cursor: pointer;
       display: flex;
@@ -92,47 +92,85 @@
 
     .sub-menu {
 
-      /* Specific styles for the "Projects" tab */
+      /* Ellipsis for project tab */
 
       .project-tab>div>sib-display>div:nth-child(1) {
 
         sib-set-default[name='project'] {
+          flex: 3;
+          
+          .project-customer,
+          .project-name {
+            box-sizing: border-box;
+            display: block;
+            width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
+
+            @include breakpoint(lg) {
+              width: 150px;
+            }
+          }
 
           .project-customer,
           .project-name>div {
+
+            @include breakpoint(lg) {
               display: block;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+          }
+        }
+      }
 
-          .project-customer {
+      /* Ellipsis for circle tab */
-            font-weight: bold;
+
+      .circle-tab>div>sib-display>div {
+
+        sib-display-div[name='name'] {
+          flex: 3;
+
+          >div[name='name'] {
+            box-sizing: border-box;
+            padding-left: 0.2em;
+            width: calc(80vw - 96px);  /*96px = padding of the element + width and margin of counter */
+
+            @include breakpoint(lg) {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
               width: 150px;
             }
-
+          }
-          .project-name {
-            display: block;
-            padding-left: 14px;
-            width: calc(150px - 10px);
-            /* 10px = padding of the sib-set-default = better alignment */
         }
       }
 
-        hubl-counter {
+      /* Ellipsis for message tab */
-          margin-top: 16px;
+
+      .message-tab>div>sib-display>div>sib-display-div>div {
+        box-sizing: border-box;
+        width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
+        
+        @include breakpoint(lg) {
+          width: 150px;
         }
       }
-      /* End of specific styles of "Projects" tab */
 
       sib-display.nosub>sib-form[fields="name"]>hubl-search-users>input {
-        margin: auto;
+        margin-left: 30px;
+        margin-bottom: 10px;
+        width: calc(80vw - 71px);
         display: block;
         background-color: var(--color-secondary);
         color: var(--color-grey-6);
         border: 1px solid var(--color-grey-4);
         border-radius: 3px;
         padding: 4px;
+
+        @include breakpoint(lg) {
+          margin: auto;
+          width: auto;
+        }
       }
 
       sib-display.nosub>nav {
@@ -141,15 +179,19 @@
         display: grid;
         grid-template-columns: auto 50% auto;
         grid-template-areas: "left middle right";
+
         >* {
           color: var(--color-grey-6);
         }
+
         >[data-id="prev"] {
           grid-area: left;
         }
+
         >[data-id="next"] {
           grid-area: right;
         }
+
         >span {
           grid-area: middle;
         }
@@ -158,6 +200,7 @@
       hubl-menu-publicprivate {
         display: inline-block;
         text-align: center;
+
         div {
           font-family: simple-line-icons;
           width: 20px;
@@ -178,7 +221,6 @@
         }
 
         &>sib-display {
-          
           &:last-child>div {
             margin-bottom: 2.2rem;
           }
@@ -186,6 +228,7 @@
           >div {
             color: var(--color-grey-6);
             cursor: pointer;
+
             >hubl-menu-fix-url-circle>sib-display>div,
             >hubl-menu-fix-url-project>sib-display>div {
               padding: 1rem 1rem 1rem 3rem;
@@ -207,21 +250,24 @@
       }
 
       &.menu-notification {
+
         >sib-display>div>sib-display>div>hubl-menu-fix-url-circle,
         >sib-display>div>sib-display>div>hubl-menu-fix-url-project {
           flex: 1;
         }
+
         >sib-display>div>sib-display>div,
         >sib-display>div>sib-display>div>hubl-menu-fix-url-circle>sib-display>div,
         >sib-display>div>sib-display>div>hubl-menu-fix-url-project>sib-display>div {
           display: flex;
-            sib-display-div {
+          justify-content: space-between;
-              flex: 3;
         }
+
         hubl-counter {
           height: 20px;
           width: 20px;
           margin-right: 1em;
+
           div.counter:not([data-nb-unread="0"]) {
             text-align: center;
             display: block;
@@ -237,7 +283,6 @@
         }
       }
     }
-      }
 
     .divider {
       height: 1px;
@@ -245,27 +290,6 @@
       opacity: 0.2;
     }
   }
-
-  &.jsLeftMenu {
-
-    display: none;
-
-    @include breakpoint(lg) {
-      display: block;
-    }
-  }
-
-  &.jsLeftMenu[open] {
-
-    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;
-  }
 }
 
 // Temporary fix for badges

src/styles/base/table.scss

@@ -1,79 +1,132 @@
-#circle-information,
+/* Display and positioning of the table and its elements */
-#circle-edit,
-#admin-circle-list,
-#admin-circle-create,
-#project-edit,
-#admin-project-list,
-#admin-project-create,
-#admin-users-list {
 
-  [widget="hubl-team-template-edit"]>div {
+.table-wrapper {
-    flex: 1;
+  overflow: auto;
-  }
+  position: relative;
+  width: 100%;
 
   .table {
+    border-collapse: collapse;
+    display: table;
+    margin-bottom: 20px;
+    overflow: auto;
+    table-layout: fixed;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .table-header {
+    display: table-header-group;
+    text-align: center;
+    vertical-align: middle;
+
+    &>div {
+      display: table-cell;
+      white-space: nowrap;
+    }
+  }
+
+  .table-body {
+    display: table-row-group;
+
+    &>div {
+      display: contents;
+
+      &>sib-display {
+        display: table-row;
+
+        &>div {
+          display: contents;
+
+          &>* {
+            border-bottom: 1px solid var(--color-table-border);
+            display: table-cell;
+            vertical-align: middle;
+          }
+        }
+      }
+
+      &>sib-multiple {
+        display: contents;
+
+        &>div {
+          display: contents;
+
+          &>hubl-team-template-edit {
+            display: table-row;
+
+            &>* {
+              border-bottom: 1px solid var(--color-table-border);
+              display: table-cell;
+              text-align: center;
+              vertical-align: middle;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* Styles of the table and its elements */
+
+.table {
+  border-bottom: 1px solid var(--color-table-border);
+  border-left: 1px solid var(--color-table-border);
+  border-right: 1px solid var(--color-table-border);
+}
 
 .table-header {
-      display: flex;
-      flex: 1;
   font-size: 1.6rem;
   font-weight: 600;
-      justify-content: space-around;
-      text-align: center;
 
   &.grey-color {
     background: var(--color-table-header-background);
     color: var(--color-table-header-text);
   }
 
-      >* {
+  >*:not(:last-child) {
-        border-right: 1px solid var(--color-table-border);
+    border-right: 1px solid var(--color-white);
     padding: 2.1rem 0;
     text-align: center;
   }
-
-      >*:last-of-type {
-        border-right: 1px solid --color-table-header-background;
-      }
 }
 
-    .table-body, .table-header {
+.table-body,
-
+.table-header {
-      >div:first-of-type>sib-display>div,
-      hubl-team-template-edit[name='members'] {
-        display: flex;
-        border-left: 1px solid var(--color-table-border);
-      }
 
   .border {
-        border-bottom: 1px solid var(--color-table-border);
     border-right: 1px solid var(--color-table-border);
   }
-
-      .cell {
-        text-align: center;
-        word-wrap: break-word;
-        white-space: nowrap;
 }
 
-      .w25 {
+.table-body,
-        width: 25%;
+.table-header {
+
+  /* Fix. Could disappear when we can add .class on set fields */
+  [name^='cell-1'] {
+    @extend .w280;
+    @extend .border;
   }
 
-      .w33 {
+  .w280 {
-        width: 33.3333%;
+    width: 280px;
   }
 
-      .w50 {
+  .w70 {
-        width: 50%;
+    width: 70px;
   }
 
-      .w66 {
+  .w262 {
-        width: 66.6666%;
+    width: 262px;
   }
 
-      .w75 {
+  .W152 {
-        width: 75%;
+    width: 152px;
+  }
+
+  .w355 {
+    width: 355px;
   }
 
   .hashtag::before {
@@ -81,21 +134,22 @@
   }
 }
 
+/* Styles of specific cells */
+
 .cell-with-buttons {
-      align-items: center;
+  text-align: center;
-      display: flex;
-      justify-content: center;
 
   [name='button'] {
 
     input[type='submit'] {
-          @extend .button,
+      @extend
+      .button,
       .text-bold,
       .text-uppercase,
       .reversed,
       .button-secondary,
       .bordered,
-          .btn-margin-left;
+      .desktop-btn-margin__left;
     }
   }
 }
@@ -103,53 +157,73 @@
 .cell-with-name {
   color: var(--color-secondary);
   font-weight: 600;
-      padding-top: 2.5rem;
+  padding-left: 2rem;
+  text-align: left;
 }
 
-    sib-multiple {
+/* Styles of elements inside cells */
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
 
-    .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */,
+.user-thumb>div,
 [name='user-thumb'] {
+  vertical-align: middle;
+  text-align: left;
   @extend %user-thumb__grid;
   padding: 0 2.2rem;
 
   >.user-thumb__picture {
-        @extend %user-thumb__picture;
+    @extend .user-thumb__picture;
   }
 
   >[name='sup'] {
     @extend %user-thumb__grid-sup;
-
-        .user-thumb__name {
-          @extend %user-thumb__name;
-        }
-
-        .user-thumb__groups {
-          @extend %user-thumb__groups;
-        }
   }
 
   >[name='sub'] {
     @extend %user-thumb__grid-inf;
-
-        >.user-thumb__username:not(:empty) {
-          @extend %user-thumb__username;
-        }
-
-        >.user-thumb__city:not(:empty) {
-          @extend %user-thumb__city;
-        }
   }
 }
 
-    sib-ac-checker {
+.table sib-ac-checker {
-      align-items: center;
+  text-align: center;
-      display: flex;
+}
-      justify-content: center;
+
+.circle-join {
+  position: relative;
+  width: 181px;
+  margin: 0 auto;
+  min-width: 181px;
+
+  input {
+    height: 29px;
+    left: -1px;
+    position: absolute;
+    top: -1px;
+    width: 102%;
+    padding-left: 14px !important;
+  }
+
+  &.button.with-icon::before {
+    margin-left: 6px;
   }
 }
+
+.circle-leave {
+  position: relative;
+  width: 40%;
+  min-width: 40%;
+
+  &>button {
+    height: 29px;
+    padding-left: 13px;
+    position: absolute;
+    left: 1px;
+    top: -1px;
+    width: 106%;
+  }
+
+  &.button.with-icon::before {
+    font-size: 1.6rem;
+    margin-right: 2rem !important;
+    margin-left: -50px;
+  }
 }

src/styles/base/user-thumb.scss

@@ -1,8 +1,9 @@
+/* The grids */
 %user-thumb__grid {
   display: grid;
   grid-column-gap: 1.6rem;
   grid-template-columns: 7vh auto;
-  grid-template-rows: repeat(2, 5.2vh);
+  grid-template-rows: repeat(2, auto);
 }
 
 %user-thumb__grid-sup {
@@ -21,58 +22,26 @@
   margin-top: 0.50rem;
 }
 
-%user-thumb__picture {
+/* Styles for elements of user-thumb*/
-  align-items: center;
+.user-thumb__picture {
   align-self: center;
-  background-color: var(--color-avatar-background);
-  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 {
+.user-thumb__name {
-    height: 45%;
-    width: 45%;
-  }
-}
-
-%user-thumb__name {
   color: var(--color-user-thumb-name);
   font-weight: 600;
   margin-right: 1rem;
 }
 
-%user-thumb__groups {
+.user-thumb__admin:not(:empty) {
-  display: flex;
-  margin-bottom: 1px;
-  margin-left: 0.6rem;
-
-  [name='groups'],
-  [name='user.groups'] {
-    @extend %tag-role;
-  }
-}
-
-%user-thumb__admin {
   @extend %tag-admin;
 }
 
-%user-thumb__username {
+.user-thumb__username {
   align-items: center;
   display: flex;
 
@@ -81,7 +50,7 @@
   }
 }
 
-%user-thumb__city {
+.user-thumb__city:not(:empty) {
   @include mdi('atom');
   align-items: center;
   display: flex;
@@ -93,7 +62,7 @@
   }
 }
 
-%user-thumb__lead {
+.user-thumb__lead:not(:empty) {
   @include icon('eyeglass');
   align-items: center;
   display: flex;
@@ -106,3 +75,23 @@
     margin-right: 0.50rem;
   }
 }
+
+/* Apply the grids to all user-thumbs */
+.user-thumb>div,
+[name='user-thumb'] {
+  @extend %user-thumb__grid;
+
+  >[name='sup'] {
+    @extend %user-thumb__grid-sup;
+  }
+
+  >[name='sub'] {
+    @extend %user-thumb__grid-inf;
+  }
+}
+
+/* Add extra spaces to user-thumbs that are inside a table */
+.user-thumb.is-spaced>div,
+[name='user-thumb'] {
+  padding: 0.8rem 2.2rem;
+}

src/styles/components/_index.scss

@@ -1,7 +1,6 @@
 @import 'chat';
 @import 'comment';
 @import 'filters';
-@import 'howto';
 @import 'sidebar';
 @import 'skills';
 @import 'tags';

src/styles/components/chat.scss

@@ -1,16 +1,19 @@
 .chat-view {
   padding: 0;
-  height: calc(100vh - 84px - 83px);
+  height: calc(100vh - 106px);
   position: relative;
   overflow: hidden;
 
+  @include breakpoint(lg) {
+    height: calc(100vh - 84px - 83px); /* Header's and subheader's height on mobile */
+  }
+
   > sib-chat {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    max-height: calc(100vh - 84px - 83px);
     z-index: 0;
   }
 }

src/styles/components/howto.scss

@@ -1,14 +0,0 @@
-.howto {
-  padding: 0.85rem;
-  margin-bottom: 1.7rem;
-  margin-left: 8.5rem;
-  flex-basis: auto;
-  border-radius: 2em;
-
-  div[class*="icon-"] {
-    align-items: center;
-    display: flex;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-}

src/styles/components/sidebar.scss

@@ -1,8 +1,13 @@
 .no-sidebar {
   flex: 1;
+  margin-top: 50px;
+
+  @include breakpoint(lg) {
+    margin-top: 0;
+  }
 
   &.with-padding {
-    @extend %padding-main;
+    padding: 1.3rem;
   }
 }
 
@@ -11,14 +16,20 @@
   display: flex;
   flex-direction: row;
   align-items: stretch;
+  margin-top: 50px;
   overflow: hidden;
 
+  @include breakpoint(lg) {
+    margin-top: 0;
+  }
+
   .views-container {
     flex: 1 0 0;
     /*-webkit-backface-visibility: hidden;*/
 
     &.sidebar-is-closed {
-      @include breakpoint(769px, 0) {
+      
+      @include breakpoint(lg) {
         margin-left: -15.5rem;
         transform: translate(15.5rem);
       }
@@ -141,9 +152,10 @@
     }
 
     &.jsRightMenu {
-
-      @include breakpoint(sm) {
       display: none;
+
+      @include breakpoint(lg) {
+        display: block;
       }
     }
 
@@ -157,7 +169,7 @@
     
     &.jsRightMenu[open] {
 
-      @include breakpoint(sm) {
+      @include breakpoint(md) {
         display: block;
         background: var(--color-right-menu-background);
         bottom: 0;
@@ -165,9 +177,13 @@
         min-width: 60%;
         position: fixed;
         right: 0;
-        top: 83px;
+        top: 50px;
         z-index: 1;
       }
+
+      @include breakpoint(lg) {
+        top: 83px;
+      }
     }
   }
 }

src/styles/components/tags.scss

@@ -1,14 +1,7 @@
-%tag-role {
-  border: 1px solid var(--color-tag-group-border);
-  border-radius: 3px;
-  color: var(--color-tag-group-text);
-  font-size: 1.4rem;
-  font-weight: 400;
-  margin-right: 0.6rem;
-  padding: 0.2rem 0.98rem;
-}
-
 %tag-admin {
+  display: none;
+
+  @include breakpoint(lg) {
     border: 1px solid var(--color-tag-admin-border);
     border-radius: 3px;
     color: var(--color-tag-admin-text);
@@ -17,3 +10,4 @@
     margin-left: 0.6rem;
     padding: 0.35rem 0.98rem;
   }
+}

src/styles/index.scss

@@ -10,7 +10,7 @@
 @import 'base/main';
 @import 'base/about';
 
-div#viewport {
+#viewport {
     display: flex;
     flex: 1;
     /*height: auto;
@@ -19,8 +19,6 @@ div#viewport {
     @import 'components/index';
     @import 'layout/members/index';
     @import 'layout/job-offers/index';
-    @import 'layout/project/index';
-    @import 'layout/circle/index';
     @import 'layout/user/index';
     @import 'layout/events/index';
     @import 'layout/dashboard/index';

src/styles/layout/circle/_index.scss

@@ -1,2 +0,0 @@
-@import 'circle-profile';
-@import 'circle-admin';

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

@@ -1,9 +0,0 @@
-.admin-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 5rem;
-
-  .admin-header__title {
-    @extend h3;
-  }
-}

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

@@ -1,43 +0,0 @@
-#circle-information {
-
-  .box-button {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .block {
-
-     /* peut-être à mettre dans main.scss */
-    .user-thumb>div {
-      @extend %user-thumb__grid;
-
-      >.user-thumb__picture {
-        @extend %user-thumb__picture;
-      }
-
-      >[name='sup'] {
-        @extend %user-thumb__grid-sup;
-
-        .user-thumb__name {
-          @extend %user-thumb__name;
-        }
-
-        .tag-group {
-          @extend %user-thumb__groups;
-        }
-
-        .tag-admin:not(:empty) {
-          @extend %tag-admin;
-        }
-      }
-
-      >[name='sub'] {
-        @extend %user-thumb__grid-inf;
-
-        >.user-thumb__city:not(:empty) {
-          @extend %user-thumb__city;
-        }
-      }
-    }
-  }
-}

src/styles/layout/project/_index.scss

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

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

@@ -1,115 +0,0 @@
-#project-profile {
-
-  .button-question__position {
-    position: relative;
-    bottom: 5px;
-  }
-
-  .button-question__color {
-    color: var(--color-secondary);
-  }
-
-  .customer-box {
-    display: flex;
-    margin: 1.6rem 0;
-
-    >* {
-      border: 1px solid var(--color-grey-8);
-      flex: 0 1 50%;
-      padding: 1.7rem 2rem;
-
-      &:first-child {
-
-        li:last-child {
-          margin-top: 3rem;
-
-          p {
-            margin-top: 0.8rem;
-          }
-        }
-      }
-
-      &:last-child {
-        border-left: none;
-
-        li {
-          margin-bottom: 1.5rem;
-        }
-      }
-    }
-  }
-
-  .customer-logo {
-    box-sizing: border-box;
-    display: flex;
-    height: 8.5vh;
-    justify-content: flex-end;
-    margin-top: 20px;
-    text-align: end;
-    width: 15vw;
-  }
-
-  .user-thumb>div {
-    /* Maybe move it in main.scss. /!\ some fields are different */
-    @extend %user-thumb__grid;
-
-    >.user-thumb__picture {
-      @extend %user-thumb__picture;
-    }
-
-    >[name='sup'] {
-      @extend %user-thumb__grid-sup;
-
-      .user-thumb__name {
-        @extend %user-thumb__name;
-      }
-
-      sib-multiple {
-        @extend %user-thumb__groups;
-      }
-
-      .tag-admin:not(:empty) {
-        @extend %tag-admin;
-      }
-    }
-
-    >[name='sub'] {
-      @extend %user-thumb__grid-inf;
-
-      >.user-thumb__city:not(:empty) {
-        @extend %user-thumb__city;
-      }
-
-      >.user-thumb__lead:not(:empty) {
-        @extend %user-thumb__lead;
-      }
-    }
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0;
-
-    li {
-      margin-bottom: 0.5em;
-
-      span::before {
-        color: var(--color-primary);
-        font-size: 2.2rem;
-        margin: 0 1rem 0 0;
-      }
-
-      span {
-        font-weight: bold;
-
-        &.link-color {
-          color: var(--color-complementary);
-        }
-
-        &.norm-weight {
-          font-weight: normal;
-        }
-      }
-    }
-  }
-}

src/styles/layout/user/_index.scss

@@ -1,2 +1 @@
 @import 'user-profile';
-@import 'admin-users';

src/styles/layout/user/admin-users.scss

@@ -1,6 +0,0 @@
-/* Fix. Could disappear when we can add .class on set fields */
-sib-set-default[name='cell-1'] {
-  @extend .w75;
-  @extend .cell;
-  @extend .border;
-}

src/templates/hubl-captain.pug

@@ -4,11 +4,10 @@ sib-widget(name='hubl-captain')
   template
     sib-display.user-thumb(
       data-src="${await value}"
-      fields='account.picture, sup(name), sub(profile.city, is_lead)'
+      fields='account.picture, sup(name), sub(is_lead)'
 
-      class-account.picture='user-thumb__picture'
+      class-account.picture='avatar user-thumb__picture'
       class-name='user-thumb__name'
-      class-profile.city='user-thumb__city'
       class-is_lead='user-thumb__lead'
 
       widget-account.picture='hubl-user-avatar'

src/templates/hubl-circle-team.pug

@@ -2,26 +2,19 @@ include hubl-user-avatar.pug
 
 sib-widget(name='hubl-circle-team-template')
   template
-    sib-display.user-thumb(
+    sib-display.user-thumb.is-spaced(
       data-src='${await value.user}'
-      fields='account.picture, sup(name, isadmin, groups), sub(profile.city)'
+      fields='account.picture, sup(name, isadmin), sub(profile.city)'
       value-isadmin='${await value.is_admin}'
 
-      class-account.picture='user-thumb__picture'
+      class-account.picture='avatar user-thumb__picture'
       class-name='user-thumb__name'
-      class-isadmin='tag-admin'
+      class-isadmin='user-thumb__admin'
-      class-groups='tag-group'
       class-profile.city='user-thumb__city'
 
       widget-account.picture='hubl-user-avatar'
       widget-isadmin='hubl-circle-user-admin'
-      widget-groups='hubl-circle-user-groups'
-
-      multiple-groups=''
     )
 
 sib-widget(name='hubl-circle-user-admin')
   template ${(await value) != "false" ? "Administrateur" : ""}
-
-sib-widget(name='hubl-circle-user-groups')
-  template ${await value.name}

src/templates/hubl-customer.pug

@@ -1,17 +0,0 @@
-sib-widget(name='hubl-customer')
-  template
-    div.customer-box
-      div
-        h3 Client :
-        ul
-          li #[span Nom de l'entreprise : ]${await value.name}
-          li ${await value.companyRegister ? `<span>Immatriculation de l'entreprise : </span> ${await value.companyRegister}` : ``}
-          li ${await value.address ? `<span>Adresse : </span><br/><p>${await value.address}</p>`: ``}
-      div
-        h3 Contact :
-        ul
-          li #[span(class='mdi-account-outline') ${await value.first_name} ${await value.last_name ? await value.last_name : ""}]${await value.role ? `, ${await value.role}` : ""}
-          li
-            span(class='link-color norm-weight mdi-email-outline')
-              a(href='mailto:${await value.email}') ${await value.email}
-          span ${await value.phone ? `<li><span class='norm-weight mdi-cellphone-iphone'>${await value.phone}</span></li>` : ``}

src/templates/hubl-groups.pug

@@ -1,3 +0,0 @@
-sib-widget(name='hubl-groups-name')
-  template ${value.name}
-

src/templates/hubl-project-team.pug

@@ -2,28 +2,21 @@ include hubl-user-avatar.pug
 
 sib-widget(name='hubl-project-team')
   template
-    sib-display.user-thumb(
+    sib-display.user-thumb.is-spaced(
       data-src='${await value}'
-      fields='user.account.picture, sup(user.name, isadmin, user.groups), sub(user.profile.city, name)'
+      fields='user.account.picture, sup(user.name, isadmin), sub(user.profile.city, name)'
       value-isadmin='${await value.is_admin}'
 
-      class-user.account.picture='user-thumb__picture'
+      class-user.account.picture='avatar user-thumb__picture'
 
       class-user.name='user-thumb__name'
-      class-isadmin='tag-admin'
+      class-isadmin='user-thumb__admin'
-      class-user.groups='tag-group'
       class-user.profile.city='user-thumb__city'
       class-name='user-thumb__lead'
 
       widget-user.account.picture='hubl-user-avatar'
       widget-isadmin='hubl-project-user-admin'
-      widget-user.groups='hubl-project-user-groups'
-
-      multiple-user.groups=''
     )
 
 sib-widget(name='hubl-project-user-admin')
   template ${(await value) == "false" ? "" : "Administrateur"}
-
-sib-widget(name='hubl-project-user-groups')
-  template ${await value.name}

src/views/admin/page-admin-circles-create.pug

@@ -1,23 +1,23 @@
-div.content-box__info
+div.content-box__info.flex
   sib-link(class="backlink right", next='admin-circle-list') Retour
 
   h1.centered Créer un canal
 
-  sib-form(
+  sib-form.form.button-register(
     data-src=`${endpoints.circles || endpoints.post.circles}`
 
     fields='status, name, description'
 
+    class-status='form-label is-light is-full-width color'
+    class-name='form-label is-light is-full-width input-text-like'
+    class-description='form-label is-light is-full-width input-text-like'
+
     label-status='Statut du canal'
-    widget-status='hubl-status'
-
-    class-name='form-label is-light is-full-width'
-    class-description='form-label is-light is-full-width'
-      class-status='form-label is-light is-full-width member-select color'
-
     label-name='Nom du canal *'
     label-description='Sous-titre du canal *'
 
+    widget-status='hubl-status'
+    
     next='admin-circle-list'
 
     submit-button='Enregistrer'

src/views/admin/page-admin-circles.pug

@@ -1,24 +1,25 @@
-.content-box.full-width.with-form
+.content-box.flex.full-width.with-form
   sib-router(default-route='admin-circle-list', hidden)
     sib-route(name='admin-circle-list')
     sib-route(name='admin-circle-create')
     sib-route(name='circle-left')
 
-  div.content-box__header
+  div.content-box__header.flex.space-between
     h1.without-margin Administration
+    button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
 
   include ../circle/page-circle-left.pug
 
-  #admin-circle-list(hidden)
+  #admin-circle-list.content-box__height(hidden)
     include ../../templates/hubl-user-avatar.pug
 
     sib-widget(name='hubl-circle-owner')
       template
-        sib-display.user-thumb(
+        sib-display.user-thumb.is-spaced(
           data-src='${await value}'
           fields='account.picture, sup(name), sub(username)'
 
-          class-account.picture='user-thumb__picture'
+          class-account.picture='avatar user-thumb__picture'
           class-name='user-thumb__name'
           class-username='user-thumb__username'
 
@@ -26,28 +27,29 @@
         )
 
 
-    div.content-box__info
+    div.content-box__info.flex
 
-      div.admin-header
+      div.admin-header.flex
 
-        div.admin-header__title Canaux
+        h3 Canaux
 
         sib-link(
           class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
           next='admin-circle-create'
         ) Créer un canal
 
+      .table-wrapper
         .table
 
           div.table-header.grey-color
-          div.w33 Nom
+            div.w280 Nom
-          div.w33 Administrateurs
+            div.w280 Administrateurs
-          div.w33 Rejoindre
+            div.w280 Rejoindre
 
           sib-widget(name='hubl-admin-circle-leave-button')
             template
               sib-delete(
-              class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+                class='circle-leave button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
                 data-src="${src}"
                 data-label='Quitter'
               )
@@ -59,9 +61,9 @@
             nested-field='circles'
             fields='circle.name, circle.owner, leaveButton'
 
-          class-circle.name='w33 cell border cell-with-name'
+            class-circle.name='w280 border cell-with-name'
-          class-circle.owner='w33 cell border cell-with-id-card'
+            class-circle.owner='w280 border cell-with-id-card'
-          class-leaveButton='w33 cell border cell-with-buttons'
+            class-leaveButton='w280 border cell-with-buttons'
 
             action-leaveButton="joinButton"
             widget-leaveButton="hubl-admin-circle-leave-button"
@@ -72,7 +74,7 @@
 
           sib-widget(name='hubl-admin-circle-join-button')
             template
-            sib-form.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
+              sib-form.circle-join.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
                 data-src='${value}'
 
                 fields='user.username'
@@ -88,16 +90,16 @@
             data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
             fields='name, owner, members'
 
-          class-name='w33 cell border cell-with-name'
+            class-name='w280 border cell-with-name'
-          class-owner='w33 cell border cell-with-id-card'
+            class-owner='w280 border cell-with-id-card'
             widget-owner='hubl-circle-owner'
 
-          class-members='w33 cell border cell-with-buttons'
+            class-members='w280 border cell-with-buttons'
             widget-members="hubl-admin-circle-join-button"
 
             order-by="name"
           )
 
 
-  #admin-circle-create(hidden)
+  #admin-circle-create.content-box__height(hidden)
     include page-admin-circles-create.pug

src/views/admin/page-admin-projects-create.pug

@@ -1,8 +1,4 @@
-sib-widget(name='hubl-template-project-title')
+div.content-box__info.flex
-  template
-    p ${value}
-
-div.content-box__info
   sib-link(class="backlink right" next='admin-project-list') Retour
 
   sib-widget(name="hubl-admin-project-add-user")
@@ -18,40 +14,32 @@ div.content-box__info
 
   h1.centered Créer un projet
 
-  sib-form(
+  sib-form.form.button-register(
     data-src=`${endpoints.projects || endpoints.post.projects}`
     
-    fields='line-1(customer, name), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-captain, line-10(captain)'
+    fields='line-1(customer, name), line-2(project.description), line-3(businessProvider.name, businessProvider.fee), line-4(captain)'
-
-    class-fieldset-fee='fieldset'
-    value-fieldset-fee='Contributions'
-    widget-fieldset-fee='hubl-template-project-title'
-    
-    class-fieldset-captain='fieldset'
-    value-fieldset-captain='Capitaine'
-    widget-fieldset-captain='hubl-template-project-title'
 
 		label-customer='Nom du client*'
-    class-customer='member-select form-label is-light is-half-width'
+    class-customer='form-label is-light is-half-width'
     range-customer=`${endpoints.customers || endpoints.get.customers}`
     widget-customer='sib-form-auto-completion'
 
 		label-name='Nom du projet*'
-    class-name='form-label is-light is-half-width'
+    class-name='form-label is-light is-half-width input-text-like'
 
 		label-project.description='Description du projet'
-    class-project.description='form-label is-light is-full-width'
+    class-project.description='form-label is-light is-full-width input-text-like'
     widget-project.description='sib-form-textarea'
 
 		label-businessProvider.name='Apporteur d\'affaire*'
-    class-businessProvider.name='form-label is-light is-half-width'
+    class-businessProvider.name='form-label is-light is-half-width input-text-like'
 
 		label-businessProvider.fee='Contribution'
-    class-businessProvider.fee='form-label is-light is-half-width'
+    class-businessProvider.fee='form-label is-light is-half-width input-text-like'
 
     label-captain='Capitaine du projet'
     range-captain=`${endpoints.users || endpoints.get.users}`
-    class-captain='member-select form-label is-light is-half-width'
+    class-captain='form-label is-light is-half-width'
     widget-captain='sib-form-auto-completion'
 
     next='admin-project-list'

src/views/admin/page-admin-projects.pug

@@ -1,32 +1,34 @@
-.content-box.full-width.with-form
+.content-box.flex.full-width.with-form
   sib-router(default-route='admin-project-list', hidden)
     sib-route(name='admin-project-list')
     sib-route(name='admin-project-create')
     sib-route(name='project-left')
 
-  div.content-box__header
+  div.content-box__header.flex.space-between
     h1.without-margin Administration
+    button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
 
   #project-left(hidden)
     include ../project/page-project-left.pug
 
-  #admin-project-list(hidden)
+  #admin-project-list.content-box__height(hidden)
     include ../../templates/hubl-user-avatar.pug
 
-    div.content-box__info
+    div.content-box__info.flex
-      div.admin-header
+      div.admin-header.flex
-        div.admin-header__title Projets
+        h3 Projets
         sib-link(
           class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
           next='admin-project-create'
         ) Créer un projet
 
+      .table-wrapper
         .table
           div.table-header.grey-color
-          div Nom
+            div.w262 Nom
-          div Administrateurs
+            div.w262 Administrateurs
-          div Capitaines
+            div.w262 Capitaines
-          div Accès
+            div.w262 Accès
 
           sib-widget(name="hubl-admin-project-leave-button")
             template
@@ -38,11 +40,11 @@
 
           sib-widget(name='hubl-project-captain')
             template
-            sib-display.user-thumb(
+              sib-display.user-thumb.is-spaced(
                 data-src='${await value}'
                 fields='account.picture, sup(name), sub(username)'
 
-              class-account.picture='user-thumb__picture'
+                class-account.picture='avatar user-thumb__picture'
                 class-name='user-thumb__name'
                 class-username='user-thumb__username'
 
@@ -80,10 +82,10 @@
             data-src=`${endpoints.projects || endpoints.get.projects}`
             fields='name, members, captain, buttons'
 
-          class-name='w25 cell border cell-with-name hashtag'
+            class-name='w262 border cell-with-name hashtag'
-          class-members='w25 cell border'
+            class-members='w262 border'
-          class-captain='w25 cell border cell-with-id-card'
+            class-captain='w262 border cell-with-id-card'
-          class-buttons='w25 cell border cell-with-buttons'
+            class-buttons='w262 border cell-with-buttons'
 
             widget-buttons="admin-project-buttons"
             action-buttons="buttons"
@@ -92,5 +94,5 @@
             widget-members='hubl-project-admins'
           )
 
-  #admin-project-create(hidden)
+  #admin-project-create.content-box__height(hidden)
     include page-admin-projects-create.pug

src/views/admin/page-admin-users-create.pug

@@ -1,18 +1,17 @@
-div.content-box__info
+div.content-box__info.flex
   sib-link(class='backlink right', next='admin-users-list') Retour
 
   h1.centered Ajouter un utilisateur à la plateforme
 
-  sib-form(
+  sib-form.form.button-register(
     data-src=`${endpoints.users || endpoints.post.users}`
-    range-groups=`${endpoints.groups || endpoints.get.groups}`
 
     fields='line-1(first_name, last_name), line-2(username, email), line-3(password)'
 
-    class-first_name='form-label is-light is-half-width'
+    class-first_name='form-label is-light is-half-width input-text-like'
-    class-last_name='form-label is-light is-half-width'
+    class-last_name='form-label is-light is-half-width input-text-like'
-    class-username='form-label is-light is-half-width'
+    class-username='form-label is-light is-half-width input-text-like'
-    class-email='form-label is-light is-half-width'
+    class-email='form-label is-light is-half-width input-text-like'
 
     label-first_name='Prénom *'
     label-last_name='Nom *'

src/views/admin/page-admin-users-edit.pug

@@ -1,4 +1,4 @@
-div.content-box__info
+div.content-box__info.flex
   sib-link(class='backlink right', next='admin-users-list') Retour
 
   h1.centered 
@@ -8,16 +8,15 @@ div.content-box__info
       fields='name'
     )  
 
-  sib-form(
+  sib-form.form.button-register(
     bind-resources=''
-    range-groups=`${endpoints.groups || endpoints.get.groups}`
 
     fields='line-1(first_name, last_name), line-2(username, email)'
 
-    class-first_name='form-label is-light is-half-width'
+    class-first_name='form-label is-light is-half-width input-text-like'
-    class-last_name='form-label is-light is-half-width'
+    class-last_name='form-label is-light is-half-width input-text-like'
-    class-username='form-label is-light is-half-width'
+    class-username='form-label is-light is-half-width input-text-like'
-    class-email='form-label is-light is-half-width'
+    class-email='form-label is-light is-half-width input-text-like'
 
     label-first_name='Prénom *'
     label-last_name='Nom *'

src/views/admin/page-admin-users.pug

@@ -1,11 +1,12 @@
-.content-box.full-width.with-form
+.content-box.flex.full-width.with-form
   sib-router(default-route='admin-users-list', hidden)
     sib-route(name='admin-users-list')
     sib-route(name='admin-users-create')
     sib-route(name='admin-users-edit')
 
-  div.content-box__header
+  div.content-box__header.flex.space-between
     h1.without-margin Administration
+    button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
   
   sib-widget(name='hubl-sib-action-custom')
     template
@@ -16,35 +17,29 @@
           next="${value}"
         )
 
-  sib-widget(name='hubl-user-admin-groups-display')
-    template
-      sib-display(
-        data-src="${value}"
-        fields="name"
-      )
 
-
+  #admin-users-list.content-box__height(hidden)
-  #admin-users-list(hidden)
+    div.content-box__info.flex
-    div.content-box__info
+      div.admin-header.flex
-      div.admin-header
+        h3 Utilisateurs
-        div.admin-header__title Utilisateurs
         sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append')
           sib-link(
             class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
             next='admin-users-create'
           ) Ajouter un utilisateur
 
+      .table-wrapper
         .table
           div.table-header.grey-color
-          div.w75 Nom
+            div.w280 Nom
-          div.w25
+            div.w70
         
           sib-display(
             class='table-body'
             data-src=`${endpoints.users || endpoints.get.users}`
             fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions'
 
-          class-account.picture='user-thumb__picture'
+            class-account.picture='avatar user-thumb__picture'
             class-name='user-thumb__name'
             class-username='user-thumb__username'
             class-profile.city='user-thumb__city'
@@ -52,15 +47,15 @@
 
             label-actions='Edit'
             action-actions='admin-users-edit'
-          class-actions='w25 cell border cell-with-buttons'
+            class-actions='w70 border cell-with-buttons'
             widget-actions='hubl-sib-action-custom'
 
             order-by='username'
           )
 
 
-  #admin-users-create(hidden)
+  #admin-users-create.content-box__height(hidden)
     include page-admin-users-create.pug
 
-  #admin-users-edit(hidden)
+  #admin-users-edit.content-box__height(hidden)
     include page-admin-users-edit.pug

src/views/circle/page-circle-edit.pug

@@ -7,12 +7,12 @@ div.content-box__info
 
   sib-widget(name='hubl-team-template-edit')
     template
-      sib-display.user-thumb(
+      sib-display.user-thumb.is-spaced(
-        class='w66 cell border cell-with-id-card user-thumb'
+        class='w355 cell border cell-with-id-card user-thumb'
         data-src='${await value.user}'
         fields='account.picture, sup(name, groups), sub(profile.city)'
 
-        class-account.picture='user-thumb__picture'
+        class-account.picture='user-thumb__picture avatar'
         class-name='user-thumb__name'
         class-groups='user-thumb__groups'
         class-profile.city='user-thumb__city'
@@ -24,7 +24,7 @@ div.content-box__info
       )
 
       sib-ac-checker(
-        class='w33 cell border'
+        class='W152 cell border'
         permission="acl:Delete"
         data-src="${value['@id']}"
       )
@@ -36,7 +36,7 @@ div.content-box__info
 
       //- Only to show the table grid
       sib-ac-checker(
-        class='w33 cell border'
+        class='W152 cell border'
         no-permission="acl:Delete"
         data-src="${value['@id']}"
       )
@@ -46,10 +46,10 @@ div.content-box__info
   sib-ac-checker(permission='acl:Write', bind-resources)
     h1 Modifie ton canal
 
-    sib-form.form-edit(
+    sib-form.form.button-register(
       bind-resources
 
-      fields='status, block-circle__info(name, owner), description'
+      fields='status, line-1(name, owner), description'
       range-owner=`${endpoints.users || endpoints.get.users}`
 
       label-status='Statut du canal'
@@ -59,9 +59,9 @@ div.content-box__info
       label-owner='Administrateur ou administratrice'
       label-description='Sous-titre du canal *'
 
-      class-name='form-label is-light is-half-width'
+      class-name='form-label is-light is-half-width input-text-like'
       class-owner='form-label is-light is-half-width member-select color'
-      class-description='form-label is-light is-full-width'
+      class-description='form-label is-light is-full-width input-text-like'
       class-status='form-label is-light is-full-width member-select color'
 
       widget-owner='sib-form-auto-completion'
@@ -75,24 +75,24 @@ div.content-box__info
   h2 Liste des membres:
 
   sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-    sib-form.block.select-add-member(
+    sib-form.block.select-add(
       bind-resources 
       nested-field='members'
       fields='user'
       range-user=`${endpoints.users || endpoints.get.users}`
 
-      class-user='team form-label is-dark'
+      class-user='team form-label is-light'
       label-user=''
       widget-user='sib-form-auto-completion'
 
       submit-button='Ajouter un membre'
     )
 
+  .table-wrapper
     .table
-
       div.table-header.grey-color
-      div.w66 Nom
+        div.w355 Nom
-      div.w33 Accès
+        div.W152 Accès
 
       //-class='table-body'
       sib-display(

src/views/circle/page-circle-left.pug

@@ -1,5 +1,5 @@
 #circle-left(hidden)
-  div.content-box__info(style="padding: 15px")
+  div.content-box__info.flex(style="padding: 15px")
 
     p Tu as quitté ce canal.
     p Pour le rejoindre à nouveau, rends-toi dans le panneau <sib-link next="admin-circle-list">administration</sib-link> ou contacte un administrateur.

src/views/circle/page-circle-profile.pug

@@ -6,8 +6,8 @@ sib-router(default-route='circle-profile', hidden)
   include ../../templates/hubl-circle-team.pug
   .content-box__info
 
-    .space-between
+    .flex.space-between.with-padding.mobile-vertical-align
-      sib-display(
+      sib-display.mobile-margin__bottom(
         bind-resources
         fields='creationDateSet(title, creationDate)'
 
@@ -18,13 +18,13 @@ sib-router(default-route='circle-profile', hidden)
         widget-creationDate='sib-display-date'
       )
       sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-        sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre
+        sib-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre
 
 
-    div.box-button
+    div.flex.desktop-button__end
       sib-ac-checker(permission='acl:Delete', bind-resources)
         sib-delete(
-          class='button text-bold text-uppercase button-primary bordered with-icon icon-trash'
+          class='button mobile-full-width text-bold text-uppercase button-primary bordered with-icon icon-trash'
           bind-resources
           data-label='Supprimer le canal'
         )
@@ -32,14 +32,14 @@ sib-router(default-route='circle-profile', hidden)
       sib-widget(name='hubl-circle-leave-button')
         template
           sib-delete(
-            class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+            class='button mobile-full-width desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
             data-src="${src}"
             data-label='Quitter le canal'
           )
 
       sib-widget(name='hubl-circle-join-button')
         template
-          button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex
+          button.button.desktop-btn-margin__left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex
             sib-form(
               data-src=''
               nested-field='members'
@@ -80,5 +80,5 @@ sib-router(default-route='circle-profile', hidden)
 
 
 
-#circle-edit(hidden)
+#circle-edit.content-box__height(hidden)
   include page-circle-edit.pug

src/views/project/page-project-chat.pug

@@ -1,4 +1,4 @@
-.content-box.with-padding.full-width.chat-view
+.content-box.flex.full-width.chat-view
   sib-chat(
     data-authentication='login',
     data-auto-login='true',

src/views/project/page-project-edit.pug

@@ -2,62 +2,53 @@ div.content-box__info
 
   include ../../templates/hubl-user-avatar.pug
 			
-  sib-widget(name='hubl-fieldset-title')
-    template
-      label ${label}
-			
   sib-link(class='backlink right', bind-resources, next='project-profile') Retour
 
   h1 Modifie ton projet
 
-  sib-form.form-edit(
+  sib-form.form.button-register(
 	  bind-resources
 	
-	  fields='fieldset-info, block-project__info(customer, name, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)'
+	  fields='line-1(customer, name), description, line-2(businessProvider, businessProviderFee)'
 
-    class-customer='member-select form-label is-light is-half-width'
+    class-customer='form-label is-light is-half-width'
     widget-customer='sib-form-auto-completion'
-    class-name='form-label is-light is-half-width'
+    class-name='form-label is-light is-half-width input-text-like'
-    class-description='form-label is-light is-full-width'
+    class-description='form-label is-light is-full-width input-text-like'
-    label-fieldset-info=''
     label-customer='Client*'
     range-customer=`${endpoints.customers || endpoints.get.customers}`
     label-name='Nom du projet*'
     label-description='Description du projet'
-    widget-fieldset-info='hubl-fieldset-title'
     widget-description='sib-form-textarea'
 
-    class-fieldset-fee='fieldset'
+    class-businessprovider='form-label is-light is-half-width input-text-like'
-    class-businessprovider='form-label is-light is-half-width'
+    class-businessproviderfee='form-label is-light is-half-width input-text-like'
-    class-businessproviderfee='form-label is-light is-half-width'
-    label-fieldset-fee='Contributions'
     label-businessprovider='Apporteur d\'affaire'
     label-businessproviderfee='Montant de la contribution'
-    widget-fieldset-fee='hubl-fieldset-title'
 
     submit-button='Enregistrer'
   )
 
   h2 Liste des membres :
 
-  sib-form.block.select-add-member(
+  sib-form.block.select-add.button-add(
     bind-resources 
     nested-field='members'
     fields='user'
     range-user=`${endpoints.users || endpoints.get.users}`
 
-    class-user='team form-label is-dark'
+    class-user='team form-label is-light'
     label-user=''
     widget-user='sib-form-auto-completion'
 
     submit-button='Ajouter un membre'
   )
 
+  .table-wrapper
     .table
-
       div.table-header.grey-color
-      div Nom
+        div.w355 Nom
-      div Accès
+        div.W152 Accès
 
       //-class='table-body'
       sib-display(

src/views/project/page-project-left.pug

@@ -1,5 +1,5 @@
 #project-left
-  div.content-box__info(style="padding: 15px")
+  div.content-box__info.flex(style="padding: 15px")
 
     p Tu as quitté ce projet.
     p Ceci est un groupe privé. Pour le rejoindre, rends-toi dans le panneau <sib-link next="admin-project-list">administration</sib-link> et demande une invitation.

src/views/project/page-project-profile.pug

@@ -5,13 +5,12 @@ sib-router(default-route='project-profile', hidden)
 #project-profile(hidden)
   include ../../templates/hubl-captain.pug
   include ../../templates/hubl-circle-team.pug
-  include ../../templates/hubl-customer.pug
   include ../../templates/hubl-project-team.pug
 
-  .content-box__info
+  .content-box__info.flex
 
-    .space-between
+    .flex.space-between.with-padding.mobile-vertical-align
-      sib-display(
+      sib-display.mobile-margin__bottom(
         bind-resources
         fields='creationDateSet(title, creationDate)'
 
@@ -22,10 +21,10 @@ sib-router(default-route='project-profile', hidden)
         widget-creationDate='sib-display-date'
       )
       sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-        sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources) Modifier et ajouter un membre
+        sib-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources) Modifier et ajouter un membre
 
     
-    .space-between
+    .flex.space-between.with-padding
       sib-display(
         bind-resources
         fields='label-captain, captain'
@@ -42,19 +41,6 @@ sib-router(default-route='project-profile', hidden)
         widget-customer.logo='sib-display-img'
       )
 
-    h2 Contributions: 
-      sib-link(next='project-contributions-help').button-question__position
-        button(aria-label='modal activator').icon-question.button-question__color
-
-    h2 Informations sur le client :
-
-    sib-display(
-      bind-resources
-      fields='customer'
-
-      widget-customer='hubl-customer'
-    )
-
     h2 Equipe :
 
     sib-display(
@@ -68,13 +54,13 @@ sib-router(default-route='project-profile', hidden)
     sib-widget(name='hubl-project-leave-button')
       template
         sib-delete(
-          class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+          class='button desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
           data-src="${src}"
           data-label='Quitter le groupe'
         )
 
     sib-display(
-      class='position-end'
+      class='flex desktop-button__end'
       bind-resources
       nested-field='members'
       fields='relation'
@@ -90,5 +76,5 @@ sib-router(default-route='project-profile', hidden)
     )
 
 
-#project-edit(hidden)
+#project-edit.content-box__height(hidden)
   include page-project-edit.pug