Skip to content
Snippets Groups Projects
Commit 9c4d5a52 authored by Gaëlle Morin's avatar Gaëlle Morin
Browse files

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
parent bb2efbeb
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 443 additions and 289 deletions
src/dependencies.pug
+ 1
− 1
View file @ 9c4d5a52
......@@ -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")
......
src/index.pug
+ 1
− 1
View file @ 9c4d5a52
......@@ -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)
......
src/page-member-profile.pug
+ 28
− 19
View file @ 9c4d5a52
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
)
src/page-member.pug
+ 4
− 13
View file @ 9c4d5a52
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
src/page-members.pug
+ 7
− 2
View file @ 9c4d5a52
......@@ -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
......
src/styles/content.scss
+ 37
− 82
View file @ 9c4d5a52
......@@ -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;
}
}
}
hdapp-userinfo {
@extend h1;
}
/*
[name=infos] {
//margin: 2em 0;
> * {
// display: block;
margin: 0.5em 0;
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;
}
}
*/
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;
}
......
src/styles/filters.scss
+ 7
− 1
View file @ 9c4d5a52
......@@ -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 {
......
src/styles/icons/material-design-icons.scss
+ 3
− 1
View file @ 9c4d5a52
......@@ -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,
......
src/styles/index.scss
+ 1
− 0
View file @ 9c4d5a52
......@@ -16,6 +16,7 @@
@import 'group-profile';
@import 'job-offers';
@import 'member-profile';
@import 'members';
@import 'project-profile';
......
src/styles/main.scss
+ 2
− 2
View file @ 9c4d5a52
......@@ -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 {
......
src/styles/member-profile.scss 0 → 100644
+ 160
− 0
View file @ 9c4d5a52
#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;
}
}
}
}
}
src/styles/member.scss deleted 100644 → 0
+ 0
− 0
View file @ bb2efbeb
src/styles/members.scss
+ 134
− 167
View file @ 9c4d5a52
#profiles-list {
@extend .grid-layer;
nav {
align-items: center;
display: flex;
font-size: 2.4rem;
justify-content: center;
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);
}
#members {
span {
font-size: 2.6rem;
}
}
#profiles-list {
@extend .grid-layer;
& > sib-form {
grid-column-start: start;
grid-column-end: middle;
grid-row-start: start;
grid-row-end: middle;
}
nav {
align-items: center;
display: flex;
font-size: 2.4rem;
justify-content: center;
& > div,
& > nav {
display: flex;
flex-wrap: wrap;
grid-column-start: start;
grid-column-end: end;
margin-bottom: 1.7rem;
}
& > div {
justify-content: space-between;
button {
color: $color-anti-flash-white;
&:before {
color: $color-dark-lava;
@include icon('arrow-left-circle');
}
&: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;
&:disabled::before {
color: $color-manatee;
}
}
&::before {
right: 5.1rem;
button:nth-of-type(2) {
order: 1;
transform: rotate(180deg);
}
&::after {
left: 5.1rem;
span {
font-size: 2.6rem;
}
}
> sib-display {
background-color: white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
color: $color-rolling-stone;
cursor: pointer;
& > sib-form {
grid-column-start: start;
grid-column-end: middle;
grid-row-start: start;
grid-row-end: middle;
}
& > div,
& > nav {
display: flex;
flex-flow: column wrap;
margin-bottom: 2.5rem;
padding-bottom: 10rem;
@media(min-width: 56rem) {
height: 62rem;
width: 32%;
}
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;
}
label {
display: none;
&::after {
left: 5.1rem;
}
}
div[name='header'] {
border-bottom: 1px solid $color-anti-flash-white;
> 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-direction: column;
padding: 0.85rem 0 3.4rem;
flex-flow: column wrap;
margin-bottom: 2.5rem;
padding-bottom: 10rem;
@media(min-width: 56rem) {
height: 62rem;
width: 32%;
}
> *:not(sib-display-img) {
display: flex;
flex-basis: content;
justify-content: center;
label {
display: none;
}
sib-display-img {
background-color: white;
border-radius: 50%;
height: 28vh;
margin: 1.7rem auto;
overflow: hidden;
position: relative;
width: 28vh;
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;
}
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
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;
}
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-div[name$='bio'] {
display: flex;
flex-basis: 3.5em;
line-height: 1.6;
margin: 2.5rem 0;
padding: 0 6.8rem;
text-align: center;
}
}
}
div[name='infos'] {
> sib-display-div > div,
> sib-display-lookuplist > ul {
margin-bottom: 0;
margin-top: 1.7rem;
&::before {
color: $color-selective-yellow;
font-size: 2rem;
padding: 0 0.6em 0 1em;
[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;
}
> 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');
}
div[name='infos'] {
padding: 0 1.7rem;
[name$='phone'] * {
@include icon('phone');
@extend %member-info;
}
}
}
......
src/styles/variables.scss
+ 50
− 0
View file @ 9c4d5a52
......@@ -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;
......
www/fonts/material-design-icons.svg
+ 8
− 0
View file @ 9c4d5a52
......@@ -23,6 +23,14 @@
<glyph glyph-name="check"
unicode="&#xF12C;"
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="&#xF1F0;"
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="&#xF339;"
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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment