ui(all pages): MR!13 - Upgrade to core v0.6

Fixed responsive issue on counter in /members page
Had to modify some CSS files, create templates, modify data-fields in sib-display, clean up and refactor
Removed custom-widgets

src/dependencies.pug

@@ -33,9 +33,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 //link(rel='import', href='/lib/sib-chat/sib-chat.html')
 
 //- cdn
-//- don't forget to change version in hd-widgets.js
 script(type="module" src="https://unpkg.com/@startinblox/core@0.6")
-script(type="module" src="https://unpkg.com/@startinblox/router@0.6")
+script(type="module" src="https://unpkg.com/@startinblox/router@latest")
 script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
 
-script(type="module" src="/scripts/hd-widgets.js")

src/header.pug

@@ -18,5 +18,5 @@ sib-display#profile(
   data-fields='first_name, account.picture',
   widget-account.picture='sib-display-img',
   bind-user
-  )
+)
 

src/page-job-offer-create.pug

@@ -1,4 +1,13 @@
 .frame-form
+
+  sib-widget(name='title-text')
+    template
+      p Be clear and specific with the name of your offer. You can indicate which skill is important, the start date or the name of the client. Ex: "Looking for a plumber for planet Mars ASAP".
+
+  sib-widget(name='description-text')
+    template
+      p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...'
+  
   sib-link(next='job-offers' class='back') Back
   h1 Post a new job offer
   p.form-goal This form allows you to share an offer to all members of the network.
@@ -11,16 +20,11 @@
       data-fields='title, title-text, description, description-text, skills',
 
       label-title='Title*',
-
-      value-title-text='Be clear and specific with the name of your offer. You can indicate which skill is important, the start date or the name of the client. Ex: "Looking for a plumber for planet Mars ASAP".',
-      widget-title-text='hdapp-form-text',
-
       label-description='Description*',
-      
-      value-description-text='Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...',
-      widget-description-text='hdapp-form-text',
-      
       label-skills='The required skills for this mission:*',
+      
+      widget-title-text='title-text',
+      widget-description-text='description-text',
       widget-skills='sib-form-auto-completion',
       
       next="job-offers"

src/page-job-offers.pug

@@ -1,26 +1,25 @@
 div.grid-layer
+
+  include templates/template-groups.pug
+  include templates/template-skills.pug
+
   div.grid-layer-main.containerV
     h2 New offers
       span Here you can find and post offers
     sib-display#offers-list(
       data-src=`${sdn}/job-offers/`,
-      data-fields='status, user-thumb, creation, title, description, skills, send',
-      
-      set-status='closingDate',
-      widget-closingDate='hdapp-closing-date',
+      data-fields='user-thumb, creationDate, title, description, skills, send',
       
       set-user-thumb='author.account.picture, author.first_name, author.groups',
       widget-author.account.picture='sib-display-img',
-      widget-author.groups='sib-display-lookuplist',
+      widget-author.groups='groups-name',
+      multiple-author.groups,
 
-      set-creation='creationDate',
+      widget-skills='skills-name',
+      multiple-skills,
       
-      widget-skills='sib-display-lookuplist',
-      
-      set-send='before-send-link, send-link',
-      value-before-send-link='',
-      value-send-link='Send a private message',
-      template-send-link='chat-link'
+      action-send='member-chat',
+      label-send='Send a private message',
       
       search-range-skills=`${sdn}/skills/`,
       search-fields='content, skills, open',

src/page-member-profile.pug

@@ -1,10 +1,8 @@
 sib-link(next="members" class="backlink") Back to directory
 
-template#chat-link
-  sib-link(next="member-chat") ${value}
-
-template#member-status
-  div#member-status ${value == true ? '<span class="status-one">Available</span>' : '<span class="status-two">Busy</span>'}
+include templates/template-groups.pug
+include templates/template-skills.pug
+include templates/template-status.pug
 
 div#member-profile
   sib-display(
@@ -13,18 +11,22 @@ div#member-profile
     set-member-profile__bio ='user.profile.available, member-img, member-profile, user.username, bio, infos, send',
     set-member-profile__skills='user.skills',
     set-member-profile__xp='',
+
     set-member-img='user.account.picture',
-    set-member-profile='user.first_name, user.last_name, user.groups',
+    set-member-profile='user.name, user.groups',
     set-infos='city, user.groups, user.email, phone, foaf:homepage',
     
-    template-user.profile.available='member-status',
-    template-send='chat-link',
-    
-    value-send='SEND A MESSAGE',
+    label-send='SEND A MESSAGE',
+    action-send='member-chat',
     
     widget-user.account.picture='sib-display-img',
-    widget-user.groups='sib-display-lookuplist',
-    widget-user.skills='sib-display-lookuplist',
+    widget-user.groups='groups-name',
+    widget-user.skills='skills-name',
+    widget-user.profile.available='status-template',
+
+    multiple-user.groups,
+    multiple-user.skills,
     
     bind-resources
   )
