displaying skills + styles + adjusting users' name and firstname

src/page-members.pug

@@ -5,18 +5,18 @@ div.grid-layer
     h1 Members
     sib-display#profiles-list(
       data-src=`${sdn}/members/`,
-      data-fields='header, infos, groups, user.skill',
+      data-fields='header, infos, groups',
       set-header='picture, user, pseudonym, bio, send',
       set-infos='cell, user.roles, user.email, phone, user.skills',
       set-pseudonym='before-pseudo,pseudo',
       value-before-pseudo='@',
       value-send='SEND A MESSAGE',
       template-send='chat-link',
-      widget-user.skills='sib-display-lookuplist',
       counter-template='${counter} members',
       widget-picture='sib-display-img',
-      widget-user='hdapp-userinfo',
       widget-roles='sib-display-lookuplist',
+      widget-user='hdapp-userinfo',
+      widget-user.skills='sib-display-lookuplist',
       
       search-range-roles=`${sdn}/role/`,
       search-range-skills=`${sdn}/skills/`,

src/styles/content.scss

@@ -26,35 +26,26 @@
 
 // skills
 
-#member-profile sib-display-lookuplist,
-sib-display-lookuplist {
-  &[name$='skills'] {
-    display: flex;
-
-    li,
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
+/*#member-profile sib-display-lookuplist {
+  display: flex;
 
-    ul {
-      display: flex;
-      flex-wrap: wrap;
-      margin: 1em -0.25em;
-    }
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+  }
 
-    li {
-      padding: 0.3em 1.2em;
-      border: 1px solid;
-      border-radius: 2em;
-      margin: 0.25em;
-      background-color: $color-yellow;
-      color: $color-white;
-      font-weight: bold;
-    }
+  li[name*='skills'] {
+    padding: 0.3em 1.2em;
+    border: 1px solid;
+    border-radius: 2em;
+    margin: 0.25em;
+    background-color: $color-yellow;
+    color: $color-white;
+    font-weight: bold;
   }
 }
+*/
 // group
 
 #group-profile {
@@ -159,15 +150,18 @@ sib-display#member-info {
     @extend h1;
   }
 
+  /*
   [name=infos] {
-    margin: 2em 0;
+    //margin: 2em 0;
 
     > * {
     //  display: block;
       margin: 0.5em 0;
     }
   }
+  */
 
+  
   ul[name$='roles'] * {
     @include icon('user');
   }
@@ -222,11 +216,11 @@ hdapp-available {
   }
 }
 
-#member-profile {
+/*#member-profile {
   ul {
     @include list-reset();
   }
-}
+}*/
 
 #member-profile {
   @include media('width>tablet') {

src/styles/main.scss

@@ -293,8 +293,27 @@ sib-trigger.back {
 }
 
 
-sib-display-lookuplist[name$="skills"] ul {
+/*sib-display-lookuplist[name$="skills"] {
+    display: flex;
+}*/
+
+sib-display-lookuplist {
   display: flex;
-  flex-wrap: wrap;
-  margin: 1em -0.25em;
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding: 0;
+  }
+
+  li[name*='skills'] {
+    padding: 0.3em 1.2em;
+    border: 1px solid;
+    border-radius: 2em;
+    margin: 0.25em;
+    background-color: $color-yellow;
+    color: $color-white;
+    font-weight: bold;
+  }
 }

src/styles/members.scss

 #profiles-list {
   @extend .grid-layer;
 
-  ul {
-    @include list-reset();
-  }
-
   & > sib-form {
     grid-column-start: start;
     grid-column-end: middle;
@@ -87,6 +83,11 @@
 
         hdapp-userinfo {
           @extend h1;
+          
+          ul {
+            padding: 0;
+            margin: 0;
+          }
         }
 
         sib-display-div[name$='bio'] {
@@ -117,7 +118,7 @@
       
       div[name='infos'] {
 
-        * {
+        > sib-display-div > div {
           margin-top: 1em;
 
           &::before {
@@ -126,6 +127,10 @@
             padding: 0 0.6em 0 1em;
           }
         }
+
+        ul {
+          margin-left: 1em;
+        }
         
         [name$='cell'] * {
           @include icon('chemistry');