From 9c4d5a52ed65d18066b9f0e67cee775fe5f6c840 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 25 Feb 2019 16:58:27 +0100 Subject: [PATCH] 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 --- src/dependencies.pug | 2 +- src/index.pug | 2 +- src/page-member-profile.pug | 47 +-- src/page-member.pug | 17 +- src/page-members.pug | 9 +- src/styles/content.scss | 125 +++----- src/styles/filters.scss | 8 +- src/styles/icons/material-design-icons.scss | 4 +- src/styles/index.scss | 1 + src/styles/main.scss | 4 +- src/styles/member-profile.scss | 160 ++++++++++ src/styles/member.scss | 0 src/styles/members.scss | 321 +++++++++----------- src/styles/variables.scss | 50 +++ www/fonts/material-design-icons.svg | 8 + 15 files changed, 456 insertions(+), 302 deletions(-) create mode 100644 src/styles/member-profile.scss delete mode 100644 src/styles/member.scss diff --git a/src/dependencies.pug b/src/dependencies.pug index 1ce9fc3..20b63eb 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -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") diff --git a/src/index.pug b/src/index.pug index db89f3f..c352223 100644 --- a/src/index.pug +++ b/src/index.pug @@ -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) diff --git a/src/page-member-profile.pug b/src/page-member-profile.pug index 3095ec2..a701aff 100644 --- a/src/page-member-profile.pug +++ b/src/page-member-profile.pug @@ -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 ? 'Available' : 'Busy'} + +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 + ) diff --git a/src/page-member.pug b/src/page-member.pug index 0624ae8..ee5f063 100644 --- a/src/page-member.pug +++ b/src/page-member.pug @@ -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 diff --git a/src/page-members.pug b/src/page-members.pug index 057f1e5..1727c79 100644 --- a/src/page-members.pug +++ b/src/page-members.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 diff --git a/src/styles/content.scss b/src/styles/content.scss index 3951c87..720008b 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -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; } diff --git a/src/styles/filters.scss b/src/styles/filters.scss index 8eee93c..4043600 100644 --- a/src/styles/filters.scss +++ b/src/styles/filters.scss @@ -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 { diff --git a/src/styles/icons/material-design-icons.scss b/src/styles/icons/material-design-icons.scss index 5a3bf2e..2793d84 100644 --- a/src/styles/icons/material-design-icons.scss +++ b/src/styles/icons/material-design-icons.scss @@ -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, diff --git a/src/styles/index.scss b/src/styles/index.scss index 959ebff..1f8608e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -16,6 +16,7 @@ @import 'group-profile'; @import 'job-offers'; +@import 'member-profile'; @import 'members'; @import 'project-profile'; diff --git a/src/styles/main.scss b/src/styles/main.scss index e7bdea8..8ae3290 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -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 { diff --git a/src/styles/member-profile.scss b/src/styles/member-profile.scss new file mode 100644 index 0000000..1a09aae --- /dev/null +++ b/src/styles/member-profile.scss @@ -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; + } + } + } + } +} diff --git a/src/styles/member.scss b/src/styles/member.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/styles/members.scss b/src/styles/members.scss index 4285060..b44880c 100644 --- a/src/styles/members.scss +++ b/src/styles/members.scss @@ -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; } } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 021ce17..3b93290 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -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; diff --git a/www/fonts/material-design-icons.svg b/www/fonts/material-design-icons.svg index dba7398..f5cbbec 100644 --- a/www/fonts/material-design-icons.svg +++ b/www/fonts/material-design-icons.svg @@ -23,6 +23,14 @@ + + + +