+

src/page-member.pug

@@ -1,5 +0,0 @@
-//-
-  #container-member
-    sib-link(next="members" class="back") Back to directory
-    div#member-profile
-      include page-member-profile.pug

src/page-members.pug

@@ -1,40 +1,44 @@
 div.grid-layer
-  template#chat-link
-    sib-link(next="member-chat") ${value}
+
+  include templates/template-groups.pug
+  include templates/template-skills.pug
+
   div.grid-layer-main.containerV
     h1 Members
     sib-display#profiles-list(
       data-src=`${sdn}/members/`,
-      counter-template='${counter} members',
-      data-fields='header, infos',
-      paginate-by='3',
-
-      set-header='user.account.picture, user.first_name, user.last_name, pseudonym, bio, send',
-      widget-user.account.picture='sib-display-img',
-      set-pseudonym='before-pseudo,user.username',
-      value-before-pseudo='@',
-      value-send='SEND A MESSAGE',
-      template-send='chat-link',
-      
-      set-infos='city, user.groups, user.email, phone, user.skills',
-      widget-user.groups='sib-display-lookuplist',
-      widget-user.skills='sib-display-lookuplist',
-
       search-range-groups=`${sdn}/groups/`,
       search-range-skills=`${sdn}/skills/`,
+      
       search-fields='name, groups, skills',
-      
       set-name='pseudo, user.first_name, user.last_name',
-      
-      search-label-groups='Filter by role',
       search-label-name='Search by lastname, firstname...',
+      search-label-groups='Filter by role',
       search-label-skills='Search by skills',
-      
-      search-widget-groups='sib-form-placeholder-dropdown',
       search-widget-name='sib-form-placeholder-text',
-      search-widget-skills='sib-form-placeholder-dropdown',
+      search-widget-groups='sib-form-placeholder-dropdown',
+      search-widget-skills='sib-form-placeholder-text',
+      
+      counter-template='<span>${counter} members</span>',
+      
+      data-fields='header, infos',
+      set-header='user.account.picture, user.name, pseudonym, bio, send',
+      set-infos='city, user.groups, user.email, phone, user.skills',
+      set-pseudonym='before-pseudo,user.username',
+      value-before-pseudo='@',
+      label-send='SEND A MESSAGE',
+      action-send='member-chat',
+      widget-user.account.picture='sib-display-img',
+      widget-user.groups='groups-name',
+      widget-user.skills='skills-name',
+      multiple-user.groups,
+      multiple-user.skills,
+
+      paginate-by='3',
+
+      next='member'
+    )
 
-      next='member')
   div.grid-layer-links.containerV
     div.containerH.containerCenter.how-link
       div.containerV.fix.icon-idea
@@ -44,3 +48,4 @@ div.grid-layer
       div.containerV.fix.icon-idea
       div.containerV.grow
         sib-trigger() How to complete my profile ?
+

src/page-project-create.pug

@@ -8,7 +8,7 @@
       range-members=`${sdn}/members/`,
       range-team=`${sdn}/users/`,
 
-      data-fields=`customer.name, name, description, customer.logo, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`,
+      data-fields=`customer.name, name, customer.logo, description, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`,
       set-block-team=`team, members`,
       set-block-fee=`businessProvider, businessProviderFee`,
       
@@ -32,5 +32,7 @@
       widget-jabberRoom='sib-form-checkbox',
       widget-description='sib-form-textarea',
       widget-team='sib-form-multiple-dropdown',
-      widget-members='sib-form-multiple-dropdown'
+      widget-members='sib-form-multiple-dropdown',
+      bind-resources
     )
+    

src/page-project-edit.pug

