autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature+ui(member-profile): Displaying available info of a user

Browse Source 
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
2019-02-25 16:58:27 +01:00
parent bb2efbeb9a
commit 9c4d5a52ed
15 changed files with 456 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/dependencies.pug
View File

@ -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")

2
src/index.pug
View File

@ -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)

47
src/page-member-profile.pug
View File

@ -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
)

17
src/page-member.pug
View File

@ -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

9
src/page-members.pug
View File

@ -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

125
src/styles/content.scss
View File

@ -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;
}

8
src/styles/filters.scss
View File

@ -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 {

4
src/styles/icons/material-design-icons.scss
View File

@ -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,

1
src/styles/index.scss
View File

@ -16,6 +16,7 @@
@import 'group-profile';
@import 'job-offers';
@import 'member-profile';
@import 'members';
@import 'project-profile';

4
src/styles/main.scss
View File

@ -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 {

160
src/styles/member-profile.scss Normal file
View File

@ -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;
}
}
}
}
}

0
src/styles/member.scss
View File

321
src/styles/members.scss
View File

@ -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;
}
}
}

50
src/styles/variables.scss
View File

@ -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;