feature(members): MR!6 - Sib-directory added

- CSS finalised
- Default user picture added
- See https://git.happy-dev.fr/startinblox/components/sib-directory/merge_requests/6

src/dependencies.pug

@@ -11,7 +11,7 @@ script(
 script(src="/scripts/index.js")
 
 // Stylesheets
-link(rel='stylesheet', href='/lib/normalize.css')
+//link(rel='stylesheet', href='/lib/normalize.css')
 link(rel='stylesheet', href='/styles/index.css')
 link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext')
 link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i')
@@ -27,9 +27,9 @@ 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/component-chat@0.1")
 script(type="module" src="https://unpkg.com/@startinblox/component-notifications")
+script(type="module" src="https://unpkg.com/@startinblox/component-directory")
 

src/index.pug

@@ -21,8 +21,6 @@ html(lang="en")
             include page-members.pug
           #member-chat(hidden)
             include page-member-chat.pug
-          #member(hidden)
-            include page-member-profile.pug
           #job-offers(hidden)
             include page-job-offers.pug
           #job-offer-create(hidden)

src/menu-left.pug

@@ -9,7 +9,6 @@ nav#navbar
         )
       div.menu-label Members
       div.menu-icon.icon-people
-    sib-route.menu(hidden, name='member', id-prefix=`${sdn}/members/`)
     div.divider
     sib-route.menu(name='job-offers')
       div.menu-notification

src/page-member-profile.pug

-sib-link(next="members" class="backlink") Back to directory
-
-include templates/template-groups.pug
-include templates/template-skills.pug
-include templates/template-status.pug
-
-div#member-profile
-  sib-display(
-    data-fields='member-profile__bio, member-profile__skills, member-profile__xp',
-    
-    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.name, user.groups',
-    set-infos='city, user.groups, user.email, phone, foaf:homepage',
-    
-    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',
-    widget-user.profile.available='status-template',
-
-    multiple-user.groups,
-    multiple-user.skills,
-    
-    bind-resources
-  )
-

src/page-members.pug