@@ -4,33 +4,6 @@
   .form-view
     sib-form.block(
       range-team=`${sdn}/users/`,
-      range-members=`${sdn}/project-members/`,
-
-      data-fields=`customer.name, name, description, customer.logo, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`,
-      set-block-team=`team, members`,
-      set-block-fee=`businessProvider, businessProviderFee`,
-
-      label-customer.name='Business name',
-      label-name='Project name',
-      label-description='Project description',
-      label-customer.logo='Customer logo',
-      label-customer.companyRegister='Company register',
-      label-customer.address='Customer address',
-      label-customer.firstName='Contact firstname',
-      label-customer.lastName='Contact lastname',
-      label-customer.role='Contact role',
-      label-customer.email='Contact email',
-      label-customer.phone='Contact phone',
-      label-businessProvider='Business provider',
-      label-businessProviderFee='Fee (%)',
-      label-foaf:jabberID='Chatroom id',
-      label-team='Teammates',
-      label-members='Member role'
-
-      widget-jabberRoom='sib-form-checkbox',
-      widget-description='sib-form-textarea',
-      widget-team='sib-form-multiple-dropdown',
-      widget-members='sib-form-multiple-dropdown',
 
       bind-resources
     )

src/page-project-profile.pug

@@ -1,30 +1,16 @@
 .frame
-  template#customer-template
-    div#clientBox
-      div
-        h5 Client:
-        ul
-          li #[span Business name:]${value.name}
-          li #[span Company register:]${value.companyRegister}
-          li
-            span Address:
-            br
-            p ${value.address}
-      div
-        h5 Contact:
-        ul
-          li(name='name') #[span ${value.firstName} ${value.lastName}], ${value.role}
-          li(name='email')
-            a(href='mailto:${value.email}') ${value.email}
-          li(name='phone') ${value.phone}
+
+  include templates/template-customer.pug
+  include templates/template-team.pug
 
   sib-display(
-    data-fields='block-title, infos, block-lead, block-fee, block-customer',
+    data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team',
+    extra-context='{"project-profile":"${sdn}/projects/"}'
     
     set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
-    value-const-title1="N°",
-    value-const-title2="-",
-    value-entitled="Creation date:"
+    value-const-title1='N°',
+    value-const-title2='-',
+    value-entitled='Creation date:'
 
     set-infos='block-description, block-logo',
     set-block-description='label-description, description',
@@ -33,31 +19,23 @@
     widget-customer.logo='sib-display-img',
 
     set-block-fee='label-fee, details-cell, details-business',
-    value-label-fee='FEE:',
     set-details-cell='cell-name, cell-fee, percentage',
+    set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
+    value-label-fee='FEE:',
     value-cell-name='Happy Dev Paris:',
     value-cell-fee='5',
     value-percentage='%',
-    set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
-    value-business-contribution='Business contribution:',
     value-comma=', ',
 
     set-block-customer='label-customer, customer',
     value-label-customer='CUSTOMER INFORMATIONS:'
-    template-customer='customer-template',
-    bind-resources,
+    widget-customer='customer-template',
+    
+    set-block-team='label-team, members',
+    value-label-team='TEAM:'
+    widget-members='team-template',
+    multiple-members,
+    
+    bind-resources
   )
 
-  div(name='block-team')
-    h2(name='label-team') Team:
-    sib-display(
-      id-suffix='members',
-      data-fields='teammate-img, teammate-profile, teammate-job',
-      set-teammate-img='user.account.picture',
-      set-teammate-profile='user.first_name, user.last_name, user.groups',
-      set-teammate-job='name',
-      widget-user.account.picture='sib-display-img',
-      widget-user.groups='sib-display-lookuplist',
-      next='profile',
-      bind-resources,
-    )

src/page-project-profile.pug.orig

