style members & jobs

.gitignore

@@ -2,7 +2,7 @@
 /www/index.html
 /www/styles/
 /www/scripts/
-/www/lib
+/www/lib/
 !/www/lib/sib-core
 !/www/lib/sib-router
 !/www/lib/sib-chat

src/page-job-offers.pug

@@ -27,7 +27,8 @@ script.
   });
 
 div
-  h1 Job offers
+  h1 New offers  
+    span //  Here you can find and post offers
   sib-display#offers-list(
     data-src=`${sdn}/job-offers/`,
     data-fields='author, title, description, skills',

src/page-members.pug

@@ -1 +1,72 @@
-div member
+script.
+  document.addEventListener("WebComponentsReady", function(event) { 
+    class HDAppUserInfo extends SIBDisplayLookupList {
+      get parentElement() {return "div"}
+      getTemplate(value, index) {
+        var firstname, lastname, email;
+
+        if(typeof value == "object")
+          if(Object.keys(value).length > 1) {
+            firstname = value.first_name;
+            lastname  = value.last_name;
+            email     = value.email;
+          }
+          else {
+            store.get(value).then(resource => {
+                this.value.push(resource);
+                this.render();
+            });
+            if(Array.isArray(this.value))this.value.splice(this.value.indexOf(value), 1);
+            else this.value = [];
+            return '';
+          }
+        return `<div id="${firstname}-${lastname}">${firstname} ${lastname}</div>`;
+                // + `<div id="${email}">${email}</div>`;
+      }
+    }
+    customElements.define('hdapp-userinfo', HDAppUserInfo);
+
+    class HDAppCell extends SIBDisplayLookupList {
+      get parentElement() {return "div"}
+      getTemplate(value, index) {
+        var city, country;
+
+        if(typeof value == "object")
+          if(Object.keys(value).length > 1) {
+            city      = value.city;
+            country   = value.country;
+          }
+          else {
+            store.get(value).then(resource => {
+                this.value.push(resource);
+                this.render();
+            });
+            if(Array.isArray(this.value))this.value.splice(this.value.indexOf(value), 1);
+            else this.value = [];
+            return '';
+          }
+        return `<span id="${city}-${country}">${city} ${country}</span>`;
+      }
+    }
+    customElements.define("hdapp-usercell", HDAppCell);
+  });
+
+div
+  h1 Members
+  sib-display#profiles-list(
+    data-src=`${sdn}/members/`,
+    data-fields='header, cell, skills',
+    set-header='avatar, user, pseudonym, bio'
+    set-pseudonym='before-pseudo, pseudo'
+    value-before-pseudo='@',
+    widget-avatar='sib-display-img',
+    widget-user='hdapp-userinfo',
+    widget-cell='hdapp-usercell',
+    widget-skills='sib-display-lookuplist',
+    set-searchset='user.first_name, user.last_name',
+    search-fields='searchset',
+    next='member'
+  )
+
+
+

src/styles/content.scss

