Merge branch 'staging' into feat/manager_deploy

src/context.jsonld

@@ -0,0 +1,8 @@
+
+    {
+        "inbox": "http://happy-dev.fr/owl/#inbox",
+        "object": "http://happy-dev.fr/owl/#object",
+        "author": "http://happy-dev.fr/owl/#author",
+        "account": "http://happy-dev.fr/owl/#account",
+        "jabberID": "foaf:jabberID"
+    }

src/dependencies.pug

@@ -1,4 +1,4 @@
-script(type="module" src="https://unpkg.com/@startinblox/oidc@0.7")
+script(type="module" src="https://unpkg.com/@startinblox/oidc@0.8")
 script(src="/scripts/index.js")
 
 //- Stylesheets
@@ -15,10 +15,14 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 //- script(type="module" src="/lib/sib-job-board/sib-job-board.js")
 
 //- CDN
-script(type="module" src="https://unpkg.com/@startinblox/core@0.8")
+script(type="module" src="https://unpkg.com/@startinblox/core@0.9")
 script(type="module" src="https://unpkg.com/@startinblox/router@0.7")
-script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.3")
+script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.4")
-script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.2")
+script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.3")
 //- script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3")
 //- script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3")
 //- script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3")
+
+//- Context - Fix for LDFlex
+script(data-default-context, type="application/ld+json")
+    include context.jsonld

src/header.pug

@@ -17,7 +17,8 @@ include templates/hd-user-avatar.pug
 details#user-controls
   summary(tabindex='0' role='button')
     sib-display#user-controls__profile(
-      fields='first_name, account.picture'
+      fields='firstName, account.picture'
+      extra-context='{firstName:"first_name"}'
       widget-account.picture='hd-user-avatar'
       bind-user
     )

src/index.pug

@@ -38,5 +38,8 @@ html(lang="en")
         #messages(hidden).with-sidebar
           include page-messages.pug
 
+        #admin(hidden).with-sidebar
+          include page-admin.pug
+        
         //- #my-profile(hidden).no-sidebar
         //-   include page-user-profile.pug

src/menu-left.pug

@@ -4,7 +4,8 @@ sib-widget(name='hd-counter')
 
 sib-widget(name='hd-create')
   template
-    p.create You are not part of any ${value} yet. To create a new one, you can go to the administration panel (coming soon).
+    p.create You are not part of any ${value} yet. To create a new one, you can go to the 
+      sib-link(next='admin') administration panel
 
 nav#main__menu
   sib-router#navbar-router(default-route='members')
@@ -15,8 +16,8 @@ nav#main__menu
     //- sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
     //-   div.menu-label Job offers
     //-   div.menu-icon.icon-briefcase
-    //- sib-route(hidden, name='job-offer-create')
+    //- sib-route(name='job-offer-create', hidden)
-    //- sib-route(hidden, name='job-offer-edit', use-id)
+    //- sib-route(name='job-offer-edit', use-id, hidden)
     //- div.divider
     //- div.menu-wrapper
     //-   div.menu
@@ -24,7 +25,7 @@ nav#main__menu
     //-       div.menu-icon.icon-arrow-up
     //-     div.menu-label Projects
     //-     div.menu-icon.icon-folder-alt
-    //-   sib-route(hidden,name='project', id-prefix=`${endpoints.projects}`, rdf-type='hd:project', use-id='')
+    //-   sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
     //-   div.sub-menu.menu-notification
     //-     sib-display(
     //-       data-src=`${endpoints.projects}`
@@ -32,6 +33,11 @@ nav#main__menu
     //-       empty-widget='hd-create'
     //-       empty-value='project'
     //-       value-dash=' - '
+    //-       search-fields='team'
+    //-       search-widget-team='sib-form-hidden'
+    //-       search-value-team='-'
+    //-       hd-inherit-user-id='search-value-team'
+    //-       hd-inherit-widgets
     //-       widget-badge='hd-counter'
     //-       action-badge='badge'
     //-     )
@@ -39,10 +45,11 @@ nav#main__menu
     div.menu-wrapper
       div.menu
         div.menu-chevron
-          div.menu-icon.icon-arrow-up
+          sib-link(next='admin-circle-list')
+            div.menu-icon.icon-arrow-right
         div.menu-label Circles
         div.menu-icon.icon-folder-alt
-      sib-route(hidden,name='circle', id-prefix=`${endpoints.circles}`, rdf-type='hd:circle', use-id='')
+      sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
       div.sub-menu.menu-notification
         sib-display(
           data-src=`${endpoints.circles}`
@@ -54,8 +61,9 @@ nav#main__menu
           action-badge='badge'
           search-fields='team'
           search-widget-team='sib-form-hidden'
-          search-value-team=''
+          search-value-team='-'
-          set-user-id='search-value-team'
+          hd-inherit-user-id='search-value-team'
+          hd-inherit-widgets
           order-by='name'
           next='circle'
         )
@@ -66,7 +74,7 @@ nav#main__menu
           div.menu-icon.icon-arrow-up
         div.menu-label Chat
         div.menu-icon.icon-envelope-letter
-      sib-route(hidden, name='messages', id-prefix=`${endpoints.users}`, rdf-type='foaf:user', use-id='')
+      sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
       div.sub-menu.menu-notification
         sib-display(
           data-src=`${endpoints.users}`
@@ -78,6 +86,7 @@ nav#main__menu
           next='messages'
         )
 
+    sib-route(name='admin', hidden)
     //- div.divider
     //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')
 

src/page-admin-circles-create.pug

@@ -0,0 +1,19 @@
+div.content-box__info
+  sib-link(class="backlink", next='admin-circle-list') Back
+
+  h1 New circle
+
+  p.center Here you can create a new circle according to your interests, what you want to share, etc.
+
+  sib-form.block(
+    data-src=`${endpoints.circles}`
+
+    fields='name, description'
+
+    class-name='form-label is-light is-full-width'
+    class-description='form-label is-light is-full-width'
+
+    next='admin-circle-list'
+
+    submit-button='Save'
+  )

src/page-admin-circles.pug

@@ -0,0 +1,105 @@
+.content-box.full-width.with-form
+  sib-router(default-route='admin-circle-list', hidden)
+    sib-route(name='admin-circle-list')
+    sib-route(name='admin-circle-create')
+
+  div.content-box__header.with-description
+    div
+      p.name Administration
+
+
+  #admin-circle-list(hidden)
+
+    include templates/hd-user-avatar.pug
+
+    sib-widget(name='circle-owner')
+      template
+        sib-display(
+          data-src='${await value}'
+          fields='account.picture, sup(name), sub(username)'
+
+          widget-account.picture='hd-user-avatar'
+        )
+
+
+    div.content-box__info
+
+      div.admin-header
+
+        div.admin-header__title Circles
+
+        sib-link(
+          class='button text-bold text-uppercase reversed button-yellow bordered with-icon icon-plus'
+          next='admin-circle-create'
+        ) Create a new circle
+
+      .table
+
+        div.table-header.grey-color
+          div Name
+          div Admins
+          div Join
+
+        sib-widget(name='admin-circle-leave-button')
+          template
+            sib-delete(
+              class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
+              data-src="${src}"
+              data-label='Leave circle'
+            )
+
+        sib-widget(name='admin-circle-join-button')
+          template
+            button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test
+              sib-form(
+                data-src=''
+                nested-field='members'
+
+                fields='user.@id'
+                label-user.@id=''
+                value-user.@id=''
+                widget-user.@id='sib-form-hidden'
+
+                hd-inherit-bind-user2input="input[name='user.@id']"
+                hd-inherit-widgets
+
+                submit-button='Join Circle'
+              )
+
+        sib-widget(name="admin-circle-buttons")
+          template
+            sib-display(
+              data-src='${src}'
+              nested-field='members'
+              fields='relation'
+              action-relation='relation'
+              widget-relation='admin-circle-leave-button'
+              search-fields='user'
+              search-widget-user='sib-form-hidden'
+              search-value-user="-"
+              empty-widget='admin-circle-join-button'
+              hd-inherit-bind-resources='admin-circle-join-button'
+              hd-inherit-user-id="search-value-user"
+              hd-inherit-widgets
+            )
+
+        sib-display(
+          class='table-body'
+
+          data-src=`${endpoints.circles}`
+          fields='name, owner, buttons'
+
+          class-name='w33 cell border'
+          class-owner='w33 cell border'
+
+          widget-buttons="admin-circle-buttons"
+          action-buttons="buttons"
+          hd-inherit-widgets
+          hd-inherit-widgets-multiple
+
+          widget-owner='circle-owner'
+        )
+
+
+  #admin-circle-create(hidden)
+    include page-admin-circles-create.pug

src/page-admin-projects.pug

@@ -0,0 +1,10 @@
+.content-box.full-width.with-form
+  sib-router(default-route='admin-project-list', hidden)
+    sib-route(name='admin-project-list')
+    sib-route(name='admin-project-create')
+
+
+  #admin-project-list(hidden)
+
+
+  #admin-project-create(hidden)

src/page-admin-users.pug

@@ -0,0 +1,18 @@
+.content-box.full-width.with-form
+  sib-router(default-route='admin-users-list', hidden)
+    sib-route(name='admin-users-list')
+    sib-route(name='admin-users-create')
+
+  div.content-box__header
+    h2 Administration
+
+  #admin-users-list(hidden)
+    div.content-box__info
+      sib-display.block(
+        data-src=`${endpoints.users}`
+        fields="account.picture, name, username, email, groups"
+        multiple-groups=""
+      )
+
+
+  #admin-users-create(hidden)

src/page-admin.pug

@@ -0,0 +1,21 @@
+.views-container
+  #admin-circles(hidden)
+    include page-admin-circles.pug
+//-   #admin-users(hidden)
+//-     include page-admin-users.pug
+//-   #admin-projects(hidden)
+//-     include page-admin-projects.pug
+nav.jsRightMenu(role='navigation')
+  sib-router(default-route='admin-circles')
+    ul
+      li.jsOffsiteToggle
+        a Fold menu
+      //- sib-route(name='admin-users')
+        li
+          a Users
+      sib-route(name='admin-circles')
+        li
+          a Circles
+      //- sib-route(name='admin-projects')
+        li
+          a Projects

src/page-circle-chat.pug