@@ -0,0 +1,58 @@
+.frame
+
+  include templates/template-customer.pug
+  include templates/template-team.pug
+
+  sib-display(
+    data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team',
+    extra-context='{"project-profile":"${sdn}/projects/"}'
+    
+    set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
+    value-const-title1='N°',
+    value-const-title2='-',
+    value-entitled='Creation date:'
+
+    set-infos='block-description, block-logo',
+    set-block-description='label-description, description',
+    set-block-logo='customer.logo',
+    value-label-description='DESCRIPTION:',
+    widget-customer.logo='sib-display-img',
+
+    set-block-fee='label-fee, details-cell, details-business',
+    set-details-cell='cell-name, cell-fee, percentage',
+    set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
+    value-label-fee='FEE:',
+    value-cell-name='Happy Dev Paris:',
+    value-cell-fee='5',
+    value-percentage='%',
+    value-business-contribution='Business contribution:',
+    value-comma=', ',
+
+    set-block-customer='label-customer, customer',
+    value-label-customer='CUSTOMER INFORMATIONS:'
+    widget-customer='customer-template',
+    
+    set-block-team='label-team, members',
+    value-label-team='TEAM:'
+    widget-members='team-template',
+    multiple-members,
+    
+    bind-resources
+  )
+<<<<<<< HEAD
+
+  div(name='block-team')
+    h2(name='label-team') Team:
+    sib-display(
+      id-suffix='members',
+      data-fields='teammate-img, teammate-profile, teammate-job',
+      set-teammate-img='user.account.picture',
+      set-teammate-profile='user.first_name, user.last_name, user.groups',
+      set-teammate-job='name',
+      widget-user.account.picture='sib-display-img',
+      widget-user.groups='sib-display-lookuplist',
+      next='profile',
+      bind-resources,
+    )
+=======
+>>>>>>> b8190bc... ui(all pages): MR!13 - upgrade to sib-core v0.6

src/scripts/hd-widgets.js

@@ -1,93 +0,0 @@
-import {Helpers, SIBWidget, store} from 'https://unpkg.com/@startinblox/core@0.6';
-
-class HDAppMail extends SIBWidget {
-  get template() {
-    return `<a href="mailto:${this.value}"><div class="icon-envelope"></div><div>SEND A MESSAGE</div></a>`;
-  }
-}
-
-class HDAppMember extends SIBWidget {
-  get template() {
-    return `
-        <div name="${this.name}">
-          <img src="${this.value.avatar}"/>
-        </div>
-      `;
-  }
-
-  render() {
-    store.get(this.value).then(value => {
-      this._value = value;
-      this.innerHTML = this.template;
-    });
-  }
-}
-
-class HDAppClosingDate extends SIBWidget {
-  get template() {
-    return this.value
-      ? `<strong>closed</strong> (${this.value})`
-      : '<strong>open</strong>';
-  }
-
-  render() {
-    this.innerHTML = this.template;
-  }
-}
-
-class HDAppAvailable extends SIBWidget {
-  get template() {
-    return this.value
-      ? '<strong>Available</strong>'
-      : '<strong>Not available</strong>';
-  }
-
-  render() {
-    this.innerHTML = this.template;
-  }
-}
-
-class HDAppHyperlink extends SIBWidget {
-  get template() {
-    const escaped = this.value
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#039;');
-    return `<a href="${escaped}">${escaped}</a>`;
-  }
-
-  render() {
-    this.innerHTML = this.template;
-  }
-}
-
-class HDAppLinkMore extends SIBWidget {
-  get template() {
-    const id = Helpers.uniqID();
-    return `
-      ${this.label}
-      ${this.name}
-      ${this.escapedValue}
-      `;
-  }
-}
-
-class HDAppFormText extends SIBWidget {
-  get template() {
-    return `<p name="${this.name}">${this.value}</p>`;
-  }
-
-  render() {
-    this.innerHTML = this.template;
-  }
-}
-
-customElements.define('hdapp-mail', HDAppMail);
-customElements.define('hdapp-member', HDAppMember);
-customElements.define('hdapp-closing-date', HDAppClosingDate);
-customElements.define('hdapp-available', HDAppAvailable);
-customElements.define('hdapp-hyperlink', HDAppHyperlink);
-customElements.define('hdapp-link-more', HDAppLinkMore);
-customElements.define('hdapp-form-text', HDAppFormText);

src/styles/content.scss

@@ -7,23 +7,6 @@
 //   //float: right;
 // }
 