@@ -0,0 +1,146 @@
+// job offers
+#offers-list {
+  > div {
+    > sib-display {
+      display: block;
+      margin: 1em 0;
+      @extend %shadow;
+      background-color: $color-white;
+      padding: 0.5em 1em;
+      &:nth-child(odd) {
+        background-color: $color-white;
+      }
+    }
+  }
+}
+
+// members
+
+%member {
+  display: grid;
+  margin-top: 1em;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-gap: 1em;
+  label {
+    display: none;
+  }
+  > sib-display {
+    display: block;
+    position: relative;
+    background-color: $color-white;
+    @extend %shadow;
+    padding: 0.5em;
+    cursor: pointer;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: scale3d(0, 0, 1);
+      transition: transform 0.3s ease-out 0s;
+      background: #eac1;
+      content: '';
+      pointer-events: none;
+    }
+
+    &::before {
+      transform-origin: left top;
+    }
+
+    &::after {
+      transform-origin: right bottom;
+
+      background: #ace1;
+    }
+
+    &:hover,
+    &:focus {
+      &::before,
+      &::after {
+        transform: scale3d(1, 1, 1);
+      }
+    }
+  }
+}
+
+#profiles-list {
+  display: block;
+  sib-form {
+    display: block;
+    input[type='reset'] {
+      display: none;
+    }
+  }
+  div[name='header'] {
+    border-top: 2em solid $color-grey-light;
+    border-bottom: 1px solid $color-grey-light;
+    padding-bottom: 1em;
+    margin-bottom: 1em;
+    text-align: center;
+  }
+
+  > div {
+    @extend %member;
+  }
+  sib-display-img {
+    display: block;
+    position: relative;
+    width: 80%;
+    height: 0;
+    padding-bottom: 80%;
+    margin: 10%;
+    img {
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+
+  hdapp-userinfo {
+    display: block;
+    color: $color-black;
+    font-size: 1.1em;
+    margin: 0.5em;
+    ul,
+    li {
+      display: block;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+  }
+
+  div[name='pseudonym'] {
+    font-size: 0.8em;
+    div {
+      display: inline;
+    }
+  }
+}
+sib-display-lookuplist[name='skills'] {
+  ul,
+  li {
+    display: block;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -0.25em;
+  }
+  li {
+    padding: 0.5em 1em;
+    border: 1px solid;
+    border-radius: 0.25em;
+    margin: 0.25em;
+  }
+}

src/styles/icons.scss

@@ -250,7 +250,6 @@ $icons: (
   social-steam: '\e620',
 );
 
-
 @each $name, $code in $icons {
   .icon-#{$name} {
     &:before {
@@ -261,4 +260,4 @@ $icons: (
 @mixin icon($code) {
   @extend %icon;
   @extend .icon-#{$code};
-}
+}

src/styles/index.scss

@@ -1,10 +1,9 @@
 @charset "UTF-8";
-@import
-	'icons',
-	'variables',
-	'functions',
-	'mixins',
-	'main';
-
-@import 'menu'
 
+@import 'icons';
+@import 'variables';
+@import 'functions';
+@import 'mixins';
+@import 'main';
+@import 'content';
+@import 'menu';

src/styles/main.scss

@@ -8,6 +8,7 @@ html {
   font-family: Open Sans, sans-serif;
   font-size: 13px;
   background-color: $color-grey-light;
+  color: $color-grey;
 }
 
 #header {
@@ -36,6 +37,25 @@ body {
   flex: 1 1 0px;
 }
 
-h1,h2,h3,h4,h5,h6{
-    color: $color-black;
-}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $color-black;
+}
+
+h1{
+  font-size: 1.23em;
+  span{
+    font-weight: normal;
+  }
+}
+h2{
+  font-size: 1.16em;
+}
+h3{
+  font-size: 1.12em;
+}
+

src/styles/menu.scss

@@ -47,9 +47,9 @@
 #menu-items {
   > * {
     display: block;
-    border-top: 1px solid $color-grey;
+    border-top: 1px solid #ddd;
     &:last-child {
-      border-bottom: 1px solid $color-grey;
+      border-bottom: 1px solid #ddd;
     }
     sib-route {
       display: block;
@@ -74,9 +74,8 @@
         padding: 0.7em;
         transform: perspective(1000px) translateZ(1px) scale(1);
         will-change: transform;
-        transition: 
-          all .3s ease,
-          transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
+        transition: all 0.3s ease,
+          transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
       }
       width: max-content;
       padding: 2em;
@@ -127,7 +126,7 @@
     }
   }
   > div {
-    margin: 0.5em;
+    margin: 2.6em;
     flex: 1 1 0px;
   }
 }

src/styles/mixins.scss

@@ -96,9 +96,9 @@
     background-image: linear-gradient(to #{$border}, $color, transparent);
     #{$border}: -$size;
     opacity: $opacity;
-    @if($border == top or $border == bottom) {
+    @if ($border == top or $border == bottom) {
       height: $size;
-    }@else{
+    } @else {
       width: $size;
     }
   }

src/styles/variables.scss

@@ -1,17 +1,21 @@
 $color-white: #fff;
-$color-black: #36383B;
-$color-grey: #898F95;
-$color-grey-light: #F0F3F6;
+$color-black: #36383b;
+$color-grey: #898f95;
+$color-grey-light: #f0f3f6;
 
-$color-yellow: #FFB700;
-$color-yellow-light: #FFD759;
+$color-yellow: #ffb700;
+$color-yellow-light: #ffd759;
 
-%button{
-  border-radius: 100em
+%button {
+  border-radius: 100em;
 }
 
-%button-yellow{
+%button-yellow {
   @extend %button;
   background-color: $color-yellow;
   color: $color-white;
+}
+
+%shadow{
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05);
 }