From ddad1d7d0f0167d4be1c48be38ee01071a0d9b80 Mon Sep 17 00:00:00 2001 From: simon louvet Date: Wed, 21 Nov 2018 14:05:56 +0100 Subject: [PATCH] ui : member card --- src/page-members.pug | 34 +++++++-------------- src/scripts/hd-widgets.js | 22 ++------------ src/styles/content.scss | 62 +++++++++++++++++++-------------------- src/styles/variables.scss | 3 +- www/lib/sib-core | 2 +- 5 files changed, 47 insertions(+), 76 deletions(-) diff --git a/src/page-members.pug b/src/page-members.pug index f853e37..eb481ce 100644 --- a/src/page-members.pug +++ b/src/page-members.pug @@ -1,4 +1,5 @@ div.containerH.reverse + div.containerV.fix div.containerH.containerCenter.how-link div.containerV.fix.icon-idea @@ -12,35 +13,20 @@ div.containerH.reverse h1 Members sib-display#profiles-list( data-src=`${sdn}/members/`, - data-fields='header, infos, group, role' - set-header='avatar, user, pseudonym, bio', - set-infos='cell, roles, user.email, foaf:homepage, skills', - set-pseudonym='before-pseudo, pseudo', - label-skills='skill' + data-fields='header, infos, group, role', + set-header='avatar, user, pseudonym, bio, user.email', + set-infos='cell, roles, foaf:homepage, skills', + set-pseudonym='before-pseudo,pseudo' + label-skills='skill', value-before-pseudo='@', + value-send='SEND A MESSAGE', widget-avatar='sib-display-img', widget-user='hdapp-userinfo', - widget-user.email='sib-display-mailto', + widget-user.email='hdapp-mail', widget-foaf:hompage='hdapp-hyperlink', widget-cell='hdapp-usercell', widget-roles='sib-display-lookuplist', widget-skills='sib-display-lookuplist', - set-name='pseudo,user.first_name', - search-fields='pseudo, skills, roles', - next='member') - - //- sib-display#profiles-list( - data-src=`${sdn}/users/`, - data-fields='header, footer' - set-header='member.avatar, member.user, pseudonym, member.bio', - set-footer='member.cell, member.roles, member.skills', - set-pseudonym='before-pseudo, pseudo', - value-before-pseudo='@', - widget-member.avatar='sib-display-img', - widget-member.user='hdapp-userinfo', - widget-member.cell='hdapp-usercell', - widget-member.roles='sib-display-lookuplist', - widget-member.skills='sib-display-lookuplist', - set-searchset='last_name', - search-fields='searchset', + set-name='pseudo,user.first_name,user.last_name', + search-fields='name, skills, roles', next='member') diff --git a/src/scripts/hd-widgets.js b/src/scripts/hd-widgets.js index 279e2b8..1417762 100644 --- a/src/scripts/hd-widgets.js +++ b/src/scripts/hd-widgets.js @@ -53,28 +53,12 @@ document.addEventListener('WebComponentsReady', function(event) { } customElements.define('hdapp-usercell', HDAppCell); - class HDAppClient extends SIBWidget { + class HDAppMail extends SIBWidget { get template() { - - return `
${this.value}
`; + return `
SEND A MESSAGE
`; } - - render() { - this.innerHTML = this.template; - } - - // get template() { - // return ``; - // } - // - // render() { - // store.get(this.value).then(value => { - // this._value = value; - // this.innerHTML = this.template; - // }); - // } } - customElements.define('hdapp-client', HDAppClient); + customElements.define('hdapp-mail', HDAppMail); class HDAppMember extends SIBWidget { get template() { diff --git a/src/styles/content.scss b/src/styles/content.scss index 85ca258..f45e0c2 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -66,11 +66,10 @@ #profiles-list sib-display-lookuplist, sib-display-lookuplist { &[name$='skills'] { - display: block; + display: flex; li, ul { - display: block; margin: 0; padding: 0; list-style: none; @@ -85,8 +84,11 @@ sib-display-lookuplist { li { padding: 0.5em 1em; border: 1px solid; - border-radius: 0.25em; + border-radius: 2em; margin: 0.25em; + background-color: $color-yellow; + color: $color-white; + font-weight: bold; } } } @@ -164,7 +166,8 @@ sib-display-lookuplist { #profiles-list > div > sib-display, sib-display#member-info { - display: block; + display: flex; + flex-direction: column; position: relative; @extend %frame; padding: 1em; @@ -174,50 +177,34 @@ sib-display#member-info { } sib-display-img { - $width: 55%; - display: block; - position: relative; - width: $width; - padding-bottom: $width; - height: 0; - margin: 2em auto; - img { - display: block; - position: absolute; - width: 100%; - height: 100%; border-radius: 100%; - object-fit: cover; - object-position: center; } } div[name='header'] { - // border-top: 2em solid $color-grey-light; border-bottom: 1px solid $color-grey-light; padding-bottom: 1em; - margin: -0.5em; padding: 0.5em; margin-bottom: 1em; - text-align: center; + display: flex; + flex-direction: column; + >*{ + display: flex; + justify-content: center; + flex-basis: content; + } } hdapp-userinfo { @extend h1; } - div[name='pseudonym'] { - div { - display: inline; - } - } - [name=infos] { margin: 2em 0; > * { - display: block; + // display: block; margin: 0.5em 0; } } @@ -229,10 +216,23 @@ sib-display#member-info { ul[name$='cell'] * { @include icon('location-pin'); } + [name$='user'] { + margin-bottom: 0em; + } + sib-display-div[name$='bio'] { + margin-top: 1em; + flex-basis : 5em; + } - sib-display-mailto { - display: block; - @include icon('envelope'); + a[href^='mailto'] { + display: flex; + border-radius: 25px; + border-style: solid; + border-color: $color-blue-light; + color: $color-blue-light; + margin: 1em; + padding: 1em; + text-decoration:none; } sib-display-tel { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 4bebda2..1fc8a29 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -6,7 +6,8 @@ $color-grey-light2: #d8d8d8; $color-grey-light: #f0f3f6; $color-yellow: #ffb700; $color-yellow-light: #ffd759; -$color-purple-dark: #41394c; +$color-purple-dark: #3C3F57; +$color-blue-light: #6259E5; %shadow { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15); diff --git a/www/lib/sib-core b/www/lib/sib-core index c876ae4..ca1e0e3 160000 --- a/www/lib/sib-core +++ b/www/lib/sib-core @@ -1 +1 @@ -Subproject commit c876ae44e88d09b6862c878f53abdbf5d210fe52 +Subproject commit ca1e0e35196b9ea1c235e81ad93987d115832188