ui : member card

src/page-members.pug

@@ -1,4 +1,5 @@
 div.containerH.reverse
+
   div.containerV.fix
     div.containerH.containerCenter.how-link
       div.containerV.fix.icon-idea
@@ -12,35 +13,20 @@ div.containerH.reverse
     h1 Members
     sib-display#profiles-list(
       data-src=`${sdn}/members/`,
-      data-fields='header, infos, group, role'
-      set-header='avatar, user, pseudonym, bio',
-      set-infos='cell, roles, user.email, foaf:homepage, skills',
-      set-pseudonym='before-pseudo, pseudo',
-      label-skills='skill'
+      data-fields='header, infos, group, role',
+      set-header='avatar, user, pseudonym, bio, user.email',
+      set-infos='cell, roles, foaf:homepage, skills',
+      set-pseudonym='before-pseudo,pseudo'
+      label-skills='skill',
       value-before-pseudo='@',
+      value-send='SEND A MESSAGE',
       widget-avatar='sib-display-img',
       widget-user='hdapp-userinfo',
-      widget-user.email='sib-display-mailto',
+      widget-user.email='hdapp-mail',
       widget-foaf:hompage='hdapp-hyperlink',
       widget-cell='hdapp-usercell',
       widget-roles='sib-display-lookuplist',
       widget-skills='sib-display-lookuplist',
-      set-name='pseudo,user.first_name',
-      search-fields='pseudo, skills, roles',
-      next='member')
-
-    //- sib-display#profiles-list(
-      data-src=`${sdn}/users/`,
-      data-fields='header, footer'
-      set-header='member.avatar, member.user, pseudonym, member.bio',
-      set-footer='member.cell, member.roles, member.skills',
-      set-pseudonym='before-pseudo, pseudo',
-      value-before-pseudo='@',
-      widget-member.avatar='sib-display-img',
-      widget-member.user='hdapp-userinfo',
-      widget-member.cell='hdapp-usercell',
-      widget-member.roles='sib-display-lookuplist',
-      widget-member.skills='sib-display-lookuplist',
-      set-searchset='last_name',
-      search-fields='searchset',
+      set-name='pseudo,user.first_name,user.last_name',
+      search-fields='name, skills, roles',
       next='member')

src/scripts/hd-widgets.js

@@ -53,28 +53,12 @@ document.addEventListener('WebComponentsReady', function(event) {
   }
   customElements.define('hdapp-usercell', HDAppCell);
 
-  class HDAppClient extends SIBWidget {
+  class HDAppMail extends SIBWidget {
     get template() {
-
-      return `<div>${this.value}</div>`;
+      return `<a href="mailto:${this.value}"><div class="icon-envelope"></div><div>SEND A MESSAGE</div></a>`;
     }
-
-    render() {
-      this.innerHTML = this.template;
-    }
-
-    // get template() {
-    //   return `<img name="${this.name}" src="${this.value.logo}"/>`;
-    // }
-    //
-    // render() {
-    //   store.get(this.value).then(value => {
-    //     this._value = value;
-    //     this.innerHTML = this.template;
-    //   });
-    // }
   }
-  customElements.define('hdapp-client', HDAppClient);
+  customElements.define('hdapp-mail', HDAppMail);
 
   class HDAppMember extends SIBWidget {
     get template() {

src/styles/content.scss

@@ -66,11 +66,10 @@
 #profiles-list sib-display-lookuplist,
 sib-display-lookuplist {
   &[name$='skills'] {
-    display: block;
+    display: flex;
 
     li,
     ul {
-      display: block;
       margin: 0;
       padding: 0;
       list-style: none;
@@ -85,8 +84,11 @@ sib-display-lookuplist {
     li {
       padding: 0.5em 1em;
       border: 1px solid;
-      border-radius: 0.25em;
+      border-radius: 2em;
       margin: 0.25em;
+      background-color: $color-yellow;
+      color: $color-white;
+      font-weight: bold;
     }
   }
 }
@@ -164,7 +166,8 @@ sib-display-lookuplist {
 
 #profiles-list > div > sib-display,
 sib-display#member-info {
-  display: block;
+  display: flex;
+  flex-direction: column;
   position: relative;
   @extend %frame;
   padding: 1em;
@@ -174,50 +177,34 @@ sib-display#member-info {
   }
 
   sib-display-img {
-    $width: 55%;
-    display: block;
-    position: relative;
-    width: $width;
-    padding-bottom: $width;
-    height: 0;
-    margin: 2em auto;
-
     img {
-      display: block;
-      position: absolute;
-      width: 100%;
-      height: 100%;
       border-radius: 100%;
-      object-fit: cover;
-      object-position: center;
     }
   }
 
   div[name='header'] {
-    // border-top: 2em solid $color-grey-light;
     border-bottom: 1px solid $color-grey-light;
     padding-bottom: 1em;
-    margin: -0.5em;
     padding: 0.5em;
     margin-bottom: 1em;
-    text-align: center;
+    display: flex;
+    flex-direction: column;
+    >*{
+      display: flex;
+      justify-content: center;
+      flex-basis: content;
+    }
   }
 
   hdapp-userinfo {
     @extend h1;
   }
 
-  div[name='pseudonym'] {
-    div {
-      display: inline;
-    }
-  }
-
   [name=infos] {
     margin: 2em 0;
 
     > * {
-      display: block;
+    //  display: block;
       margin: 0.5em 0;
     }
   }
@@ -229,10 +216,23 @@ sib-display#member-info {
   ul[name$='cell'] * {
     @include icon('location-pin');
   }
+  [name$='user'] {
+    margin-bottom: 0em;
+  }
+  sib-display-div[name$='bio'] {
+    margin-top: 1em;
+    flex-basis : 5em;
+  }
 
-  sib-display-mailto {
-    display: block;
-    @include icon('envelope');
+  a[href^='mailto'] {
+    display: flex;
+    border-radius: 25px;
+    border-style: solid;
+    border-color: $color-blue-light;
+    color: $color-blue-light;
+    margin: 1em;
+    padding: 1em;
+    text-decoration:none;
   }
 
   sib-display-tel {

src/styles/variables.scss

@@ -6,7 +6,8 @@ $color-grey-light2: #d8d8d8;
 $color-grey-light: #f0f3f6;
 $color-yellow: #ffb700;
 $color-yellow-light: #ffd759;
-$color-purple-dark: #41394c;
+$color-purple-dark: #3C3F57;
+$color-blue-light: #6259E5;
 
 %shadow {
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);

www/lib/sib-core

@@ -1 +1 @@
-Subproject commit c876ae44e88d09b6862c878f53abdbf5d210fe52
+Subproject commit ca1e0e35196b9ea1c235e81ad93987d115832188