feature+ui(member-profile): Displaying available info of a user
Display available data Add styles + new icon Refactoring Bonus: new widget for placeholder on sib-dropdwn + styles
This commit is contained in:
Gaëlle Morin
parent
bb2efbeb9a
commit
9c4d5a52ed
|
|
@ -34,7 +34,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
|
|||
|
||||
//- cdn
|
||||
//- don't forget to change version in hd-widgets.js
|
||||
script(type="module" src="https://unpkg.com/@startinblox/core@0.5")
|
||||
script(type="module" src="https://unpkg.com/@startinblox/core@0.5.24")
|
||||
script(type="module" src="https://unpkg.com/@startinblox/router@latest")
|
||||
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ html(lang="en")
|
|||
#member-chat(hidden)
|
||||
include page-member-chat.pug
|
||||
#member(hidden)
|
||||
include page-member.pug
|
||||
include page-member-profile.pug
|
||||
#job-offers(hidden)
|
||||
include page-job-offers.pug
|
||||
#job-offer-create(hidden)
|
||||
|
|
|
|||
|
|
@ -1,21 +1,30 @@
|
|||
sib-link(next="members" class="backlink") Back to directory
|
||||
|
||||
template#chat-link
|
||||
sib-link(next="member-chat") ${value}
|
||||
sib-display#member-info(
|
||||
data-fields='available, header, name, pseudonym, infos, user.skills',
|
||||
set-header='user.account.picture',
|
||||
set-infos='city, country, user.roles, user.email, send, phone, foaf:homepage, ',
|
||||
set-name='user.first_name, user.last_name',
|
||||
set-pseudonym='before-pseudo, pseudo',
|
||||
value-before-pseudo='@',
|
||||
value-send='SEND A MESSAGE',
|
||||
template-send='chat-link',
|
||||
widget-available='hdapp-available',
|
||||
widget-user.account.picture='sib-display-img',
|
||||
widget-user='hdapp-userinfo',
|
||||
widget-phone='sib-display-tel',
|
||||
widget-foaf:homepage='hdapp-hyperlink',
|
||||
widget-user.email='sib-display-mailto',
|
||||
widget-user.roles='sib-display-lookuplist',
|
||||
widget-user.skills='sib-display-lookuplist',
|
||||
bind-resources
|
||||
)
|
||||
|
||||
template#member-status
|
||||
div#member-status ${value == true ? '<span class="status-one">Available</span>' : '<span class="status-two">Busy</span>'}
|
||||
|
||||
div#member-profile
|
||||
sib-display(
|
||||
data-fields='member-profile__bio, member-profile__skills, member-profile__xp',
|
||||
|
||||
set-member-profile__bio ='user.profile.available, member-img, member-profile, user.username, bio, infos, send',
|
||||
set-member-profile__skills='user.skills',
|
||||
set-member-profile__xp='',
|
||||
set-member-img='user.account.picture',
|
||||
set-member-profile='user.first_name, user.last_name, user.groups',
|
||||
set-infos='city, user.groups, user.email, phone, foaf:homepage',
|
||||
|
||||
template-user.profile.available='member-status',
|
||||
template-send='chat-link',
|
||||
|
||||
value-send='SEND A MESSAGE',
|
||||
|
||||
widget-user.account.picture='sib-display-img',
|
||||
widget-user.groups='sib-display-lookuplist',
|
||||
widget-user.skills='sib-display-lookuplist',
|
||||
|
||||
bind-resources
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,14 +1,5 @@
|
|||
|
||||
sib-router#member-router(default-route='member-profile')
|
||||
sib-route(name='member-profile')
|
||||
div Profile
|
||||
sib-ac-checker(permission='acl:Write' bind-resources)
|
||||
sib-route(name='member-edit')
|
||||
div Edit
|
||||
#member-views-container
|
||||
sib-link(next="members" class="back") Back to directory
|
||||
div
|
||||
#member-profile
|
||||
//-
|
||||
#container-member
|
||||
sib-link(next="members" class="back") Back to directory
|
||||
div#member-profile
|
||||
include page-member-profile.pug
|
||||
#member-edit
|
||||
include page-member-edit.pug
|
||||
|
|
|
|||
|
|
@ -24,12 +24,17 @@ div.grid-layer
|
|||
search-range-groups=`${sdn}/groups/`,
|
||||
search-range-skills=`${sdn}/skills/`,
|
||||
search-fields='name, groups, skills',
|
||||
|
||||
set-name='pseudo, user.first_name, user.last_name',
|
||||
search-label-name='Search by lastname, firstname...',
|
||||
search-widget-name='sib-form-placeholder-text',
|
||||
|
||||
search-label-groups='Filter by role',
|
||||
search-label-name='Search by lastname, firstname...',
|
||||
search-label-skills='Search by skills',
|
||||
|
||||
search-widget-groups='sib-form-placeholder-dropdown',
|
||||
search-widget-name='sib-form-placeholder-text',
|
||||
search-widget-skills='sib-form-placeholder-text',
|
||||
|
||||
next='member')
|
||||
div.grid-layer-links.containerV
|
||||
div.containerH.containerCenter.how-link
|
||||
|
|
|
|||
|
|
@ -70,99 +70,56 @@
|
|||
@include pos();
|
||||
}
|
||||
}
|
||||
// member-profile && members
|
||||
|
||||
sib-display#member-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
@extend %frame;
|
||||
padding: 1.7rem;
|
||||
/*.members-list-condensed {
|
||||
img {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
border-radius: 100%;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
}
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div[name='header'] {
|
||||
border-bottom: 1px solid $color-anti-flash-white;
|
||||
padding-bottom: 1.7rem;
|
||||
padding: 0.85rem;
|
||||
margin-bottom: 1.7rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
>*{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-basis: content;
|
||||
> div > sib-display > div {
|
||||
display: grid;
|
||||
grid-template-columns: 0.5fr 2fr;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
grid-column-gap: 3rem;
|
||||
align-items: center;
|
||||
|
||||
div[name="teammate-img"] {
|
||||
background: blue;
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
sib-display-img {
|
||||
flex-basis:150px;
|
||||
img {
|
||||
border-radius: 100%;
|
||||
width:150px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
ul{
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
list-style-type: none;
|
||||
}
|
||||
>[name$="user"]{
|
||||
color: $color-dark-lava;
|
||||
}
|
||||
>[name$="avatar"]{
|
||||
grid-column-start: first;
|
||||
grid-column-end: middle;
|
||||
grid-row-start: first;
|
||||
grid-row-end: end;
|
||||
}
|
||||
}
|
||||
|
||||
hdapp-userinfo {
|
||||
@extend h1;
|
||||
}
|
||||
|
||||
/*
|
||||
[name=infos] {
|
||||
//margin: 2em 0;
|
||||
|
||||
> * {
|
||||
// display: block;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
ul[name$='roles'] * {
|
||||
@include icon('user');
|
||||
}
|
||||
|
||||
ul[name$='cell'] * {
|
||||
@include icon('location-pin');
|
||||
}
|
||||
[name$='user'] {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
sib-display-div[name$='bio'] {
|
||||
margin-top: 1em;
|
||||
flex-basis : 5em;
|
||||
}
|
||||
|
||||
a[href^='mailto'] {
|
||||
display: flex;
|
||||
border-radius: 25px;
|
||||
border-style: solid;
|
||||
border-color: $color-majorelle-blue;
|
||||
color: $color-majorelle-blue;
|
||||
margin: 1.7rem;
|
||||
padding: 1.7rem;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
sib-display-tel {
|
||||
display: block;
|
||||
@include icon('phone');
|
||||
}
|
||||
|
||||
hdapp-hyperlink {
|
||||
display: block;
|
||||
@include icon('link');
|
||||
}
|
||||
|
||||
sib-display-div[name$='foaf:homepage'] * {
|
||||
@include icon('link');
|
||||
}
|
||||
sib-display-div[name$='more']{
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
// ul {
|
||||
// padding-left: 1em;
|
||||
// }
|
||||
}*/
|
||||
|
||||
hdapp-available {
|
||||
display: block;
|
||||
|
|
@ -198,13 +155,11 @@ hdapp-available {
|
|||
|
||||
sib-link[next='member-chat'] {
|
||||
border-style: solid;
|
||||
margin: 1.7rem;
|
||||
display: flex;
|
||||
border-radius: 25px;
|
||||
border-style: solid;
|
||||
border-color: $color-majorelle-blue;
|
||||
color: $color-majorelle-blue;
|
||||
margin: 1.7rem;
|
||||
padding: 1.7rem;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,14 +28,20 @@
|
|||
}
|
||||
|
||||
select {
|
||||
background: white;
|
||||
background: $color-white;
|
||||
background-image: url("/images/chevron-down.png");
|
||||
background-position: 96% 60%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 14px 9px;
|
||||
box-sizing: border-box;
|
||||
color: $color-taupe-gray;
|
||||
display: inline-block;
|
||||
padding: 0.68rem;
|
||||
width: 100%;
|
||||
|
||||
> option:not(:first-child) {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-label-text {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,9 @@ $mdi-icons: (
|
|||
account-outline: '\F013',
|
||||
atom: '\F767',
|
||||
cellphone-iphone: '\F120',
|
||||
check: '\F12C'
|
||||
check: '\F12C',
|
||||
email-outline: '\F1F0',
|
||||
link-variant: '\F339'
|
||||
);
|
||||
|
||||
%mdi,
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
|
||||
@import 'group-profile';
|
||||
@import 'job-offers';
|
||||
@import 'member-profile';
|
||||
@import 'members';
|
||||
@import 'project-profile';
|
||||
|
||||
|
|
|
|||
|
|
@ -118,7 +118,8 @@ button {
|
|||
/* sub menu (right menu) */
|
||||
#mainContainer {
|
||||
display: flex;
|
||||
> div {
|
||||
> div#project,
|
||||
> div#circle {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
|
@ -147,7 +148,6 @@ sib-link.back {
|
|||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
@include icon('arrow-left-circle');
|
||||
}
|
||||
|
||||
.containerH {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,160 @@
|
|||
#member {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
.backlink {
|
||||
font-size: 1.5rem;
|
||||
margin: 2rem 0 0 2rem;
|
||||
@extend %backlink;
|
||||
|
||||
&::before {
|
||||
font-size: 2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#member-profile {
|
||||
background-color: $color-white;
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
|
||||
margin: 2rem 1rem 5rem 2rem;
|
||||
min-height: 100vh;
|
||||
|
||||
div[name='member-profile__bio'] {
|
||||
border-bottom: 1px solid $color-link-water;
|
||||
display: grid;
|
||||
grid-template-areas: "avatar name name name status"
|
||||
"avatar pseudo pseudo pseudo status"
|
||||
"avatar bio bio bio status"
|
||||
"avatar list list list button"
|
||||
"avatar list list list button";
|
||||
padding: 4.5rem;
|
||||
|
||||
div[name='member-img'] {
|
||||
background-color: $color-bombay;
|
||||
border-radius: 50%;
|
||||
grid-area: avatar;
|
||||
height: 34vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 34vh;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
div[name='member-profile'] {
|
||||
align-items: flex-start;
|
||||
align-self: end;
|
||||
display: flex;
|
||||
grid-area: name;
|
||||
|
||||
> sib-display-div[name^='user.'] {
|
||||
color: $color-dark-lava;
|
||||
font-weight: bold;
|
||||
@extend h1;
|
||||
}
|
||||
|
||||
sib-display-lookuplist[name='user.groups'] {
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> ul {
|
||||
margin-block-end: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sib-display-div[name='user.username'] {
|
||||
grid-area: pseudo;
|
||||
|
||||
div[name='user.username']::before {
|
||||
content: '@';
|
||||
}
|
||||
}
|
||||
|
||||
sib-display-div[name='bio'] {
|
||||
grid-area: bio;
|
||||
}
|
||||
|
||||
div[name='infos'] {
|
||||
grid-area: list;
|
||||
|
||||
@extend %member-info;
|
||||
}
|
||||
|
||||
#member-status {
|
||||
align-self: flex-end;
|
||||
color: $color-majorelle-blue;
|
||||
grid-area: status;
|
||||
justify-self: flex-end;
|
||||
|
||||
> span {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: 600;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
> span.status-one {
|
||||
@include ci('awareness');
|
||||
|
||||
&::before {
|
||||
border-bottom: 2px solid $color-selective-yellow;
|
||||
font-size: 7.3rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
> span.status-two {
|
||||
@include ci('armor');
|
||||
|
||||
&::before {
|
||||
border-bottom: 2px solid $color-selective-yellow;
|
||||
font-size: 7.3rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[next=member-chat] {
|
||||
align-self: flex-end;
|
||||
border: 1px solid $color-majorelle-blue;
|
||||
border-radius: 2em;
|
||||
color: $color-majorelle-blue;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
grid-area: button;
|
||||
justify-self: end;
|
||||
padding: 0.6em 1.5em 0.4em;
|
||||
@include icon('speech');
|
||||
|
||||
&::before {
|
||||
font-size: 25px;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div[name='member-profile__skills'] {
|
||||
|
||||
sib-display-lookuplist {
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,199 +1,166 @@
|
|||
#profiles-list {
|
||||
@extend .grid-layer;
|
||||
#members {
|
||||
|
||||
nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 2.4rem;
|
||||
justify-content: center;
|
||||
#profiles-list {
|
||||
@extend .grid-layer;
|
||||
|
||||
button {
|
||||
color: $color-anti-flash-white;
|
||||
|
||||
&:before {
|
||||
color: $color-dark-lava;
|
||||
@include icon('arrow-left-circle');
|
||||
}
|
||||
|
||||
&:disabled::before {
|
||||
color: $color-manatee;
|
||||
}
|
||||
}
|
||||
|
||||
button:nth-of-type(2) {
|
||||
order: 1;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
& > sib-form {
|
||||
grid-column-start: start;
|
||||
grid-column-end: middle;
|
||||
grid-row-start: start;
|
||||
grid-row-end: middle;
|
||||
}
|
||||
|
||||
& > div,
|
||||
& > nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
grid-column-start: start;
|
||||
grid-column-end: end;
|
||||
margin-bottom: 1.7rem;
|
||||
}
|
||||
|
||||
& > div {
|
||||
justify-content: space-between;
|
||||
|
||||
&:first-of-type {
|
||||
color: $color-quartz;
|
||||
font-weight: bold;
|
||||
justify-content: center;
|
||||
margin-bottom: 3.75rem;
|
||||
white-space: nowrap;
|
||||
|
||||
&::before, &::after {
|
||||
border-top: 1px solid $color-timberwolf;
|
||||
content: '';
|
||||
position: relative;
|
||||
top: 0.85rem;
|
||||
width: 35.2vw;
|
||||
}
|
||||
|
||||
&::before {
|
||||
right: 5.1rem;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 5.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
> sib-display {
|
||||
background-color: white;
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
|
||||
color: $color-rolling-stone;
|
||||
cursor: pointer;
|
||||
nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
margin-bottom: 2.5rem;
|
||||
padding-bottom: 10rem;
|
||||
@media(min-width: 56rem) {
|
||||
height: 62rem;
|
||||
width: 32%;
|
||||
}
|
||||
font-size: 2.4rem;
|
||||
justify-content: center;
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div[name='header'] {
|
||||
border-bottom: 1px solid $color-anti-flash-white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.85rem 0 3.4rem;
|
||||
|
||||
> *:not(sib-display-img) {
|
||||
display: flex;
|
||||
flex-basis: content;
|
||||
justify-content: center;
|
||||
button {
|
||||
color: $color-anti-flash-white;
|
||||
|
||||
&:before {
|
||||
color: $color-dark-lava;
|
||||
@include icon('arrow-left-circle');
|
||||
}
|
||||
|
||||
sib-display-img {
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
height: 28vh;
|
||||
margin: 1.7rem auto;
|
||||
overflow: hidden;
|
||||
&:disabled::before {
|
||||
color: $color-manatee;
|
||||
}
|
||||
}
|
||||
|
||||
button:nth-of-type(2) {
|
||||
order: 1;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
& > sib-form {
|
||||
grid-column-start: start;
|
||||
grid-column-end: middle;
|
||||
grid-row-start: start;
|
||||
grid-row-end: middle;
|
||||
}
|
||||
|
||||
& > div,
|
||||
& > nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
grid-column-start: start;
|
||||
grid-column-end: end;
|
||||
margin-bottom: 1.7rem;
|
||||
}
|
||||
|
||||
& > div {
|
||||
justify-content: space-between;
|
||||
|
||||
&:first-of-type {
|
||||
color: $color-quartz;
|
||||
font-weight: bold;
|
||||
justify-content: center;
|
||||
margin-bottom: 3.75rem;
|
||||
white-space: nowrap;
|
||||
|
||||
&::before, &::after {
|
||||
border-top: 1px solid $color-timberwolf;
|
||||
content: '';
|
||||
position: relative;
|
||||
width: 28vh;
|
||||
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
top: 0.85rem;
|
||||
width: 35.2vw;
|
||||
}
|
||||
|
||||
ul[name='user'] {
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
@extend h1;
|
||||
&::before {
|
||||
right: 5.1rem;
|
||||
}
|
||||
|
||||
sib-display-div[name$='bio'] {
|
||||
display: flex;
|
||||
flex-basis: 3.5em;
|
||||
line-height: 1.6;
|
||||
margin: 2.5rem 0;
|
||||
padding: 0 6.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[next=member-chat] {
|
||||
align-self: center;
|
||||
border: 1px solid $color-majorelle-blue;
|
||||
border-radius: 3.4rem;
|
||||
color: $color-majorelle-blue;
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
padding: 1rem 2.55rem 0.7rem;
|
||||
@include icon('speech');
|
||||
|
||||
&::before {
|
||||
font-size: 2.5rem;
|
||||
padding-right: 0.85rem;
|
||||
}
|
||||
&::after {
|
||||
left: 5.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
div[name='infos'] {
|
||||
|
||||
> sib-display-div > div,
|
||||
> sib-display-lookuplist > ul {
|
||||
margin-bottom: 0;
|
||||
margin-top: 1.7rem;
|
||||
> sib-display {
|
||||
background-color: white;
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
|
||||
color: $color-rolling-stone;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
margin-bottom: 2.5rem;
|
||||
padding-bottom: 10rem;
|
||||
@media(min-width: 56rem) {
|
||||
height: 62rem;
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
color: $color-selective-yellow;
|
||||
font-size: 2rem;
|
||||
padding: 0 0.6em 0 1em;
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div[name='header'] {
|
||||
border-bottom: 1px solid $color-anti-flash-white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.85rem 0 3.4rem;
|
||||
|
||||
> *:not(sib-display-img) {
|
||||
display: flex;
|
||||
flex-basis: content;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
sib-display-img {
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
height: 28vh;
|
||||
margin: 1.7rem auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 28vh;
|
||||
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
ul[name='user'] {
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
@extend h1;
|
||||
}
|
||||
|
||||
sib-display-div[name$='bio'] {
|
||||
display: flex;
|
||||
flex-basis: 3.5em;
|
||||
line-height: 1.6;
|
||||
margin: 2.5rem 0;
|
||||
padding: 0 6.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[next=member-chat] {
|
||||
align-self: center;
|
||||
border: 1px solid $color-majorelle-blue;
|
||||
border-radius: 3.4rem;
|
||||
color: $color-majorelle-blue;
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
padding: 1rem 2.55rem 0.7rem;
|
||||
@include icon('speech');
|
||||
|
||||
&::before {
|
||||
font-size: 2.5rem;
|
||||
padding-right: 0.85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> sib-display-lookuplist[name$='groups'] > ul > li {
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
margin-left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div[name='infos'] {
|
||||
padding: 0 1.7rem;
|
||||
|
||||
> sib-display-lookuplist[name$='skills'] > ul {
|
||||
margin-left: 1.7rem;
|
||||
}
|
||||
|
||||
[name$='city'] * {
|
||||
@include mdi('atom');
|
||||
}
|
||||
|
||||
ul[name*='groups'] {
|
||||
@include mdi('account-outline');
|
||||
}
|
||||
|
||||
[name$='email'] * {
|
||||
@include icon('envelope');
|
||||
}
|
||||
|
||||
[name$='phone'] * {
|
||||
@include icon('phone');
|
||||
@extend %member-info;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,11 @@ $color-purple-dark: hsl(233, 18%, 29%);
|
|||
$color-spun-pearl: hsl(244, 10%, 70%);
|
||||
$color-majorelle-blue: hsl(244, 73%, 62%);
|
||||
|
||||
%backlink {
|
||||
color: #3d4057;
|
||||
@include icon('arrow-left-circle');
|
||||
}
|
||||
|
||||
%button {
|
||||
display: inline-block;
|
||||
padding: 0.85rem 2.55rem;
|
||||
|
|
@ -41,6 +46,51 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
|
|||
background-color: $color-white;
|
||||
}
|
||||
|
||||
%member-info {
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> sib-display-div > div,
|
||||
> sib-display-lookuplist > ul {
|
||||
margin-bottom: 0;
|
||||
margin-top: 1.7rem;
|
||||
|
||||
&::before {
|
||||
color: $color-selective-yellow;
|
||||
padding: 0 0.6em 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
> sib-display-lookuplist[name$='groups'] > ul > li {
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
margin-left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[name$='city'] * {
|
||||
@include mdi('atom');
|
||||
}
|
||||
|
||||
ul[name*='groups'] {
|
||||
@include mdi('account-outline');
|
||||
}
|
||||
|
||||
[name$='email'] * {
|
||||
@include mdi('email-outline');
|
||||
}
|
||||
|
||||
[name$='phone'] * {
|
||||
@include mdi('cellphone-iphone');
|
||||
}
|
||||
|
||||
[name="foaf:homepage"] * {
|
||||
@include mdi('link-variant');
|
||||
}
|
||||
}
|
||||
|
||||
%label {
|
||||
color: $color-spun-pearl;
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,14 @@
|
|||
<glyph glyph-name="check"
|
||||
unicode=""
|
||||
horiz-adv-x="512" d=" M448 298.6666666666667L192 42.6666666666667L74.6666666666667 160L104.7466666666667 190.0800000000001L192 103.04L417.92 328.7466666666667L448 298.6666666666667z" />
|
||||
|
||||
<glyph glyph-name="email-outline"
|
||||
unicode=""
|
||||
horiz-adv-x="512" d=" M85.3333333333333 362.6666666666667H426.6666666666667C450.1333333333334 362.6666666666667 469.3333333333333 343.4666666666667 469.3333333333333 320V64C469.3333333333333 40.5333333333333 450.1333333333334 21.3333333333334 426.6666666666667 21.3333333333334H85.3333333333333C61.6533333333333 21.3333333333334 42.6666666666667 40.5333333333333 42.6666666666667 64V320C42.6666666666667 343.68 61.6533333333333 362.6666666666667 85.3333333333333 362.6666666666667M256 213.3333333333334L426.6666666666667 320H85.3333333333333L256 213.3333333333334M85.3333333333333 64H426.6666666666667V269.4400000000001L256 162.9866666666667L85.3333333333333 269.4400000000001V64z" />
|
||||
|
||||
<glyph glyph-name="link-variant"
|
||||
unicode=""
|
||||
horiz-adv-x="512" d=" M225.92 161.92C234.6666666666667 153.6 234.6666666666667 139.9466666666667 225.92 131.6266666666667C217.6 123.3066666666667 203.9466666666667 123.3066666666667 195.6266666666667 131.6266666666667C154.0266666666667 173.2266666666667 154.0266666666667 240.8533333333333 195.6266666666667 282.4533333333334L271.1466666666667 357.9733333333334C312.7466666666667 399.5733333333333 380.3733333333334 399.5733333333333 421.9733333333334 357.9733333333334C463.5733333333333 316.3733333333334 463.5733333333333 248.7466666666667 421.9733333333334 207.1466666666667L390.1866666666667 175.36C390.4000000000001 192.8533333333334 387.6266666666667 210.3466666666667 381.6533333333334 226.9866666666667L391.6800000000001 237.2266666666667C416.8533333333334 262.1866666666667 416.8533333333334 302.7200000000001 391.6800000000001 327.6800000000001C366.7200000000001 352.8533333333334 326.1866666666667 352.8533333333334 301.2266666666667 327.6800000000001L225.9200000000001 252.3733333333334C200.7466666666667 227.4133333333334 200.7466666666667 186.8800000000001 225.9200000000001 161.9200000000001M286.0800000000001 252.3733333333334C294.4000000000001 260.6933333333334 308.0533333333334 260.6933333333334 316.3733333333334 252.3733333333334C357.9733333333334 210.7733333333334 357.9733333333334 143.1466666666667 316.3733333333334 101.5466666666667L240.8533333333334 26.0266666666668C199.2533333333334 -15.5733333333333 131.6266666666667 -15.5733333333333 90.0266666666667 26.0266666666668C48.4266666666667 67.6266666666667 48.4266666666667 135.2533333333335 90.0266666666667 176.8533333333334L121.8133333333334 208.6400000000001C121.6000000000001 191.1466666666668 124.3733333333334 173.6533333333334 130.3466666666667 156.8000000000001L120.3200000000001 146.7733333333334C95.1466666666667 121.8133333333334 95.1466666666667 81.2800000000001 120.3200000000001 56.3200000000001C145.2800000000001 31.1466666666667 185.8133333333334 31.1466666666667 210.7733333333334 56.3200000000001L286.0800000000001 131.6266666666667C311.2533333333334 156.5866666666667 311.2533333333334 197.12 286.0800000000001 222.08C277.3333333333334 230.4000000000001 277.3333333333334 244.0533333333334 286.0800000000001 252.3733333333334z" />
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 9.0 KiB |
Loading…
Reference in New Issue