displaying skills: wip + styles on members list: wip

src/config.json

@@ -4,8 +4,8 @@
     "sdn": "https://test-paris.happy-dev.fr",
     "cdn": "https://cdn.happy-dev.fr",
     "xmpp": "https://jabber.happy-dev.fr/http-bind/",
+    "client_id": "833925"
     //"client_id": "499509"
-    "client_id": "299390"
   },
   "prod": {
     "sdn": "https://test-paris.happy-dev.fr",

src/page-members.pug

@@ -9,14 +9,15 @@ div.grid-layer
       data-src=`${sdn}/members/`,
       data-fields='header, infos, groups, role, more',
       set-header='picture, user, pseudonym, bio, send',
-      set-infos='cell, user.roles, user.email, phone, skills',
+      set-infos='cell, user.roles, user.email, phone, user.skills',
       set-pseudonym='before-pseudo,pseudo',
       value-before-pseudo='@',
       value-more='read more...',
-      template-more='hdapp-link-more',
       value-send='SEND A MESSAGE',
-      counter-template='${counter} members'
+      template-more='hdapp-link-more',
       template-send='chat-link',
+      widget-skills='sib-display-lookuplist',
+      counter-template='${counter} members',
       widget-picture='sib-display-img',
       widget-user='hdapp-userinfo',
       widget-roles='sib-display-lookuplist',

src/styles/main.scss

@@ -32,7 +32,7 @@ h6 {
   color: $color-black;
   font-weight: 600;
   padding: 0;
-  margin: 0.67em 0;
+  /*margin: 0.67em 0;*/
 
   span {
     font-weight: 400;

src/styles/members.scss

@@ -40,14 +40,15 @@
     }
 
     > sib-display {
+      color: $color-grey2;
       cursor: pointer;
       background-color: white;
       box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
       display: flex;
       flex-flow: column wrap;
-      padding: 1rem;
       margin-bottom: 2.5rem;
       @media(min-width: 56rem) {
+        height: 70rem;
         width: 30%;
       }
 
@@ -57,57 +58,95 @@
 
       div[name='header'] {
         border-bottom: 1px solid $color-grey-light;
-        padding-bottom: 1em;
-        padding: 0.5em;
-        margin-bottom: 1em;
+        padding: 0.5em 0 3em;
         display: flex;
         flex-direction: column;
 
         > * {
           display: flex;
-          justify-content: center;
           flex-basis: content;
+          justify-content: center;
         }
 
         sib-display-img {
           flex-basis:150px;
+          height: 300px;
+          margin: 1em auto;
+          width: 60%;
 
           img {
             border-radius: 100%;
-            width:150px;
-          }
+            width: 100%;
           }
+
         }
 
         hdapp-userinfo {
           @extend h1;
         }
 
-      [name=infos] {
-        margin: 2em 0;
+        sib-display-div[name$='bio'] {
+          flex-basis: 5em;
+          margin-top: 1.5em;
+        }
         
-        > * {
-          //  display: block;
-          margin: 0.5em 0;
+        [next=member-chat] {
+          align-self: center;
+          border: 1px solid $color-blue-light;
+          border-radius: 2em;
+          color: $color-blue-light;
+          font-size: 18px;
+          font-weight: bold;
+          padding: 0.6em 1.5em 0.4em;
+          @include icon('speech');
+  
+          &::before {
+            font-size: 25px;
+            padding-right: 0.5em;
+          }
         }
       }
       
-      ul[name$='roles'] * {
+      div[name='infos'] {
+        //padding: 1.5em 1.2em 3em;
+
+        * {
+          margin-top: 1.5em;
+
+          &::before {
+            color: $color-yellow;
+            font-size: 20px;
+            padding: 0 1em;
+          }
+        }
+        
+
+        [name$='cell'] * {
+          @include icon('atom');
+        }
+
+        [name$='roles'] * {
           @include icon('user');
         }
 
-      ul[name$='cell'] * {
-        @include icon('location-pin');
+        [name$='email'] * {
+          @include icon('envelope');
         }
 
+        [name$='phone'] * {
+          @include icon('phone');
+        }
+        
+        
+      }
+
+
+
+
       [name$='user'] {
         margin-bottom: 0em;
       }
 
-      sib-display-div[name$='bio'] {
-        margin-top: 1em;
-        flex-basis : 5em;
-      }
 
       a[href^='mailto'] {
         display: flex;