-div.grid-layer
-
-  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/`,
-      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-name='Search by lastname, firstname...',
-      search-label-groups='Filter by role',
-      search-label-skills='Search by skills',
-      search-widget-name='sib-form-placeholder-text',
-      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'
-    )
-
-  div.grid-layer-links.containerV
-    div.containerH.containerCenter.how-link
-      div.containerV.fix.icon-idea
-      div.containerV.grow
-        sib-trigger() How To...
-    div.containerH.containerCenter.how-link
-      div.containerV.fix.icon-idea
-      div.containerV.grow
-        sib-trigger() How to complete my profile ?
+sib-directory(
+  data-src=`${sdn}/members/`,
+  range-groups=`${sdn}/groups/`,
+  range-skills=`${sdn}/skills/`
+)
 

src/scripts/index.js

@@ -6,6 +6,12 @@ document.addEventListener('DOMContentLoaded', function (event) {
   
   if (!navBar || !btnToggle) return;
 
+  document.querySelectorAll('img[name$="account.picture"]').forEach(function (e) {
+    if (!e.src || e.src == window.location) {
+      e.src = '/images/user.jpg';
+    }
+  });
+
   btnToggle.addEventListener('click', e => {
     navBar.classList.toggle('open');
     e.stopPropagation();

src/styles/filters.scss

 %filters {
-  border-bottom: 1px solid $color-gainsboro;
   display: grid;
   grid-gap: 0px 15px;
-  grid-template-columns: 50% 50%;
+  grid-template-columns: 1fr 1fr;
   grid-template-rows: 3.5em 3.5em;
 
   label {
@@ -29,7 +28,7 @@
   select {
     background: $color-white;
     background-image: url("/images/chevron-down.png");
-    background-position: 96% 60%;
+    background-position: right 12px top 60%;
     background-repeat: no-repeat;
     background-size: 14px 9px;
     box-sizing: border-box;
@@ -47,10 +46,15 @@
     display: flex;
     flex-direction: column;
   }
+
+  sib-form-placeholder-dropdown[name="skills"] {
+    grid-column-end: 3;
+    grid-column-start: 1;
+  }
 }
 
-#offers-list, #profiles-list {
-  & > sib-form {
+#offers-list, #members-list {
+  sib-form {
     @extend %filters;
   }
 }

src/styles/index.scss

 @charset "UTF-8";
 
 @import '../../node_modules/include-media/dist/include-media';
+@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css';
 @import 'icons/custom-icons';
 @import 'icons/icons';
 @import 'icons/material-design-icons';

src/styles/main.scss

-@import 'variables';
-
-[hidden] {
+[hidden],
+.hidden,
+.is-hidden {
   display: none !important;
 }
 
@@ -141,7 +141,6 @@ li {
 }
 
 sib-route,
-sib-trigger,
 sib-link {
   cursor: pointer;
 }
@@ -193,7 +192,7 @@ sib-link.back {
   display: grid;
   font-size: 16px;
   grid-template-columns: [start]auto[middle]25%[end];
-  grid-template-rows: [start]13em[middle]auto[end];
+  grid-template-rows: [start]7em[middle]auto[end];
 }
 .grid-layer-main {
   grid-column-start: start;
@@ -223,7 +222,11 @@ sib-multiple[name*='skills'] {
   color: $color-white;
   font-size: 1.4rem;
   font-weight: bold;
-  margin: 0.4rem 0.4rem 0.4rem 0;
+  margin: 0.4rem 1rem 0.4rem 0;
   padding: 0.5rem 2rem;
 }
 
+member-info-groups {
+  @extend %group;
+}
+

src/styles/member-profile.scss

-#member {
+#member-profile {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -14,7 +14,7 @@
     }
   }
 
-  #member-profile {
+  #member-info {
     background-color: $color-white;
     box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
     margin: 2rem 1rem 5rem 2rem;
@@ -23,29 +23,22 @@
     div[name='member-profile__bio'] {
       border-bottom: 1px solid $color-link-water;
       display: grid;
-      grid-template-areas: "avatar name name name status"
-                           "avatar pseudo pseudo pseudo status"
-                           "avatar bio bio bio status"
-                           "avatar list list list button"
-                           "avatar list list list button";
+      grid-template-areas: "avatar name status"
+                           "avatar pseudo status"
+                           "avatar bio status"
+                           "avatar list button";
+      grid-template-columns: 1fr 2fr 1fr;
       padding: 4.5rem;
 
       div[name='member-img'] {
-        background-color: $color-bombay;
-        border-radius: 50%;
         grid-area: avatar;
-        height: 34vh;
         overflow: hidden;
         position: relative;
-        width: 34vh;
         
         img {
-          height: 100%;
-          left: 0;
+          border-radius: 50%;
           object-fit: cover;
-          position: absolute;
-          top: 0;
-          width: 100%;
+          max-width: 90% !important;
         }
       }
 
@@ -64,10 +57,6 @@
         > sib-multiple[name$='groups'] {
           display: flex;
           padding-left: 1.4rem;
-
-          groups-name {
-            @extend %group;
-          }
         }
       }
 
@@ -89,7 +78,7 @@
         @extend %member-info;
       }
 
-      status-template[name$='available']{
+      member-status[name$='available']{
         align-self: flex-end;
         color: $color-majorelle-blue;
         grid-area: status;
@@ -149,12 +138,15 @@
     }
 
     div[name='member-profile__skills'] {
+      padding: 4.5rem;
+      
+      & ~ div[name='member-profile__skills'] {
+        padding-top: 0;
+      }
 
-      sib-display-lookuplist {
-
-        label {
-          display: none;
-        }
+      label {
+        font-weight: bold;
+        padding-bottom: 0.5rem;
       }
     }
   }

src/styles/members.scss

-#members {
+#members-list {
+  @extend .grid-layer;
 
-  #profiles-list {
+  #members-list__content {
     @extend .grid-layer;
 
     nav {
@@ -86,9 +87,8 @@
         display: flex;
         flex-flow: column wrap;
         margin-bottom: 2.5rem;
-        padding-bottom: 10rem;
+        padding-bottom: 2rem;
         @media(min-width: 56rem) {
-          height: 62rem;
           width: 32%;
         }
 
@@ -96,19 +96,33 @@
           display: none;
         }
 
+        sib-multiple[name$='groups'] {
+          align-items: flex-start;
+          display: flex;
+          justify-content: flex-end;
+          min-height: 3.4rem;
+          padding-left: 2.6rem;
+          padding-right: 2.6rem;
+          padding-top: 1.3rem;
+
+          > * {
+            margin: 0.3rem;
+          }
+        }
+
         div[name='header'] {
           border-bottom: 1px solid $color-anti-flash-white;
           display: flex;
           flex-direction: column;
           padding: 0.85rem 0 3.4rem;
 
-          > *:not(sib-display-img) {
+          >*:not(member-picture) {
             display: flex;
             flex-basis: content;
             justify-content: center;
           }
 
-          sib-display-img {
+          member-picture {
             background-color: $color-white;
             border-radius: 50%;
             height: 28vh;
@@ -163,14 +177,6 @@
           padding: 0 1.7rem;
 
           @extend %member-info;
-
-          sib-multiple[name$='groups'] {
-            display: flex;
-
-            > * {
-              margin-right: 0.4rem;
-            }
-          }
         }
       }
     }

src/styles/variables.scss

@@ -28,8 +28,13 @@ $color-spun-pearl:       hsl(244, 10%, 70%);
 $color-majorelle-blue:   hsl(244, 73%, 62%);
 
 %backlink {
-  color: #3d4057;
   @include icon('arrow-left-circle');
+  color: #3d4057;
+  text-decoration: underline;
+
+  &::before {
+    text-decoration: none;
+  }
 }
 
 %button {
@@ -63,6 +68,7 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
 %member-info {
 
   sib-multiple[name^='user.'],
+  > member-info > div,
   > sib-display-div > div {
     display: flex;
     flex-wrap: wrap;

src/templates/template-skills.pug

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

src/templates/template-status.pug

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