ui : member card

This commit is contained in:
simon louvet 2018-11-21 14:05:56 +01:00
parent 3e91d94a08
commit ddad1d7d0f
5 changed files with 47 additions and 76 deletions

View File

@ -1,4 +1,5 @@
div.containerH.reverse div.containerH.reverse
div.containerV.fix div.containerV.fix
div.containerH.containerCenter.how-link div.containerH.containerCenter.how-link
div.containerV.fix.icon-idea div.containerV.fix.icon-idea
@ -12,35 +13,20 @@ div.containerH.reverse
h1 Members h1 Members
sib-display#profiles-list( sib-display#profiles-list(
data-src=`${sdn}/members/`, data-src=`${sdn}/members/`,
data-fields='header, infos, group, role' data-fields='header, infos, group, role',
set-header='avatar, user, pseudonym, bio', set-header='avatar, user, pseudonym, bio, user.email',
set-infos='cell, roles, user.email, foaf:homepage, skills', set-infos='cell, roles, foaf:homepage, skills',
set-pseudonym='before-pseudo, pseudo', set-pseudonym='before-pseudo,pseudo'
label-skills='skill' label-skills='skill',
value-before-pseudo='@', value-before-pseudo='@',
value-send='SEND A MESSAGE',
widget-avatar='sib-display-img', widget-avatar='sib-display-img',
widget-user='hdapp-userinfo', widget-user='hdapp-userinfo',
widget-user.email='sib-display-mailto', widget-user.email='hdapp-mail',
widget-foaf:hompage='hdapp-hyperlink', widget-foaf:hompage='hdapp-hyperlink',
widget-cell='hdapp-usercell', widget-cell='hdapp-usercell',
widget-roles='sib-display-lookuplist', widget-roles='sib-display-lookuplist',
widget-skills='sib-display-lookuplist', widget-skills='sib-display-lookuplist',
set-name='pseudo,user.first_name', set-name='pseudo,user.first_name,user.last_name',
search-fields='pseudo, skills, roles', search-fields='name, 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',
next='member') next='member')

View File

@ -53,28 +53,12 @@ document.addEventListener('WebComponentsReady', function(event) {
} }
customElements.define('hdapp-usercell', HDAppCell); customElements.define('hdapp-usercell', HDAppCell);
class HDAppClient extends SIBWidget { class HDAppMail extends SIBWidget {
get template() { get template() {
return `<a href="mailto:${this.value}"><div class="icon-envelope"></div><div>SEND A MESSAGE</div></a>`;
return `<div>${this.value}</div>`;
} }
render() {
this.innerHTML = this.template;
} }
customElements.define('hdapp-mail', HDAppMail);
// get template() {
// return `<img name="${this.name}" src="${this.value.logo}"/>`;
// }
//
// render() {
// store.get(this.value).then(value => {
// this._value = value;
// this.innerHTML = this.template;
// });
// }
}
customElements.define('hdapp-client', HDAppClient);
class HDAppMember extends SIBWidget { class HDAppMember extends SIBWidget {
get template() { get template() {

View File

@ -66,11 +66,10 @@
#profiles-list sib-display-lookuplist, #profiles-list sib-display-lookuplist,
sib-display-lookuplist { sib-display-lookuplist {
&[name$='skills'] { &[name$='skills'] {
display: block; display: flex;
li, li,
ul { ul {
display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
@ -85,8 +84,11 @@ sib-display-lookuplist {
li { li {
padding: 0.5em 1em; padding: 0.5em 1em;
border: 1px solid; border: 1px solid;
border-radius: 0.25em; border-radius: 2em;
margin: 0.25em; 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, #profiles-list > div > sib-display,
sib-display#member-info { sib-display#member-info {
display: block; display: flex;
flex-direction: column;
position: relative; position: relative;
@extend %frame; @extend %frame;
padding: 1em; padding: 1em;
@ -174,50 +177,34 @@ sib-display#member-info {
} }
sib-display-img { sib-display-img {
$width: 55%;
display: block;
position: relative;
width: $width;
padding-bottom: $width;
height: 0;
margin: 2em auto;
img { img {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%; border-radius: 100%;
object-fit: cover;
object-position: center;
} }
} }
div[name='header'] { div[name='header'] {
// border-top: 2em solid $color-grey-light;
border-bottom: 1px solid $color-grey-light; border-bottom: 1px solid $color-grey-light;
padding-bottom: 1em; padding-bottom: 1em;
margin: -0.5em;
padding: 0.5em; padding: 0.5em;
margin-bottom: 1em; margin-bottom: 1em;
text-align: center; display: flex;
flex-direction: column;
>*{
display: flex;
justify-content: center;
flex-basis: content;
}
} }
hdapp-userinfo { hdapp-userinfo {
@extend h1; @extend h1;
} }
div[name='pseudonym'] {
div {
display: inline;
}
}
[name=infos] { [name=infos] {
margin: 2em 0; margin: 2em 0;
> * { > * {
display: block; // display: block;
margin: 0.5em 0; margin: 0.5em 0;
} }
} }
@ -229,10 +216,23 @@ sib-display#member-info {
ul[name$='cell'] * { ul[name$='cell'] * {
@include icon('location-pin'); @include icon('location-pin');
} }
[name$='user'] {
margin-bottom: 0em;
}
sib-display-div[name$='bio'] {
margin-top: 1em;
flex-basis : 5em;
}
sib-display-mailto { a[href^='mailto'] {
display: block; display: flex;
@include icon('envelope'); 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 { sib-display-tel {

View File

@ -6,7 +6,8 @@ $color-grey-light2: #d8d8d8;
$color-grey-light: #f0f3f6; $color-grey-light: #f0f3f6;
$color-yellow: #ffb700; $color-yellow: #ffb700;
$color-yellow-light: #ffd759; $color-yellow-light: #ffd759;
$color-purple-dark: #41394c; $color-purple-dark: #3C3F57;
$color-blue-light: #6259E5;
%shadow { %shadow {
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);

@ -1 +1 @@
Subproject commit c876ae44e88d09b6862c878f53abdbf5d210fe52 Subproject commit ca1e0e35196b9ea1c235e81ad93987d115832188