fix: conflicts with master

src/config.sample.json

@@ -3,6 +3,7 @@
     "cdn": "https://cdn.happy-dev.fr",
     "xmpp": "https://jabber.happy-dev.fr/http-bind/",
     "authority": "http://127.0.0.1:8000/openid/",
+    "clientName": "SIB App",
     "endpoints": {
       "businessproviders": "http://127.0.0.1:8000/businessproviders/",
       "circles": "http://127.0.0.1:8000/circles/",

src/dependencies.pug

@@ -12,13 +12,13 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 //- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
 //- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
 //- script(type="module" src="/lib/sib-directory/sib-directory.js")
-//- script(type="module" src="/lib/sib-joboffers/sib-job-board.js")
+//- 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/router@0.7")
-script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.2")
+script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.3")
 script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.2")
 //- script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3")
-//- script(type="module" src="https://unpkg.com/@startinblox/component-directory@beta")
+//- script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3")
-//- script(type="module" src="https://unpkg.com/@startinblox/component-job-board@beta")
+//- script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3")

src/header.pug

@@ -30,5 +30,6 @@ sib-auth
   sib-auth-provider(
     data-authority=`${authority}`
     data-id=`${authorityName || "paris"}`
+    data-client-name=`${clientName || "SIB App"}`
   )
 

src/menu-left.pug

@@ -1,6 +1,11 @@
 sib-widget(name='hd-counter')
   template
     sib-badge(data-src="${src}")
+
+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).
+
 nav#main__menu
   sib-router#navbar-router(default-route='members')
     //- sib-route.menu(name='members')
@@ -24,12 +29,13 @@ nav#main__menu
     //-     sib-display(
     //-       data-src=`${endpoints.projects}`
     //-       fields='project(customer.name, dash, name), badge'
+    //-       empty-widget='hd-create'
+    //-       empty-value='project'
     //-       value-dash=' - '
     //-       widget-badge='hd-counter'
     //-       action-badge='badge'
-    //-       next='project'
     //-     )
-    //- div.divider
+    div.divider
     div.menu-wrapper
       div.menu
         div.menu-chevron
@@ -41,9 +47,16 @@ nav#main__menu
         sib-display(
           data-src=`${endpoints.circles}`
           fields='name, badge'
+          empty-widget='hd-create'
+          empty-value='circle'
           widget-name='sib-display-div',
           widget-badge='hd-counter'
           action-badge='badge'
+          search-fields='team'
+          search-widget-team='sib-form-hidden'
+          search-value-team=''
+          set-user-id='search-value-team'
+          order-by='name'
           next='circle'
         )
     div.divider
@@ -61,6 +74,7 @@ nav#main__menu
           widget-username='sib-display-div'
           widget-badge='hd-counter'
           action-badge='badge'
+          order-by='username'
           next='messages'
         )
 

src/page-circle-chat.pug