-[name='user-thumb'] {
-  display: flex;
-  align-items: center;
-  margin: -0.25em;
-
-  > * {
-    margin: 0.25em;
-  }
-
-  sib-display-img {
-    width: 4.25rem;
-    height: 4.25rem;
-    overflow: hidden;
-    border-radius: 100%;
-  }
-}
-
 // skills
 
 /*#member-profile sib-display-lookuplist {

src/styles/filters.scss

@@ -4,7 +4,6 @@
   grid-gap: 0px 15px;
   grid-template-columns: 50% 50%;
   grid-template-rows: 3.5em 3.5em;
-  padding-bottom: 4.8rem;
 
   label {
     display: block;
@@ -51,7 +50,7 @@
 }
 
 #offers-list, #profiles-list {
-  & > sib-form > form {
+  & > sib-form {
     @extend %filters;
   }
 }

src/styles/form.scss

@@ -17,6 +17,7 @@
 #job-offer-create,
 #project-create,
 #project-edit {
+  flex: 1;
   font-size: 1.7rem;
 
   h1 {
@@ -31,7 +32,7 @@
     text-align: center;
   }
 
-  p[name$='-text'] {
+  [name$='-text'] {
     font-size: 1.5rem;
     margin-bottom: 2em;
   }
@@ -63,6 +64,7 @@
       border: none;
       color: $color-purple-dark;
       line-height: 1.5;
+      width: 95%;
     }
 
     input,
@@ -100,7 +102,7 @@
         margin-top: 1.7rem;
 
         div.choices__item {
-          @extend %skill;
+          /*@extend %skill;*/
 
           button.choices__button {
             border-left: 1px solid $color-selective-yellow;

src/styles/job-offers.scss

@@ -21,36 +21,75 @@
     > sib-display {
       @extend %frame;
       display: block;
+      font-size: 1.5rem;
       margin: 1.7rem 0;
       padding: 3.4rem;
       /*&:nth-child(odd) {
         background-color: $color-anti-flash-white;
       }*/
+      
+      [name='user-thumb'] {
+        align-items: center;
+        display: flex;
+        margin: -0.25em;
+      
+        > * {
+          margin: 0.25em;
+        }
+  
+        [name='author.first_name'] {
+          color: $color-quartz;
+          font-weight: 600;
+        }
+
+        sib-multiple[name$='groups'] {
+          display: flex;
+
+          li {
+            @extend %group;
+          }
+        }
+      
+        sib-display-img {
+          background-color: $color-white;
+          border-radius: 50%;
+          height: 4.25rem;
+          overflow: hidden;
+          position: relative;
+          width: 4.25rem;
+
+          img {
+            height: 100%;
+            left: 0;
+            object-fit: cover;
+            position: absolute;
+            top: 0;
+            width: 100%;
+          }
+        }
+      }
+      
+      [name='creationDate'] {
+        margin-bottom: 0.7rem;
+        margin-top: 2rem;
+      }
+
       sib-display-div[name='title'] {
         @extend h3;
         display: block;
         font-weight: bold;
+        line-height: 19px;
       }
       
-      label {
-        display: none;
-      }
-    }
-  }
-}
-
-[name='creation'] {
-  margin-top: 2rem;
-}
-
-[name='description'] {
+      [name='description'] {
         line-height: 1.6;
-}
+        margin-bottom: 1.6rem;
+      }
       
-[name='send'] {
+      [name='send'] {
         color: $color-majorelle-blue;
         font-size: 1.3rem;
-  text-align: right;
+        float: right;
       
         > sib-link {
           cursor: pointer;
@@ -61,9 +100,9 @@
             margin-right: 1.2rem;
           }
         }
-}
+      }
       
