From 72a47b9cb61f8c6cfaf68fc769b850f158a43ff7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment?= Date: Sat, 29 Sep 2018 02:22:00 +0200 Subject: [PATCH] style members & jobs --- .gitignore | 2 +- src/page-job-offers.pug | 3 +- src/page-members.pug | 73 ++++++++++++++++++- src/styles/content.scss | 146 ++++++++++++++++++++++++++++++++++++++ src/styles/icons.scss | 3 +- src/styles/index.scss | 15 ++-- src/styles/main.scss | 26 ++++++- src/styles/menu.scss | 11 ++- src/styles/mixins.scss | 4 +- src/styles/variables.scss | 20 +++--- 10 files changed, 271 insertions(+), 32 deletions(-) create mode 100644 src/styles/content.scss diff --git a/.gitignore b/.gitignore index b3107b3..b9179d0 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 b1752c7..119aa34 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 27ac9fa..7ecd124 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 `
${firstname} ${lastname}
`; + // + `
${email}
`; + } + } + 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 `${city} ${country}`; + } + } + 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 0000000..fec8bf4 --- /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 434251a..77bc56c 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 ebca3ee..0b61e6f 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 2ad4686..5f930f5 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 499979f..168ec6d 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 9f2722d..9d77e86 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 ed98ad7..5f960a8 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