@@ -1,8 +1,3 @@
-.content-box.full-width
-  sib-display.chat-header(
-    bind-resources
-    fields='name'
-  )
 .chat-view
   sib-chat(
     data-authentication='login',

src/page-circle-create.pug

@@ -1,26 +0,0 @@
-.content-box.with-padding.with-form.full-width
-  h1 New group
-  p Here you can create a new group according to your interests, what you want to share, etc.
-
-  sib-form(
-    data-src=`${endpoints.circles}`,
-    range-owner=`${endpoints.users}`, 
-    range-team=`${endpoints.users}`
-    
-    fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
-
-    label-name="Channel's name",
-    label-description='Description',
-    label-owner='Owner of this channel',
-    label-foaf:jabberID='Chatroom id',
-    label-team='Member(s) of this channel',
-
-    value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".',
-    value-owner-text='The one who will admin this channel',
-    value-team-text='Add any members as you want.',
-
-
-    widget-description='sib-form-textarea',
-    widget-jabberRoom='sib-form-checkbox',
-  )
-    //- widget-team='sib-form-multiple-dropdown'

src/page-circle-edit.pug

@@ -1,9 +1,96 @@
-#circle-edit.content-box.with-padding.with-form.full-width
+div.content-box__info
-  h1 Edit group
+
-  sib-form.block(
+  include templates/hd-user-avatar.pug
-    range-owner=`${endpoints.users}`,
+
-    fields="name, description, owner, team, jabberID, jabberRoom"
+  sib-widget(name='hd-user-groups')
-    range-team=`${endpoints.users}`,
+    template ${value.name}
-    bind-resources
+
+  sib-widget(name='team-template-edit')
+    template
+      sib-display(
+        class='w50 cell border'
+        data-src='${await value.user}'
+        fields='account.picture, sup(name, groups), sub(profile.city)'
+
+        widget-account.picture='hd-user-avatar'
+
+        multiple-groups=''
+        widget-groups='hd-user-groups'
       )
-    //- widget-team='sib-form-multiple-dropdown',
+
+      sib-ac-checker(
+        class='w50 cell border'
+        permission="acl:Delete"
+        data-src="${value['@id']}"
+      )
+        sib-delete(
+          class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
+          data-src="${value['@id']}"
+          data-label='Leave the circle'
+        )
+
+      //- Only to show the table grid
+      sib-ac-checker(
+        class='w50 cell border'
+        no-permission="acl:Delete"
+        data-src="${value['@id']}"
+      )
+
+  sib-link(class="backlink", bind-resources, next='circle-profile') Back
+
+  h1 Edit your circle
+
+  sib-form.block.circle-edit-form(
+    bind-resources
+
+    fields='block-circle__info(name, owner), description'
+    range-owner=`${endpoints.users}`
+
+    label-owner='owner'
+    label-description='circle subtitle'
+
+    class-name='form-label is-light is-half-width'
+    class-owner='form-label is-light is-half-width member-select color'
+    class-description='form-label is-light is-full-width'
+
+    widget-owner='sib-form-auto-completion'
+
+    partial=''
+
+    submit-button='Save'
+    next='circle-information'
+  )
+
+  h2 Members list
+
+  //- TODO: sib-ac-checker unworking - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/517
+  //- sib-ac-checker(permission='acl:Write', bind-resources, nested-field='team')
+  sib-form.block.team-form(
+    bind-resources 
+    nested-field='members'
+    fields='user'
+    range-user=`${endpoints.users}`
+
+    class-user='team form-label is-dark'
+    label-user=''
+    widget-user='sib-form-auto-completion'
+
+    submit-button='Add a member'
+  )
+
+  .table
+
+    div.table-header.grey-color
+      div Name
+      div Access
+
+      //-class='table-body'
+    sib-display(
+      class='table-body'
+      bind-resources
+      fields='members'
+
+      multiple-members=''
+      widget-members='team-template-edit'
+    )
+

src/page-circle-profile.pug

@@ -1,29 +1,84 @@
-.content-box.with-padding.full-width
+sib-router(default-route='circle-profile', hidden)
-  h2 Channel's name:
+  sib-route(name='circle-profile')
+  sib-route(name='circle-edit')
+
+#circle-profile(hidden)
+  include templates/hd-circle-team.pug
+  .content-box__info
+
+    .space-between
       sib-display(
-    fields='name',
         bind-resources
+        fields='creationDateSet(title, creationDate)'
+
+        value-title='Creation date: '
+
+        widget-creationDate='sib-display-date'
+      )
+      sib-ac-checker.testblock.circle-edit-button(permission='acl:Write', bind-resources)
+        sib-link(class='button text-bold text-uppercase reversed button-blue bordered with-icon icon-pencil' next='circle-edit' bind-resources) Edit and add Members
+
+
+    h2(name="label-team") Members:
+
+    sib-display.block(
+      bind-resources
+      fields='team'
+
+      multiple-team=''
+      widget-team='circle-team-template'
+    )
+
+    div.box-button
+      sib-ac-checker(permission='acl:Delete', bind-resources)
+        sib-delete(
+          class='button text-bold text-uppercase button-blue bordered with-icon icon-trash'
+          bind-resources
+          data-label='Delete Circle'
+        )
+
+      sib-widget(name='circle-leave-button')
+        template
+          sib-delete(
+            class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
+            data-src="${src}"
+            data-label='Leave Circle'
+          )
+
+      sib-widget(name='circle-join-button')
+        template
+          button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test
+            sib-form(
+              data-src=''
+              nested-field='members'
+
+              fields='user.@id'
+              label-user.@id=''
+              value-user.@id=''
+              widget-user.@id='sib-form-hidden'
+
+              hd-inherit-bind-user2input="input[name='user.@id']"
+              hd-inherit-widgets
+
+              submit-button='Join Circle'
             )
 
-  h2 Description:
       sib-display(
-    fields='description',
         bind-resources
+        nested-field='members'
+        fields='relation'
+        action-relation='relation'
+        widget-relation='circle-leave-button'
+        search-fields='user'
+        search-widget-user='sib-form-hidden'
+        search-value-user=""
+        empty-widget='circle-join-button'
+        hd-inherit-bind-resources='circle-join-button'
+        hd-inherit-user-id="search-value-user"
+        hd-inherit-widgets
       )
 
-  h2 In group:
-  sib-display.block-group(
-    nested-field='team',
-    fields='teammate-img(account.picture), teammate-name(name), teammate-pseudonym(before-pseudo, username), teammate-profile, teammate-contact',
 
-    template-teammate-contact='chat-link',
 
-    value-before-pseudo='@',
+#circle-edit(hidden)
-    value-teammate-contact='Send a message',
+  include page-circle-edit.pug
-    value-teammate-profile='View profile',
-
-    widget-account.picture='sib-display-img',
-    
-    next='member',
-    bind-resources
-  )

src/page-circle.pug

@@ -1,26 +1,29 @@
 .views-container
-  #circle-chat
+  .content-box.full-width.with-form
+    div.content-box__header.with-description
+      sib-ac-checker(permission='acl:Read', bind-resources)
+        sib-display(
+          bind-resources
+          fields='name, description'
+
+          class-name='name'
+          class-description='description'
+        )
+    div.content-box__info
+      sib-ac-checker(permission='acl:Read', bind-resources)
+        #circle-chat(hidden)
           include page-circle-chat.pug
-  //- #circle-profile
+        #circle-information(hidden)
-  //-   include page-circle-profile.pug
+          include page-circle-profile.pug
-  //- #circle-edit
+
-  //-   include page-circle-edit.pug
+nav.jsRightMenu(role='navigation')
-  //- #circle-create
+  sib-router(default-route='circle-chat')
-  //-   include page-circle-create.pug
+    ul
-//- nav.jsRightMenu(role='navigation')
+      li.jsOffsiteToggle
-//-   sib-router(default-route='circle-chat')
+        a Fold menu
-//-     ul
+      sib-route(name='circle-chat')
-//-       li.jsOffsiteToggle
+        li
-//-         a Fold menu
+          a Chat
-//-       sib-route(name='circle-chat')
+      sib-route(name='circle-information')
-//-         li
+        li
-//-           a Chat
+          a Information
-//-       sib-route(name='circle-profile')
-//-         li
-//-           a Information
-//-       sib-route(name='circle-edit')
-//-       //-   li
-//-       //-     a Edit
-//-       sib-route(name='circle-create')
-//-       //-   li
-//-       //-     a Add new

src/page-messages.pug

@@ -1,7 +1,9 @@
 .content-box.full-width
-  sib-display.chat-header(
+  sib-display.content-box__header(
     bind-resources
     fields='username'
+
+    class-username='name'
   )
   .chat-view
     sib-chat(

src/page-project-profile.pug

@@ -3,9 +3,10 @@
   include templates/template-business-provider.pug
   include templates/template-customer.pug
   include templates/template-team.pug
+  include templates/template-captain.pug
 
   sib-display(
-    fields='block-title(const-title1, number, customer.name, const-title2, name, entitled, creationDate), infos(block-description(label-description, description), block-logo(customer.logo)), block-lead, block-fee(label-fee, businessProvider), block-customer(label-customer, customer), block-team(label-team, members)',
+    fields='block-title(const-title1, number, customer.name, const-title2, name, entitled, creationDate), infos(block-description(label-description, description), block-logo(customer.logo)), block-lead, block-fee(label-fee, businessProvider), block-customer(label-customer, customer), block-captain(label-captain, captain), block-team(label-team, members)',
     
     value-const-title1='N°',
     value-const-title2='-',
@@ -20,10 +21,12 @@
     value-label-customer='CUSTOMER INFORMATIONS:',
     widget-customer='customer-template',
 
+    value-label-captain='CAPTAIN:',
+    widget-captain='captain-template',
+
     value-label-team='TEAM:',
-    widget-members='team-template',
+    widget-members='project-team-template',
-    multiple-members='',
+    multiple-members,
 
     bind-resources
   )
-

src/page-user-panel.pug

@@ -4,6 +4,6 @@ nav(role="user's functionalities menu")
     //-   sib-link(next='my-profile') My profile
     //-li
       sib-link(next='user-settings') Settings
-    //-li
+    li
-      sib-link(name='user-admin') Admin
+      sib-link(next='admin') Admin
   button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out

src/scripts/index.js

@@ -1,3 +1,53 @@
+function recursiveAdaptWidgets(prefix, element, user) {
+  //- This function is a workaround for the currently unworking populate
+  //- Feel free to see examples on page-circles-
+
+  element.querySelectorAll('[' + prefix + '-user-id]').forEach((el) => {
+    el.setAttribute(el.getAttribute(prefix + '-user-id'), user['@id']);
+  });
+
+  if (element != document) {
+
+    //- Allow to bind-user on selected attribute
+    if (element.getAttribute(prefix + '-user-id')) {
+      element.setAttribute(element.getAttribute(prefix + '-user-id'), user['@id']);
+    }
+
+    //- Allow to set data-src to a children sib-form
+    if (element.getAttribute(prefix + '-bind-resources')) {
+      let form = element.querySelector(element.getAttribute(prefix + '-bind-resources') + " sib-form");
+      if (form) {
+        form.setAttribute('data-src', element.component.resourceId.replace('members/', ''));
+      }
+    }
+
+    //- Allow to put user on a targetted search field
+    if (element.getAttribute(prefix + '-bind-user2input')) {
+      element.querySelector(element.getAttribute(prefix + '-bind-user2input')).value = user['@id'];
+    }
+
+    //- In case your sib-display use a multiple, you have to target sub-sib-display auto-generated
+    if (element.getAttribute(prefix + '-widgets-multiple') !== null) {
+      element.querySelectorAll('div > sib-display').forEach((el) => {
+        el.setAttribute(prefix + '-widgets', "");
+      });
+    }
+  }
+
+  //- This function is hooked every time a sib-something with prefix+"-widgets" is populated
+  element.querySelectorAll('[' + prefix + '-widgets]').forEach((elementChild) => {
+    elementChild.addEventListener('populate', () => {
+      recursiveAdaptWidgets(prefix, elementChild, user);
+    });
+  });
+}
+
+// auxiliary function closes the user profile menu
+function closeUserControls() {
+  let userControls = document.querySelector('#user-controls');
+  if (userControls) userControls.removeAttribute("open");
+}
+
 document.addEventListener('DOMContentLoaded', function (event) {
   const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
   const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
@@ -26,24 +76,43 @@ document.addEventListener('DOMContentLoaded', function (event) {
   });
 
   //- Watch every sib-forms & update data-src of linked sib-display
-  document.querySelectorAll('sib-form[data-src], sib-form[bind-resource]').forEach(function(el) {
+  document.querySelectorAll('sib-form').forEach(function(el) {
-    el.addEventListener("save", function() {
+    el.addEventListener("save", function(event) {
-      let dataSrc = el.getAttribute('data-src');
+      //clear cache on this resource
-      document.querySelectorAll('sib-display[data-src="'+dataSrc+'"]').forEach(function(e) {
+      //NOTE: this is required because the cache is not refreshed after POSTing changes on the resource
-        e.setAttribute('data-src', dataSrc);
+      if(el.component.resource != null) el.component.resource.clearCache();
-      });
+
+      // if of the edited resource || id of the container of the created resource
+      const resourceId = event.detail.resource['@id'] || el.dataset.src;
+
+      //update all displays which use this resource
+      Array.from(document.querySelectorAll('sib-display'))
+      .filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
+      .forEach(e => e.dataset.src = e.dataset.src); // and update them
     });
   });
 
   document.querySelector('sib-auth').getUser().then(user => {
     if (user !== null) {
       // Hide login button if already logged
-      document.querySelector('button[role="log in"]').style.display = 'none';
+      document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important');
       // Set current user id on set-user-id of sib-display
-      for(sibDisplay of document.querySelectorAll('sib-display[set-user-id]')) {
+      recursiveAdaptWidgets("hd-inherit", document, user);
-        sibDisplay.setAttribute(sibDisplay.getAttribute('set-user-id'), user['@id']);
+      for (leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) {
+        leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.setAttribute('style', 'display:none !important'); // Hide Join button
       }
     }
   }).catch(error => console.log(error));
 
+  // Document -> close menu
+  document.addEventListener("click", event => {
+    if (!event.target.closest('#user-controls')) closeUserControls();
+  });
+
+  // listen for keypress
+  document.onkeydown = (e) => {
+    e = e || window.event;
+    if (e.key === "Escape" || e.key === "Esc") closeUserControls();
+  };
+
 });

src/styles/_index.scss

@@ -16,8 +16,7 @@ div#viewport {
     @import 'components/index';
     @import 'layout/members/index';
     @import 'layout/job-offers/index';
-    @import 'components/comment.scss';
     @import 'layout/project-profile/index';
-    @import 'layout/circle-profile/index';
+    @import 'layout/circle/index';
     @import 'layout/user/index';
 }

src/styles/abstracts/_variables.scss

@@ -10,6 +10,7 @@ $color-210-25-95: hsl(210, 25%, 95%);
 $color-222-57-95: hsl(222, 57%, 95%);
 $color-213-20-91: hsl(213, 20%, 91%);
 $color-221-51-90: hsl(221, 51%, 90%);
+$color-228-25-79: hsl(228, 25%, 79%);
 $color-0-0-85: hsl(0, 0%, 85%);
 $color-229-25-79: hsl(229, 25%, 79%);
 $color-215-9-73: hsl(215, 9%, 73%);

src/styles/base/form.scss

@@ -2,10 +2,6 @@
 
   &.with-form {
 
-    sib-form {
-      padding-bottom: 2.55rem;
-    }
-
     h1 {
       color: $color-233-18-29;
       font-weight: bold;
@@ -44,7 +40,7 @@
 
     sib-set-default {
 			clear: both;
-	    display: flex;
+	    display: flex!important;
 			flex-wrap: wrap;
 			max-width: 100%;
 			
@@ -86,22 +82,67 @@
       }
     }
 
-    input[type='submit'] {
+    sib-form[set-user-id-select] {
-      background-color: $color-233-18-29;
+
-      border: none;
+      input[type="submit"] {
-      border-radius: 100em;
+        margin-left: 0;
-      color: $color-0-0-100;
+        margin-top: 0;
-      cursor: pointer;
+      }
-      font-size: 1.4rem;
+
-      font-weight: bold;
+      select {
-      margin-left: auto;
+        display: none;
-      margin-top: 3.2rem;
+      }
-      padding: 0.55rem 2.5rem;
-      text-transform: uppercase;
     }
 
     /* CLASSES Peut-être à sortir de .content-box */
 
+    .block.team-form>form { /* circle-profile */
+      display: flex;
+      flex-direction: row;
+
+      label {
+
+        >.ss-main {
+          font-weight: normal;
+          min-width: 35vw;
+          text-transform: none;
+
+          >.ss-single-selected {
+            align-items: center;
+            background-color: #ebeffa;
+            border: none;
+            border-radius: 0px;
+            display: flex;
+            justify-content: flex-end;
+            min-height: 4.2rem;
+            padding-left: 1.2rem;
+
+            .ss-arrow {
+              font-size: 1.8rem;
+              margin: 0 18px 0 0;
+
+              span {
+                border: solid $color-244-73-62;
+                border-width: 0 2px 2px 0;
+              }
+            }
+          }
+        }
+      }
+
+      >input[type='submit'] {
+        @extend
+          .button,
+          .btn-margin-left,
+          .text-bold,
+          .text-uppercase,
+          .button-blue,
+          .bordered;
+        margin-top: auto;
+        margin-bottom: auto;
+      }
+    }
+
 		.form-container>form {
 		  margin-top: 2.7rem;
 		}
@@ -151,15 +192,19 @@
 
     sib-form-auto-completion.member-select {
       align-self: flex-end;
-      font-weight: normal;
+
+      >label:first-of-type>div {
+        font-weight: 600;
+      }
 
       .ss-single-selected {
         background-color: $color-222-57-95;
         border: none;
         border-radius: 0px;
         display: flex;
+        font-weight: normal;
         margin-top: 0.8rem;
-        min-height: 3.9rem;
+        min-height: 4.4rem;
         padding-left: 1rem;
         text-transform: none;
 
@@ -170,6 +215,7 @@
       }
 
       .ss-content .ss-list .ss-option {
+        font-weight: normal;
         text-transform: none;
       }
     }

src/styles/base/header.scss

@@ -145,6 +145,7 @@
         }
 
         img {
+          background-color: white;
           height: 100%;
           object-fit: cover;
           object-position: center;
@@ -156,7 +157,7 @@
           width: 45%;
         }
   
-        sib-display-value[name='first_name'] {
+        sib-display-value[name='firstName'] {
           @include icon('arrow-down');
           align-items: center;
           display: flex;
@@ -224,7 +225,7 @@
   
         div {
   
-          sib-display-value[name='first_name'] {
+          sib-display-value[name='firstName'] {
             @include icon('close');
   
             &::before {

src/styles/base/main.scss

@@ -7,10 +7,6 @@ $breakpoints: (phone: 480px,
   display: none !important;
 }
 
-sib-ac-checker[hidden] {
-  display: block !important;
-}
-
 * {
   outline: none;
 }
@@ -56,14 +52,14 @@ h6 {
   font-weight: 600;
   padding: 0;
 
-  span {
+  /*span {
     font-weight: 400;
     padding-left: 0.85rem;
 
     &:before {
       content: '// ';
     }
-  }
+  }*/
 }
 
 h1 {
@@ -75,7 +71,7 @@ h2 {
 }
 
 h3 {
-  font-size: 1.6rem;
+  font-size: 1.7rem;
 }
 
 h4 {
@@ -86,29 +82,14 @@ h5 {
   font-size: 2rem;
 }
 
-button {
-  background: none;
-  border: none;
-  padding: 0;
-}
-
-sib-route,
-sib-link,
-button,
-input,
-a {
-  cursor: pointer;
-  &:hover,
-  &:link,
-  &:active {
-    cursor: pointer;
-  }
-}
-
 %padding-main {
   padding: 5rem;
 }
 
+%padding-block {
+  padding: 3.2rem;
+}
+
 .content-box {
   @include window-style-modal();
   display: flex;
@@ -119,7 +100,7 @@ a {
   &.full-width {
     background: $color-0-0-100;
     flex: 1;
-    font-size: 1.5rem;
+    font-size: 1.6rem;
     margin: 0 auto;
     min-height: calc(100vh - 84px);
   }
@@ -129,25 +110,66 @@ a {
   }
 }
 
+.content-box__header {
+  padding: 1.9rem 3rem;
+
+  div {
+    color: $color-233-18-29;
+    display: flex;
+    font-size: 2rem;
+
+    &>* {
+      align-self: center;
+    }
+
+    .name {
+      font-size: 2rem;
+      font-weight: bold;
+      margin: 1.1rem 0;
+    }
+  }
+}
+
 .drive {
   width: 100%;
   border: 0;
 }
 
+.content-box__header.with-description {
+  border-bottom: 1px solid $color-221-51-90;
+
+  div {
+
+    .name {
+      text-transform: uppercase;
+    }
+
+    .description {
+      color: $color-215-6-63;
+      font-size: 1.8rem;
+
+      &:not(:empty)::before {
+        color: $color-216-4-22;
+        content: '- ';
+        font-size: 2rem;
+        font-weight: bold;
+        margin-left: 0.60rem;
+      }
+    }
+  }
+}
+
 .backlink {
+  @include icon('arrow-left-circle');
+  color: $color-233-18-29;
   font-size: 1.5rem;
   margin: 2rem 0 0 2rem;
-  @include icon('arrow-left-circle');
-  color: #3d4057;
   text-decoration: underline;
 
-  &::before {
-    text-decoration: none;
-  }
-
   &::before {
     font-size: 2rem;
     margin-right: 1rem;
+    text-decoration: none;
   }
 }
 
@@ -164,6 +186,12 @@ a {
   }
 }
 
+.space-between {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 1.4rem;
+}
+
 .section {
   border-bottom: 1px solid $color-221-51-90;
   padding: 4.5rem;
@@ -175,3 +203,206 @@ a {
 @import 'form';
 @import 'header';
 @import 'menu-left';
+@import 'user-avatar';
+
+// Button global CSS
+sib-delete,
+sib-route,
+sib-link,
+button,
+input[type='submit'],
+a,
+.button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  padding: 0;
+
+  &.button {
+    padding: 0.55rem 2.5rem;
+    border-radius: 100em;
+
+    *,
+    & {
+      font-size: 1.4rem;
+    }
+
+    &.btn-margin-left {
+      margin-left: 2.2rem;
+    }
+
+    &.small {
+
+      *,
+      & {
+        font-size: 1rem;
+      }
+    }
+
+    &.text-bold {
+
+      *,
+      & {
+        font-weight: bold;
+      }
+    }
+
+    &.text-uppercase {
+
+      *,
+      & {
+        text-transform: uppercase;
+      }
+    }
+
+    &.rounded {
+      border-radius: 50%;
+      padding: 0.5rem 1rem;
+    }
+
+    &.button-link {
+      border-radius: 100em;
+
+      *,
+      & {
+        text-decoration: underline;
+      }
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    &.with-icon::before {
+      font-size: 1.6rem;
+      margin-right: 1rem;
+    }
+
+    &.button-yellow {
+      background-color: white;
+
+      *,
+      & {
+        color: $color-43-100-50;
+      }
+
+      &.bordered {
+        border: 1px solid $color-43-100-50;
+      }
+
+      &:hover {
+        background-color: $color-43-100-50;
+
+        *,
+        & {
+          color: white;
+        }
+      }
+    }
+
+    &.button-blue {
+      background-color: white;
+
+      *,
+      & {
+        color: $color-244-73-62;
+      }
+
+      &.bordered {
+        border: 1px solid $color-244-73-62;
+      }
+
+      &:hover {
+        background-color: $color-244-73-62;
+
+        *,
+        & {
+          color: white;
+        }
+      }
+    }
+
+    &.button-dark {
+      color: $color-233-18-29;
+      background-color: white;
+
+      &.bordered {
+        border: 1px solid $color-233-18-29;
+      }
+
+      &:hover {
+        background-color: $color-233-18-29;
+        color: white;
+      }
+    }
+
+    &.test {
+      display: flex;
+    }
+
+    &.reversed {
+      &.button-yellow {
+        background-color: $color-43-100-50;
+
+        *,
+        & {
+          color: white;
+        }
+
+        &:hover {
+          background-color: white;
+          color: $color-43-100-50;
+
+          &.bordered {
+            border: 1px solid $color-43-100-50;
+          }
+        }
+      }
+
+      &.button-blue {
+        background-color: $color-244-73-62;
+
+        *,
+        & {
+          color: white;
+        }
+
+        &:hover {
+          background-color: white;
+
+          *,
+          & {
+            color: $color-244-73-62;
+          }
+
+          &.bordered {
+            border: 1px solid $color-244-73-62;
+          }
+        }
+      }
+
+      &.button-dark {
+        background-color: $color-233-18-29;
+
+        *,
+        & {
+          color: white;
+        }
+
+        &:hover {
+          background-color: white;
+
+          *,
+          & {
+            color: $color-233-18-29;
+          }
+
+          &.bordered {
+            border: 1px solid $color-233-18-29;
+          }
+        }
+      }
+    }
+  }
+}

src/styles/base/user-avatar.scss

@@ -0,0 +1,29 @@
+.project-profile-user-avatar {
+  align-self: center;
+  grid-column: 1 / span 1;
+  grid-row: 1 / span 2;
+  display: inline;
+
+  * {
+    height: 100%;
+    width: 100%;
+  }
+
+  div {
+    background-color: $color-0-0-100;
+    border-radius: 50%;
+    height: 7vh;
+    overflow: hidden;
+    position: relative;
+    width: 7vh;
+
+    img {
+      height: 100%;
+      left: 0;
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+}

src/styles/components/_index.scss

@@ -1,4 +1,5 @@
 @import 'chat';
+@import 'comment.scss';
 @import 'filters';
 @import 'howto';
 @import 'sidebar';

src/styles/components/chat.scss

@@ -1,20 +1,3 @@
-
-// chat
-.chat-header {
-  
-  div {
-    color: $color-233-18-29;
-    display: flex;
-    flex-direction: column;
-    margin: 3rem;
-    
-    &>:first-child {
-      font-size: 2rem;
-      font-weight: bold;
-    }
-  }
-}
-
 .chat-view {
   padding: 0;
   height: calc(100vh - 84px - 83px);

src/styles/components/icons/custom-icons.scss

@@ -53,7 +53,8 @@ $ci-icons: (
   alien: '\e91e',
   drawing: '\e91f',
   feedback: '\e920',
-  globe: '\e921'
+  globe: '\e921',
+  bubble-add: '\e922'
 );
 
 %ci,

src/styles/components/sidebar.scss

@@ -36,6 +36,8 @@
 
       >ul {
         cursor: pointer;
+        display: flex;
+        flex-direction: column;
         list-style: none;
         margin: 0;
         padding-left: 0;
@@ -45,7 +47,7 @@
           border-bottom: 1px solid $color-229-25-79;
           display: flex;
           margin: 0;
-          padding: 2.55rem 2.55rem;
+          padding: 2.15rem 2.55rem;
           position: relative;
           width: 12em;
 
@@ -69,7 +71,7 @@
             display: inline-block;
           }
 
-          &[name^='circle'],
+          &[name*='circle'],
           &[name^='project'] {
 
             >li::before {
@@ -89,13 +91,17 @@
             @include ci('list');
           }
 
-          &[name$='profile']>li {
+          &[name$='profile']>li, &[name$='information']>li  {
             @include ci('information');
           }
 
           &[name$='drive']>li {
             @include ci('file');
           }
+
+          &[name='admin-circles']>li {
+            @include ci('bubble-add');
+          }
         }
       }
     }

src/styles/components/user-role.scss

@@ -5,5 +5,5 @@
     font-size: 1.4rem;
     font-weight: 400;
     margin-right: 0.4rem;
-    padding: calc(1.6rem - 0.8em) 0.7em;
+    padding: 0.2rem 0.98rem;
   }

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

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

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

@@ -1,79 +0,0 @@
-#circle-profile {
-
-  .block-group > div {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
-
-    sib-display > div {
-      align-items: center;
-      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
-      display: grid;
-      font-size: 1.6rem;
-      grid-template-columns: repeat(4, 1fr);
-      grid-template-rows: repeat(3, 1fr);
-      height: auto;
-      justify-items: center;
-      margin: 1rem 0.5rem 1rem 0;
-      position: relative;
-      padding-right: 1rem;
-      padding-top: 1rem;
-      text-align: center;
-      width: 14em;
-
-      &:hover {
-        cursor: pointer;
-	      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
-	      top: -2px;
-      }
-
-      > sib-set-default[name='teammate-img'] {
-        background-color: $color-215-9-73;
-        border-radius: 50%;
-        grid-column: 1 / span 2;
-        grid-row: 1 / span 2;
-        height: 6vh;
-        overflow: hidden;
-        width: 6vh;
-
-        img {
-          height: 100%;
-          left: 0;
-          object-fit: cover;
-          top: 0;
-          width: 100%;
-        }
-      }
-
-      sib-set-default[name='teammate-name'] {
-        grid-column: 3 / span 2;
-        grid-row: 1 / span 1;
-      }
-
-      > sib-set-default[name='teammate-pseudonym'] {
-        align-self: start;
-        font-size: 1.2rem;
-        grid-column: 3 / span 2;
-        grid-row: 2 / span 1;
-      }
-
-      > sib-display-value[name='teammate-profile'] {
-        color: $color-216-4-22;
-        display: block;
-        font-size: 1.2rem;
-        grid-column: 1 / span 2;
-        grid-row: 3 / span 1;
-      }
-
-      > sib-display-value[name='teammate-contact'] {
-        color: $color-244-73-62;
-        font-size: 1.2rem;
-        justify-self: stretch;
-        grid-column: 3 / span 2;
-        grid-row: 3 / span 1;
-      }
-    }
-  }
-}

src/styles/layout/circle/_index.scss

@@ -0,0 +1,5 @@
+@import 'circle';
+@import 'circle-profile';
+@import 'circle-edit';
+@import 'circle-admin';
+@import 'admin-circle-create';

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

@@ -0,0 +1,13 @@
+#admin-circle-create {
+
+  input[type='submit'] {
+    @extend .button,
+    .text-bold,
+    .text-uppercase,
+    .reversed,
+    .button-dark,
+    .bordered;
+    margin-left: auto;
+    margin-top: 3.2rem;
+  }
+}

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

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

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

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

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

@@ -0,0 +1,104 @@
+#circle-information {
+
+  .box-button {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .block {
+
+    >form { /* peut-être à mettre dans main.scss */
+      margin-bottom: 2.6rem;
+
+      .form-label.is-dark>label {
+        margin-top: 0;
+      }
+    }
+
+    >div { /* peut-être à mettre dans main.scss */
+      
+      >sib-multiple {
+
+        label {
+          display: none;
+        }
+
+        >div>circle-team-template[name='team']>sib-display>div {
+          display: grid;
+          grid-column-gap: 1.6rem;
+          grid-template-columns: 7vh auto;
+          grid-template-rows: repeat(2, 5.2vh);
+
+          >[name='account.picture'] {
+            align-items: center;
+            align-self: center;
+            background-color: $color-213-20-91;
+            border-radius: 50%;
+            display: flex;
+            grid-column: 1 / span 1;
+            grid-row: 1 / span 2;
+            height: 7vh;
+            justify-content: center;
+            overflow: hidden;
+            position: relative;
+            width: 7vh;
+
+            img {
+              background-color: white;
+              height: 100%;
+              left: 0;
+              object-fit: cover;
+              position: absolute;
+              top: 0;
+              width: 100%;
+            }
+
+            object {
+              height: 45%;
+              width: 45%;
+            }
+          }
+
+          >[name='sup'] {
+            align-self: end;
+            display: flex;
+            grid-column: 2 / span 1;
+            grid-row: 1 / span 1;
+            margin-bottom: 0.50rem;
+
+            [name='name'] {
+              font-weight: 600;
+            }
+
+            sib-multiple {
+              display: flex;
+              margin-left: 1rem;
+
+              [name='groups'] {
+                @extend %user-role;
+              }
+            }
+          }
+
+          >[name='sub'] {
+            align-self: start;
+            grid-column: 2 / span 1;
+            grid-row: 2 / span 1;
+            margin-top: 0.50rem;
+
+            >[name$='profile.city']:not(:empty) {
+              @include mdi('atom');
+              align-items: center;
+              display: flex;
+
+              &::before {
+                color: $color-43-100-50;
+                margin-right: 0.50rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/styles/layout/circle/circle.scss

@@ -0,0 +1,191 @@
+#circle-information,
+#circle-edit,
+#admin-circle-list,
+#admin-circle-create {
+
+  h2 {
+    font-size: 1.7rem;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  .content-box__info {
+    @extend %padding-block;
+    display: flex;
+    flex-direction: column;
+
+    .backlink {
+      text-align: right;
+      display: block;
+    }
+  }
+
+  .table {
+
+    .table-header {
+      display: flex;
+      flex: 1;
+      font-size: 1.6rem;
+      font-weight: 600;
+      justify-content: space-around;
+      text-align: center;
+
+      &.grey-color {
+        background: $color-228-25-79;
+        color: white;
+      }
+
+      >* {
+        border-right: 1px solid white;
+        flex: 1;
+        padding: 2.1rem 0;
+        text-align: center;
+      }
+
+      >*:last-of-type {
+        border-right: 1px solid $color-228-25-79;
+      }
+    }
+
+    .table-body {
+
+      >div:first-of-type>sib-display>div,
+      team-template-edit[name='members'] {
+        display: flex;
+        border-left: 1px solid $color-228-25-79;
+      }
+      
+      .border {
+        border-bottom: 1px solid $color-228-25-79;
+        border-right: 1px solid $color-228-25-79;
+      }
+      
+      .cell {
+        text-align: center;
+        word-wrap: break-word;
+      }
+      
+      .w33 {
+        width: 33.3333%;
+      }
+
+      .w50 {
+        width: 50%;
+      }
+      
+      [name="buttons"] {
+        @extend .border;
+        @extend .cell;
+        @extend .w33;
+      }
+    }
+
+    .table-body>div>sib-display>div>sib-display-value[name='name'] {
+      color: $color-233-18-29;
+      font-weight: 600;
+      padding-top: 2.5rem;
+    }
+
+    [name='members']>sib-display>div,
+    [name='owner']>sib-display>div {
+      display: grid;
+      grid-column-gap: 1.6rem;
+      grid-template-columns: 7vh auto;
+      grid-template-rows: repeat(2, 5.2vh);
+      padding: 0 2.2rem;
+
+      >[name$='account.picture'] {
+        align-items: center;
+        align-self: center;
+        background-color: $color-213-20-91;
+        border-radius: 50%;
+        display: flex;
+        grid-column: 1 / span 1;
+        grid-row: 1 / span 2;
+        height: 7vh;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+        width: 7vh;
+
+        img {
+          background-color: white;
+          height: 100%;
+          left: 0;
+          object-fit: cover;
+          position: absolute;
+          top: 0;
+          width: 100%;
+        }
+
+        object {
+          height: 45%;
+          width: 45%;
+        }
+      }
+
+      >[name='sup'] {
+        align-self: end;
+        display: flex;
+        grid-column: 2 / span 1;
+        grid-row: 1 / span 1;
+        margin-bottom: 0.50rem;
+
+        [name$='name'] {
+          color: #7A7F85;
+          font-weight: 600;
+          margin-right: 1rem;
+        }
+
+        sib-multiple>div {
+          display: flex;
+
+          [name='groups'] {
+            @extend %user-role;
+          }
+        }
+      }
+
+      >[name='sub'] {
+        align-self: start;
+        grid-column: 2 / span 1;
+        grid-row: 2 / span 1;
+        margin-top: 0.50rem;
+
+        >[name$='username']:not(:empty) {
+          align-items: center;
+          display: flex;
+
+          &::before {
+            content: '@';
+
+          }
+        }
+      }
+    }
+
+    sib-set-default[name='buttons'] {
+      align-items: center;
+      justify-content: center;
+      
+      [name='button'] {
+        
+        input[type='submit'] {
+          @extend .button,
+          .text-bold,
+          .text-uppercase,
+          .reversed,
+          .button-blue,
+          .bordered,
+          .btn-margin-left;
+        }
+      }
+    }
+
+    sib-ac-checker {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}

src/styles/layout/job-offers/job-offers.scss

@@ -75,7 +75,7 @@ sib-job-board {
               margin: 0.25em;
             }
 
-            [name='author.first_name'] {
+            [name='author.firstName'] {
               color: $color-0-0-29;
               font-weight: 600;
             }

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

@@ -6,7 +6,7 @@
     [name^='label-'] {
       display: block;
       font-weight: bold;
-      margin-bottom: 1.4rem;
+      margin: 1.4rem 0;
       text-transform: uppercase;
       @extend h2;
     }
@@ -98,9 +98,7 @@
 
   #clientBox {
     display: flex;
-    margin-left: auto;
+    margin: 1.7rem auto;
-    margin-right: auto;
-    margin-top: 1.7rem;
     max-width: 100%;
 
     >* {
@@ -166,21 +164,12 @@
     }
   }
 
-  [name='block-team'] {
+  [name='block-team'], [name='block-captain'] {
-
-    >sib-multiple {
-
     label {
       display: none;
     }
 
-      >team-template[name='members'] {
+    sib-display.project-profile-user-avatar {
-        display: grid;
-        grid-column-gap: 1.6rem;
-        grid-template-columns: 7vh auto;
-        grid-template-rows: repeat(2, 5.2vh);
-
-        >sib-display:first-child {
       align-self: center;
       grid-column: 1 / span 1;
       grid-row: 1 / span 2;
@@ -204,6 +193,13 @@
       }
     }
 
+    project-team-template[name='members'], captain-template[name='captain'] {
+      display: grid;
+      grid-column-gap: 1.6rem;
+      grid-template-columns: 7vh auto;
+      grid-template-rows: repeat(2, 5.2vh);
+
+
       > div:nth-child(2) {
         align-self: end;
         display: flex;
@@ -236,5 +232,3 @@
     }
   }
 }
-
-}

src/templates/hd-circle-team.pug

@@ -0,0 +1,16 @@
+include hd-user-avatar.pug
+
+sib-widget(name='circle-team-template')
+  template
+    sib-display(
+      data-src="${await value}"
+      fields='account.picture, sup(name, groups), sub(profile.city)'
+
+      widget-account.picture='hd-user-avatar'
+      widget-groups='hd-user-groups'
+
+      multiple-groups=''
+    )
+
+sib-widget(name='hd-user-groups')
+  template ${await value.name}

src/templates/hd-user-avatar.pug

@@ -1,2 +1,2 @@
 sib-widget(name='hd-user-avatar')
-  template ${value ? `<img src="${value}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
+  template ${await value ? `<img src="${await value}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}

src/templates/template-captain.pug

@@ -0,0 +1,23 @@
+include hd-user-avatar.pug
+
+sib-widget(name='captain-template')
+  template
+    sib-display.project-profile-user-avatar(
+      data-src="${value ? value['@id'] : ''}"
+      fields='account.picture',
+      widget-account.picture='hd-user-avatar'
+    )
+    div(name='user.thumb')
+      sib-display(
+        data-src="${value ? value['@id'] : ''}"
+        fields='name'
+      )
+      sib-display(
+        data-src="${value ? value['@id'] : ''}",
+        fields='name'
+        nested-field="groups"
+      )
+    sib-display(
+      data-src="${value ? value['@id'] : ''}"
+      fields='username'
+    )

src/templates/template-team.pug

@@ -1,17 +1,24 @@
 include hd-user-avatar.pug
 
-sib-widget(name='team-template')
+sib-widget(name='project-team-template')
   template
-    sib-display(
+    sib-display.project-profile-user-avatar(
-      data-src="${value.user['@id']}"
+      data-src="${value.user ? value.user['@id'] : ''}"
       fields='account.picture',
       widget-account.picture='hd-user-avatar'
     )
     div(name='user.thumb')
-      span ${value.user.name}
       sib-display(
-        data-src="${value.user.groups['@id']}",
+        data-src="${value.user ? value.user['@id'] : ''}"
-        fields='name',
+        fields='name'
-        multiple-name
       )
-    span ${value.name}
+      sib-display(
+        data-src="${value.user ? value.user['@id'] : ''}",
+        fields='name'
+        nested-field="groups"
+      )
+    sib-display(
+      data-src="${value.user ? value.user['@id'] : ''}"
+      fields='username'
+    )
+