-[name='status'] {
+      [name='status'] {
         float: right;
         display: flex;
         align-items: center;
@@ -76,33 +115,8 @@
         strong {
           @extend %status-open;
         }
-}
-
-[name='user-thumb'] {
-  align-items: center;
-  color: $color-quartz;
-  display: flex;
-  font-weight: 600;
-  margin: -0.25em;
-
-  > * {
-    margin: 0.25em;
       } 
-
-  sib-display-img {
-    border-radius: 100%;
-    height: 2.5em;
-    overflow: hidden;
-    width: 2.5em;
     }
-
-  div[name*='roles'] {
-    border: 1px solid yellow;
-    border-radius: 3px;
-    color: $color-rolling-stone;
-    font-size: 1.5rem;
-    font-weight: 400;
-    margin-left: 1.7rem;
-    padding: calc(16px - 0.8em) 0.7em;
   }
 }
+

src/styles/main.scss

@@ -78,6 +78,12 @@ button {
   -webkit-appearance: none;
 }
 
+li {
+  list-style: none;
+  margin-right: 0.4rem;
+  padding-left: 0;
+}
+
 #job-offers,
 #members {
   @extend %content-padding;
@@ -205,65 +211,21 @@ sib-link.back {
 }
 
 
-/*sib-display-lookuplist[name$="skills"] {
-    display: flex;
-}*/
+/* TEMPLATE SKILLS*/
 
-sib-display-lookuplist {
-  display: flex;
-
-  ul {
+sib-multiple[name*='skills'] {
   display: flex;
   flex-wrap: wrap;
-    list-style: none;
-    padding: 0;
-  }
-
-  li[name*='skills'] {
-    @extend %skill;
-  }
 }
 
-div[name*='groups'],
-li[name*='groups'] {
-  border: 1px solid $color-mikado-yellow;
-  border-radius: 3px;
-  color: $color-rolling-stone;
-  font-size: 1.3rem;
-  font-weight: 400;
-  margin-left: 1.7rem;
-  padding: calc(16px - 1em) 0.7em;
-  
-  &:first-of-type {
-    margin-left: 0;
-  }
+.skill {
+  background-color: $color-selective-yellow;
+  border: 1px solid $color-selective-yellow;
+  border-radius: 2em;
+  color: $color-white;
+  font-size: 1.4rem;
+  font-weight: bold;
+  margin: 0.4rem 0.4rem 0.4rem 0;
+  padding: 0.5rem 2rem;
 }
 
-[name='user-thumb'] {
-  align-items: center;
-  color: $color-quartz;
-  display: flex;
-  font-weight: 600;
-  margin: -0.25em;
-
-  > * {
-    margin: 0.25em;
-  }
-
-  sib-display-img {
-    border-radius: 100%;
-    height: 2.5em;
-    overflow: hidden;
-    width: 2.5em;
-  }
-
-  div[name*='roles'] {
-    border: 1px solid yellow;
-    border-radius: 3px;
-    color: $color-rolling-stone;
-    font-size: 15px;
-    font-weight: 400;
-    margin-left: 1em;
-    padding: calc(16px - 0.8em) 0.7em;
-  }
-}

src/styles/member-profile.scss

@@ -61,15 +61,12 @@
           @extend h1;
         }
 
-        sib-display-lookuplist[name='user.groups'] {
+        > sib-multiple[name$='groups'] {
+          display: flex;
+          padding-left: 1.4rem;
 
-          label {
-            display: none;
-          }
-  
-          > ul {
-            margin-block-end: 0;
-            margin-block-start: 0;
+          li {
+            @extend %group;
           }
         }
       }
@@ -92,13 +89,13 @@
         @extend %member-info;
       }
 
-      #member-status {
+      status-template[name$='available']{
         align-self: flex-end;
         color: $color-majorelle-blue;
         grid-area: status;
         justify-self: flex-end;
 
-        > span {
+        span {
           align-items: center;
           align-self: center;
           display: flex;
@@ -107,7 +104,7 @@
           line-height: 2;
         }
 
-        > span.status-one {
+        span.status-one {
           @include ci('awareness');
 
           &::before {
@@ -117,7 +114,7 @@
           }
         }
 
-        > span.status-two {
+        span.status-two {
           @include ci('armor');
 
           &::before {
@@ -128,17 +125,21 @@
         }
       }
 
-      [next=member-chat] {
+      sib-action[name='send'] {
         align-self: flex-end;
+        grid-area: button;
+        justify-self: flex-end;
+      }
+      
+      [next=member-chat] {
+        @include icon('speech');
         border: 1px solid $color-majorelle-blue;
         border-radius: 2em;
         color: $color-majorelle-blue;
         font-size: 18px;
         font-weight: bold;
-        grid-area: button;
         justify-self: end;
         padding: 0.6em 1.5em 0.4em;
-        @include icon('speech');
   
         &::before {
           font-size: 25px;

src/styles/members.scss

@@ -55,23 +55,26 @@
         color: $color-quartz;
         font-weight: bold;
         justify-content: center;
-        margin-bottom: 3.75rem;
-        white-space: nowrap;
-        
-        &::before, &::after {
-          border-top: 1px solid $color-timberwolf;
-          content: '';
+        margin: 3.75rem 0;
         position: relative;
-          top: 0.85rem;
-          width: 35.2vw;
-        }
+        z-index: 1;
 
         &::before {
-          right: 5.1rem;
+          border-top: 1px solid $color-timberwolf;
+          bottom: 0;
+          content: '';
+          left: 0;
+          margin: 0 auto;
+          position: absolute;
+          right: 0;
+          top: 50%;
+          width: 100%;
+          z-index: -1;
         }
 
-        &::after {
-          left: 5.1rem;
+        span {
+          background-color: $color-anti-flash-white;
+          padding: 0 60px;
         }
       }
 
@@ -106,7 +109,7 @@
           }
 
           sib-display-img {
-            background-color: white;
+            background-color: $color-white;
             border-radius: 50%;
             height: 28vh;
             margin: 1.7rem auto;
@@ -114,7 +117,6 @@
             position: relative;
             width: 28vh;
 
-
             img {
               height: 100%;
               left: 0;
@@ -125,7 +127,7 @@
             }
           }
 
-          ul[name='user'] {
+          [name='user.name'] {
             font-weight: bold;
             margin: 0;
             @extend h1;
@@ -161,6 +163,10 @@
           padding: 0 1.7rem;
 
           @extend %member-info;
+
+          sib-multiple[name$='groups'] {
+            display: flex;
+          }
         }
       }
     }

src/styles/menu-right.scss

@@ -5,7 +5,7 @@
     nav {
 
       > sib-router {
-        background-color: $color-link-water;
+        background-color: $color-222-52-90;
         color: $color-purple-dark;
         flex: 0 0 auto;
         font-weight: 600;
@@ -20,9 +20,7 @@
             align-items: center;
             border-bottom: 1px solid $color-lavender-gray;
             display: flex;
-            margin-bottom: 0;
-            margin-left: 0;
-            margin-top: 0;
+            margin: 0;
             padding: 2.55rem 2.55rem;
             position: relative;
             width: 12em;
@@ -31,7 +29,7 @@
               float: left;
               font-size: 4rem;
               margin-left: 0;
-              margin-right: 1.5rem;
+              margin-right: 2.55rem;
             }
           }
 
@@ -75,7 +73,7 @@
       }
       
       &.offsite-is-closed {
-        transform: translate(12rem);
+        transform: translate(15.5rem);
         
         & .jsOffsiteToggle::before {
           transform: rotate(180deg);
@@ -83,7 +81,7 @@
 
         & ~ #views-container {
           flex-basis: 95%;
-          transform: translate(12rem);
+          transform: translate(15.5rem);
         }
       }
     }

src/styles/project-profile.scss

@@ -38,7 +38,7 @@
       padding-left: 0.85rem;
     }
     
-    > :not(:nth-last-child(n+4)) {
+    > :nth-child(5) {
       color: $color-purple-dark;
       font-weight: normal;
       text-transform: none;
@@ -47,6 +47,13 @@
     [name='entitled'] {
       margin-left: auto;
     }
+
+    > :nth-last-child(-n+2) {
+      color: $color-text-base;
+      font-size: 1.6rem;
+      font-weight: normal;
+      text-transform: none;
+    }
   }
 
   [name='infos'] {
@@ -176,62 +183,67 @@
 
 [name='block-team'] {
   
-  > sib-display > div > sib-display > div {
-    align-items: center;
+  > sib-multiple {
+
+    > team-template[name='members'] {
       display: grid;
-	  grid-template-columns: 5vw 2fr;
+      grid-column-gap: 1.6rem;
+      grid-template-columns: 7vh auto;
       grid-template-rows: repeat(2, 5.2vh);
 
-    label {
-      display: none;
-    }
+      > sib-display:first-child {
+        align-self: center; 
+        grid-column: 1 / span 1;
+        grid-row: 1 / span 2;
 
-    [name='teammate-profile'],
-    [name='teammate-img'],
-    [name='teammate-job'] {
-      margin: 0;
-      width: auto;
-    }
-
-    [name='teammate-img'] {
-      grid-row: 1 / -1;
+        div {
+          background-color: $color-white;
+          border-radius: 50%;
+          height: 7vh;
+          overflow: hidden;
+          position: relative;
+          width: 7vh;
 
           img {
-        border: 0;
-        border-radius: 100%;
-        display: block;
-        font-size: 100%;
-        margin: 0;
-        padding: 0;
-        width: 75%;
+            height: 100%;
+            left: 0;
+            object-fit: cover;
+            position: absolute;
+            top: 0;
+            width: 100%;
+          }
         }
       }
 
-    [name='teammate-profile'] {
+      > div:nth-child(2) {
         align-self: end;
+        display: flex;
+        grid-column: 2 / span 1;
+        grid-row: 1 / span 1;
 
-      hdapp-userinfo {
-        display: inline-block;
-        height: 0;
-
-        > ul {
+        span {
+          align-self: center;
           font-weight: 600;
-          padding-inline-start: 0;
-        }
         }
 
-      sib-display-lookuplist {
-        display: inline-block;
+        span ~ sib-display {
 
-        > ul {
-          margin-block-end: 0;
-          margin-block-start: 0;
+          div {
+            display: flex;
+            
+            div[name='name'] {
+              @extend %group;
+              margin-left: 1rem;
+            }
           }
         }
       }
 
-    [name='teammate-job'] {
+      > span:nth-child(3) {
         align-self: start;
+        grid-column: 2 / span 1;
+        grid-row: 2 / span 1;
+      }
     }
   }
 }

src/styles/variables.scss

@@ -18,6 +18,7 @@ $color-bombay:           hsl(215, 9%, 73%);
 $color-manatee:          hsl(215, 6%, 63%);
 $color-dark-lava:        hsl(216, 4%, 22%);
 $color-link-water:       hsl(221, 51%, 90%);
+$color-222-52-90:        hsl(222, 52%, 90%);
 $color-glitter:          hsl(222, 57%, 95%);
 $color-lavender-gray:    hsl(229, 25%, 79%);
 $color-purple-dark:      hsl(233, 18%, 29%);
@@ -38,6 +39,7 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
 }  
 
 %content-padding {
+  flex: 1;
   padding: 4.4rem;
 }
 
@@ -46,14 +48,21 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   background-color: $color-white;
 }
 
+%group {
+  border: 1px solid $color-mikado-yellow;
+  border-radius: 3px;
+  color: $color-rolling-stone;
+  font-size: 1.4rem;
+  font-weight: 400;
+  padding: calc(1.6rem - 0.8em) 0.7em;
+}
+
 %member-info {
 
-  label {
-    display: none;
-  }
-
-  > sib-display-div > div,
-  > sib-display-lookuplist > ul {
+  sib-multiple[name^='user.'],
+  > sib-display-div > div {
+    display: flex;
+    flex-wrap: wrap;
     margin-bottom: 0;
     margin-top: 1.7rem;
 
@@ -63,18 +72,11 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
     }
   }
   
-  > sib-display-lookuplist[name$='groups'] > ul > li {
-    border: none;
-    font-size: inherit;
-    margin-left: 0;
-    padding: 0;
-  }
-  
   [name$='city'] * {
     @include mdi('atom');
   }
 
-  ul[name*='groups'] {
+  sib-multiple[name='user.groups'] {
     @include mdi('account-outline');
   }
 
@@ -116,16 +118,6 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
 }
 
-%skill {
-  background-color: $color-selective-yellow;
-  border: 1px solid $color-selective-yellow;
-  border-radius: 2em;
-  color: $color-white;
-  font-weight: bold;
-  margin: 0.4rem;
-  padding: 0.5rem 2rem;
-}
-
 %status-open {
   background-color: $color-majorelle-blue;
   border: none;

src/templates/template-customer.pug

@@ -0,0 +1,19 @@
+sib-widget(name='customer-template')
+  template
+    div#clientBox
+      div
+        h5 Client:
+        ul
+          li #[span Business name:]${value.name}
+          li #[span Company register:]${value.companyRegister}
+          li
+            span Address:
+            br
+            p ${value.address}
+      div
+        h5 Contact:
+        ul
+          li(name='name') #[span ${value.firstName} ${value.lastName}], ${value.role}
+          li(name='email')
+            a(href='mailto:${value.email}') ${value.email}
+          li(name='phone') ${value.phone}

src/templates/template-groups.pug

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

src/templates/template-skills.pug

@@ -0,0 +1,4 @@
+sib-widget(name='skills-name')
+  template
+    li(class='skill') ${value.name}
+

src/templates/template-status.pug

@@ -0,0 +1,3 @@
+sib-widget(name='status-template')
+  template
+    div#member-status ${value == true ? '<span class="status-one">Available</span>' : '<span class="status-two">Busy</span>'}

src/templates/template-team.pug

@@ -0,0 +1,16 @@
+sib-widget(name='team-template')
+  template
+    sib-display(
+      data-src="${value.user.account['@id']}",
+      data-fields='picture',
+      widget-picture='sib-display-img'
+    )
+    div
+      span ${value.user.name}
+      sib-display(
+        data-src="${value.user.groups['@id']}",
+        data-fields='name',
+        multiple-name
+      )
+    span ${value.name}
+