diff --git a/.gitignore b/.gitignore
index b3107b36a17784ef1994b7e0076b0d23f0bf02c2..b9179d0b404999b10b959af81c0867bcd25b6655 100644
--- a/.gitignore
+++ b/.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
\ No newline at end of file
diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug
index b1752c75ed343fd574ab4dba68099c9e96b5a9d3..119aa347caa242514a23ea92b6c213d055e0c357 100644
--- a/src/page-job-offers.pug
+++ b/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',
diff --git a/src/page-members.pug b/src/page-members.pug
index 27ac9fac094f6f61b64add4c1d78338c37e8256f..7ecd12410c24dbcf2a2623e63882e317bd0e05d1 100644
--- a/src/page-members.pug
+++ b/src/page-members.pug
@@ -1 +1,72 @@
-div member
\ No newline at end of file
+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'
+ )
+
+
+
diff --git a/src/styles/content.scss b/src/styles/content.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fec8bf4fe6af8e8d103777d22f0bf8052f30dd48
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 434251ad7ab590d927e9145a34ded303ec17f7f2..77bc56cd3b15ce991b240aca08e73ff0cb5c6e79 100644
--- a/src/styles/icons.scss
+++ b/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};
-}
\ No newline at end of file
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index ebca3eea73a12093e99e669113e2ebc585c97efb..0b61e6f5c45990f091640d0f1e2051b0db19d7b4 100644
--- a/src/styles/index.scss
+++ b/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';
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 2ad4686fb30466fba3169c6f22b3ff4f7aa271c0..5f930f570ada880ce9b40e21d7183284b07ca9dd 100644
--- a/src/styles/main.scss
+++ b/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;
-}
\ No newline at end of file
+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;
+}
+
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 499979f24f3c366cf18c9742b998ba98789960a8..168ec6d1037ec9d71091fd4fb786d9c37386950b 100644
--- a/src/styles/menu.scss
+++ b/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;
}
}
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index 9f2722d7b83b68a30fb1d82f2e187d607913e1a4..9d77e86c77469636ed04b21e528ba7227063cbd2 100644
--- a/src/styles/mixins.scss
+++ b/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;
}
}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index ed98ad712c9178f78fbd32ae1663e1baeb9d0c1a..5f960a833cee0ad3e115c585c1069ec6eb7c9f25 100644
--- a/src/styles/variables.scss
+++ b/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);
}
\ No newline at end of file