ui : member card
This commit is contained in:
parent
3e91d94a08
commit
ddad1d7d0f
@ -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')
|
||||
|
@ -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 `<div>${this.value}</div>`;
|
||||
return `<a href="mailto:${this.value}"><div class="icon-envelope"></div><div>SEND A MESSAGE</div></a>`;
|
||||
}
|
||||
|
||||
render() {
|
||||
this.innerHTML = this.template;
|
||||
}
|
||||
|
||||
// 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);
|
||||
customElements.define('hdapp-mail', HDAppMail);
|
||||
|
||||
class HDAppMember extends SIBWidget {
|
||||
get template() {
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
|
@ -1 +1 @@
|
||||
Subproject commit c876ae44e88d09b6862c878f53abdbf5d210fe52
|
||||
Subproject commit ca1e0e35196b9ea1c235e81ad93987d115832188
|
Loading…
Reference in New Issue
Block a user