@@ -1,9 +1,14 @@
-.content-box.with-padding.full-width.chat-view
+.content-box.full-width
-  sib-chat(
+  sib-display.chat-header(
-    data-authentication='login',
-    data-auto-login='true',
-    data-bosh-service-url=`${xmpp}`,
-    data-debug='false',
-    data-locales-url='en',
     bind-resources
+    fields='name'
   )
+  .chat-view
+    sib-chat(
+      data-authentication='login',
+      data-auto-login='true',
+      data-bosh-service-url=`${xmpp}`,
+      data-debug='false',
+      data-locales-url='en',
+      bind-resources
+    )

src/page-messages.pug

@@ -1,9 +1,14 @@
-.content-box.with-padding.full-width.chat-view
+.content-box.full-width
-  sib-chat(
+  sib-display.chat-header(
-    data-authentication='login',
-    data-auto-login='true',
-    data-bosh-service-url=`${xmpp}`,
-    data-debug='false',
-    data-locales-url='en',
     bind-resources
+    fields='username'
   )
+  .chat-view
+    sib-chat(
+      data-authentication='login',
+      data-auto-login='true',
+      data-bosh-service-url=`${xmpp}`,
+      data-debug='false',
+      data-locales-url='en',
+      bind-resources
+    )

src/scripts/index.js

@@ -37,12 +37,11 @@ document.addEventListener('DOMContentLoaded', function (event) {
 
   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';
-      //- Token expired, hack for ask relogin
+      // Set current user id on set-user-id of sib-display
-      if(new Date(document.querySelector('sib-auth').getUser().expires_at*1000) <= new Date()) {
+      for(sibDisplay of document.querySelectorAll('sib-display[set-user-id]')) {
-        document.querySelector('button[role="log in"]').style.display = '';
+        sibDisplay.setAttribute(sibDisplay.getAttribute('set-user-id'), user['@id']);
-        document.querySelector('button[role="log in"]').style.color = 'red';
-        document.querySelector('button[role="log in"]').innerHTML = 'Re-login';
       }
     }
   }).catch(error => console.log(error));

src/styles/base/header.scss

@@ -65,7 +65,7 @@
     summary {
   
       &::-moz-list-bullet {
-        list-style-type: none;
+        list-style-type: none; /* To remove the disclosure triangle on Firefox v.<69 */
       }
   
       &::-webkit-details-marker {
@@ -114,6 +114,8 @@
     summary {
       padding: 18px;
       cursor: pointer;
+      display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
+
       &:focus {
         background-color: $color-233-18-29;
         color: $color-0-0-100;

src/styles/base/menu-left.scss

@@ -93,6 +93,11 @@
       
       sib-display>div {
 
+        .create {
+          color: $color-244-10-70;
+          margin: 1rem 1rem 2.2rem 3.2rem;
+        }
+      
         &>sib-display {
           
           &:last-child>div {

src/styles/components/chat.scss

@@ -1,9 +1,23 @@
 
 // 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);
+  height: calc(100vh - 84px - 83px);
   position: relative;
   overflow: hidden;
 
@@ -13,7 +27,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    max-height: calc(100vh - 84px);
+    max-height: calc(100vh - 84px - 83px);
     z-index: 0;
   }
 }

src/styles/layout/members/member-profile.scss

@@ -34,10 +34,10 @@
             width: 28vh;
 
             img {
-              height: 255px;
+              height: 265px;
               object-fit: cover;
               object-position: center;
-              width: 255px;
+              width: 265px;
             }
 
             object {

src/styles/layout/members/members.scss

@@ -1,8 +1,8 @@
 %member-info {
 
   sib-multiple[name^='user.'],
-  > member-info > div,
+  >member-info>div,
-  > sib-display-value {
+  >sib-display-value {
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 0;
@@ -36,7 +36,6 @@ member-info-groups {
 }
 
 #members-list {
-  @extend %grid-layer;
 
   #members-list__content {
     @extend %grid-layer;
@@ -44,6 +43,7 @@ member-info-groups {
     nav {
       align-items: center;
       display: flex;
+      flex-wrap: wrap;
       font-size: 2.4rem;
       justify-content: center;
 
@@ -70,62 +70,81 @@ member-info-groups {
       }
     }
 
-    & > sib-form {
+    &>sib-form {
       grid-column-start: start;
       grid-column-end: middle;
       grid-row-start: start;
       grid-row-end: middle;
     }
 
-    & > div,
+    &>div,
-    & > nav {
+    &>nav {
-      display: flex;
-      flex-wrap: wrap;
       grid-column-start: start;
       grid-column-end: end;
       margin-bottom: 1.7rem;
     }
 
-    & > div {
+    &>div:first-of-type {
-      justify-content: space-between;
+      display: flex;
+      color: $color-0-0-29;
+      flex-wrap: wrap;
+      font-weight: bold;
+      justify-content: center;
+      margin: 3.75rem 0;
+      position: relative;
 
-      &:first-of-type {
+      &::before {
-        color: $color-0-0-29;
+        border-top: 1px solid $color-0-0-85;
-        font-weight: bold;
+        bottom: 0;
-        justify-content: center;
+        content: '';
-        margin: 3.75rem 0;
+        left: 0;
-        position: relative;
+        margin: 0 auto;
-
+        position: absolute;
-        &::before {
+        right: 0;
-          border-top: 1px solid $color-0-0-85;
+        top: 50%;
-          bottom: 0;
+        width: 100%;
-          content: '';
+        z-index: -1;
-          left: 0;
-          margin: 0 auto;
-          position: absolute;
-          right: 0;
-          top: 50%;
-          width: 100%;
-          z-index: -1;
-        }
-
-        span {
-          background-color: $color-210-25-95;
-          padding: 0 60px;
-        }
       }
 
-      > sib-display {
+      span {
+        background-color: $color-210-25-95;
+        padding: 0 60px;
+      }
+    }
+
+    &>div:nth-of-type(2) {
+      display: grid;
+      grid-gap: 30px;
+      grid-template-columns: 1fr;
+      grid-template-rows: auto;
+
+      @media only screen and (min-width: 850px) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      @media only screen and (min-width: 1180px) {
+        grid-template-columns: repeat(3, 1.5fr);
+      }
+
+      &>sib-display {
         background-color: white;
         box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
         color: $color-210-4-50;
         cursor: pointer;
-        display: flex;
+        min-height: auto;
-        flex-flow: column wrap;
+        position: relative;
-        margin-bottom: 2.5rem;
+        text-decoration: none;
-        padding-bottom: 2rem;
+        top: 0;
-        @media(min-width: 56rem) {
+        transition: all .1s ease-in;
-          width: 32%;
+
+        &>div {
+          display: flex;
+          flex-direction: column;
+        }
+
+        &:hover {
+          box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
+          top: -2px;
         }
 
         label {
@@ -141,62 +160,59 @@ member-info-groups {
           padding-right: 2.6rem;
           padding-top: 1.3rem;
 
-          > * {
+          >* {
             margin: 0.3rem;
           }
         }
 
-        sib-set-default[name='header'] {
+        member-picture {
+          align-items: center;
+          background-color: $color-213-20-91;
+          border-radius: 50%;
+          display: flex;
+          height: 28vh;
+          justify-content: center;
+          margin: 1.7rem auto;
+          overflow: hidden;
+          width: 28vh;
+
+          img {
+            height: 100%;
+            object-fit: cover;
+            object-position: center;
+            width: 100%;
+          }
+
+          object {
+            height: 45%;
+            width: 45%;
+          }
+        }
+
+        sib-set-default[name='bio'] {
+          align-items: center;
           border-bottom: 1px solid $color-210-25-95;
           display: flex;
           flex-direction: column;
-          padding: 0.85rem 0 3.4rem;
+          padding-bottom: 3rem;
 
-          >*:not(member-picture) {
+          >* {
-            display: flex;
-            flex-basis: content;
-            justify-content: center;
-          }
-
-          member-picture {
-            align-items: center;
-            background-color: $color-213-20-91;
-            border-radius: 50%;
-            display: flex;
-            height: 28vh;
-            justify-content: center;
-            margin: 1.7rem auto;
-            overflow: hidden;
-            width: 28vh;
-
-            img {
-              height: 100%;
-              object-fit: cover;
-              object-position: center;
-              width: 100%;
-            }
-
-            object {
-              height: 45%;
-              width: 45%;
-            }
-          }
-
-          [name='name'] {
-            margin: 0.67em 0;
-          }
-
-          sib-display-value[name$='bio'] {
-            display: flex;
-            flex-basis: 3.5em;
-            line-height: 1.6;
-            margin: 2.5rem 0;
-            padding: 0 6.8rem;
             text-align: center;
           }
 
-          [next=messages] {
+          [name='pseudonym'] {
-            align-self: center;
+            margin-top: 0.6rem;
+          }
+
+          sib-display-value[name$='bio'] {
+            flex: 1;
+            margin: 2.5rem 0;
+            padding: 0 10px;
+            width: 70%;
+            flex-basis: 4.5em;
+          }
+
+          [name='send'] {
             border: 1px solid $color-244-73-62;
             border-radius: 3.4rem;
             color: $color-244-73-62;
@@ -205,7 +221,7 @@ member-info-groups {
             padding: 1rem 2.55rem 0.7rem;
             @include icon('speech');
 
-            &::before {
+            [next=messages]:before {
               font-size: 2.5rem;
               padding-right: 0.85rem;
             }
@@ -213,10 +229,12 @@ member-info-groups {
         }
 
         sib-set-default[name='infos'] {
-          display: block;
+          padding: 0.4rem 2rem 3.7rem;
-          padding: 0 1.7rem;
-
           @extend %member-info;
+
+          sib-multiple[name='skills'] {
+            margin: 1.6rem 0;
+          }
         }
       }
     }

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 ${value ? `<img src="${value}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}