From 95c3284e5fc64f7ee8a54eae9dc4f6bb844c72e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Thu, 14 Mar 2019 14:43:18 +0100 Subject: [PATCH] feature(members): MR!6 - Sib-directory added - CSS finalised - Default user picture added - See https://git.happy-dev.fr/startinblox/components/sib-directory/merge_requests/6 --- src/dependencies.pug | 4 +-- src/index.pug | 2 -- src/menu-left.pug | 1 - src/page-member-profile.pug | 32 ------------------ src/page-members.pug | 55 +++---------------------------- src/scripts/index.js | 6 ++++ src/styles/filters.scss | 14 +++++--- src/styles/index.scss | 1 + src/styles/main.scss | 15 +++++---- src/styles/member-profile.scss | 44 ++++++++++--------------- src/styles/members.scss | 34 +++++++++++-------- src/styles/variables.scss | 8 ++++- src/templates/template-skills.pug | 1 + src/templates/template-status.pug | 1 + 14 files changed, 79 insertions(+), 139 deletions(-) delete mode 100644 src/page-member-profile.pug diff --git a/src/dependencies.pug b/src/dependencies.pug index 5ec0e2b..722df98 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -11,7 +11,7 @@ script( script(src="/scripts/index.js") // Stylesheets -link(rel='stylesheet', href='/lib/normalize.css') +//link(rel='stylesheet', href='/lib/normalize.css') link(rel='stylesheet', href='/styles/index.css') link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext') link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i') @@ -27,9 +27,9 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3 //link(rel='import', href='/lib/sib-chat/sib-chat.html') //- cdn -//- don't forget to change version in hd-widgets.js script(type="module" src="https://unpkg.com/@startinblox/core@0.6") script(type="module" src="https://unpkg.com/@startinblox/router@0.6") script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1") script(type="module" src="https://unpkg.com/@startinblox/component-notifications") +script(type="module" src="https://unpkg.com/@startinblox/component-directory") diff --git a/src/index.pug b/src/index.pug index 3f08fcc..d32d309 100644 --- a/src/index.pug +++ b/src/index.pug @@ -21,8 +21,6 @@ html(lang="en") include page-members.pug #member-chat(hidden) include page-member-chat.pug - #member(hidden) - include page-member-profile.pug #job-offers(hidden) include page-job-offers.pug #job-offer-create(hidden) diff --git a/src/menu-left.pug b/src/menu-left.pug index fbb76fd..1970241 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -9,7 +9,6 @@ nav#navbar ) div.menu-label Members div.menu-icon.icon-people - sib-route.menu(hidden, name='member', id-prefix=`${sdn}/members/`) div.divider sib-route.menu(name='job-offers') div.menu-notification diff --git a/src/page-member-profile.pug b/src/page-member-profile.pug deleted file mode 100644 index 3bd20f3..0000000 --- a/src/page-member-profile.pug +++ /dev/null @@ -1,32 +0,0 @@ -sib-link(next="members" class="backlink") Back to directory - -include templates/template-groups.pug -include templates/template-skills.pug -include templates/template-status.pug - -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.name, user.groups', - set-infos='city, user.groups, user.email, phone, foaf:homepage', - - label-send='SEND A MESSAGE', - action-send='member-chat', - - widget-user.account.picture='sib-display-img', - widget-user.groups='groups-name', - widget-user.skills='skills-name', - widget-user.profile.available='status-template', - - multiple-user.groups, - multiple-user.skills, - - bind-resources - ) - diff --git a/src/page-members.pug b/src/page-members.pug index b5f5d40..aa6b537 100644 --- a/src/page-members.pug +++ b/src/page-members.pug @@ -1,51 +1,6 @@ -div.grid-layer - - include templates/template-groups.pug - include templates/template-skills.pug - - div.grid-layer-main.containerV - h1 Members - sib-display#profiles-list( - data-src=`${sdn}/members/`, - 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-label-groups='Filter by role', - search-label-skills='Search by skills', - search-widget-name='sib-form-placeholder-text', - search-widget-groups='sib-form-placeholder-dropdown', - search-widget-skills='sib-form-placeholder-text', - - counter-template='${counter} members', - - data-fields='header, infos', - set-header='user.account.picture, user.name, pseudonym, bio, send', - set-infos='city, user.groups, user.email, phone, user.skills', - set-pseudonym='before-pseudo,user.username', - value-before-pseudo='@', - label-send='SEND A MESSAGE', - action-send='member-chat', - widget-user.account.picture='sib-display-img', - widget-user.groups='groups-name', - widget-user.skills='skills-name', - multiple-user.groups, - multiple-user.skills, - - paginate-by='3', - - next='member' - ) - - div.grid-layer-links.containerV - div.containerH.containerCenter.how-link - div.containerV.fix.icon-idea - div.containerV.grow - sib-trigger() How To... - div.containerH.containerCenter.how-link - div.containerV.fix.icon-idea - div.containerV.grow - sib-trigger() How to complete my profile ? +sib-directory( + data-src=`${sdn}/members/`, + range-groups=`${sdn}/groups/`, + range-skills=`${sdn}/skills/` +) diff --git a/src/scripts/index.js b/src/scripts/index.js index 9b4fac6..dc79031 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -6,6 +6,12 @@ document.addEventListener('DOMContentLoaded', function (event) { if (!navBar || !btnToggle) return; + document.querySelectorAll('img[name$="account.picture"]').forEach(function (e) { + if (!e.src || e.src == window.location) { + e.src = '/images/user.jpg'; + } + }); + btnToggle.addEventListener('click', e => { navBar.classList.toggle('open'); e.stopPropagation(); diff --git a/src/styles/filters.scss b/src/styles/filters.scss index 622176c..4498840 100644 --- a/src/styles/filters.scss +++ b/src/styles/filters.scss @@ -1,8 +1,7 @@ %filters { - border-bottom: 1px solid $color-gainsboro; display: grid; grid-gap: 0px 15px; - grid-template-columns: 50% 50%; + grid-template-columns: 1fr 1fr; grid-template-rows: 3.5em 3.5em; label { @@ -29,7 +28,7 @@ select { background: $color-white; background-image: url("/images/chevron-down.png"); - background-position: 96% 60%; + background-position: right 12px top 60%; background-repeat: no-repeat; background-size: 14px 9px; box-sizing: border-box; @@ -47,10 +46,15 @@ display: flex; flex-direction: column; } + + sib-form-placeholder-dropdown[name="skills"] { + grid-column-end: 3; + grid-column-start: 1; + } } -#offers-list, #profiles-list { - & > sib-form { +#offers-list, #members-list { + sib-form { @extend %filters; } } diff --git a/src/styles/index.scss b/src/styles/index.scss index 1f8608e..3e0a702 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,6 +1,7 @@ @charset "UTF-8"; @import '../../node_modules/include-media/dist/include-media'; +@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'; @import 'icons/custom-icons'; @import 'icons/icons'; @import 'icons/material-design-icons'; diff --git a/src/styles/main.scss b/src/styles/main.scss index cc96944..484dfd6 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,6 +1,6 @@ -@import 'variables'; - -[hidden] { +[hidden], +.hidden, +.is-hidden { display: none !important; } @@ -141,7 +141,6 @@ li { } sib-route, -sib-trigger, sib-link { cursor: pointer; } @@ -193,7 +192,7 @@ sib-link.back { display: grid; font-size: 16px; grid-template-columns: [start]auto[middle]25%[end]; - grid-template-rows: [start]13em[middle]auto[end]; + grid-template-rows: [start]7em[middle]auto[end]; } .grid-layer-main { grid-column-start: start; @@ -223,7 +222,11 @@ sib-multiple[name*='skills'] { color: $color-white; font-size: 1.4rem; font-weight: bold; - margin: 0.4rem 0.4rem 0.4rem 0; + margin: 0.4rem 1rem 0.4rem 0; padding: 0.5rem 2rem; } +member-info-groups { + @extend %group; +} + diff --git a/src/styles/member-profile.scss b/src/styles/member-profile.scss index 40b3856..07ec783 100644 --- a/src/styles/member-profile.scss +++ b/src/styles/member-profile.scss @@ -1,4 +1,4 @@ -#member { +#member-profile { display: flex; flex-direction: column; flex-grow: 1; @@ -14,7 +14,7 @@ } } - #member-profile { + #member-info { background-color: $color-white; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14); margin: 2rem 1rem 5rem 2rem; @@ -23,29 +23,22 @@ 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"; + grid-template-areas: "avatar name status" + "avatar pseudo status" + "avatar bio status" + "avatar list button"; + grid-template-columns: 1fr 2fr 1fr; 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; + border-radius: 50%; object-fit: cover; - position: absolute; - top: 0; - width: 100%; + max-width: 90% !important; } } @@ -64,10 +57,6 @@ > sib-multiple[name$='groups'] { display: flex; padding-left: 1.4rem; - - groups-name { - @extend %group; - } } } @@ -89,7 +78,7 @@ @extend %member-info; } - status-template[name$='available']{ + member-status[name$='available']{ align-self: flex-end; color: $color-majorelle-blue; grid-area: status; @@ -149,12 +138,15 @@ } div[name='member-profile__skills'] { + padding: 4.5rem; + + & ~ div[name='member-profile__skills'] { + padding-top: 0; + } - sib-display-lookuplist { - - label { - display: none; - } + label { + font-weight: bold; + padding-bottom: 0.5rem; } } } diff --git a/src/styles/members.scss b/src/styles/members.scss index db8f13d..d9122e3 100644 --- a/src/styles/members.scss +++ b/src/styles/members.scss @@ -1,6 +1,7 @@ -#members { +#members-list { + @extend .grid-layer; - #profiles-list { + #members-list__content { @extend .grid-layer; nav { @@ -86,9 +87,8 @@ display: flex; flex-flow: column wrap; margin-bottom: 2.5rem; - padding-bottom: 10rem; + padding-bottom: 2rem; @media(min-width: 56rem) { - height: 62rem; width: 32%; } @@ -96,19 +96,33 @@ display: none; } + sib-multiple[name$='groups'] { + align-items: flex-start; + display: flex; + justify-content: flex-end; + min-height: 3.4rem; + padding-left: 2.6rem; + padding-right: 2.6rem; + padding-top: 1.3rem; + + > * { + margin: 0.3rem; + } + } + 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) { + >*:not(member-picture) { display: flex; flex-basis: content; justify-content: center; } - sib-display-img { + member-picture { background-color: $color-white; border-radius: 50%; height: 28vh; @@ -163,14 +177,6 @@ padding: 0 1.7rem; @extend %member-info; - - sib-multiple[name$='groups'] { - display: flex; - - > * { - margin-right: 0.4rem; - } - } } } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index ad6a14d..b282545 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -28,8 +28,13 @@ $color-spun-pearl: hsl(244, 10%, 70%); $color-majorelle-blue: hsl(244, 73%, 62%); %backlink { - color: #3d4057; @include icon('arrow-left-circle'); + color: #3d4057; + text-decoration: underline; + + &::before { + text-decoration: none; + } } %button { @@ -63,6 +68,7 @@ $color-majorelle-blue: hsl(244, 73%, 62%); %member-info { sib-multiple[name^='user.'], + > member-info > div, > sib-display-div > div { display: flex; flex-wrap: wrap; diff --git a/src/templates/template-skills.pug b/src/templates/template-skills.pug index cb2cdcb..cad1b90 100644 --- a/src/templates/template-skills.pug +++ b/src/templates/template-skills.pug @@ -2,3 +2,4 @@ sib-widget(name='skills-name') template li(class='skill') ${value.name} + diff --git a/src/templates/template-status.pug b/src/templates/template-status.pug index 94e6e2f..c6f5fa8 100644 --- a/src/templates/template-status.pug +++ b/src/templates/template-status.pug @@ -1,3 +1,4 @@ sib-widget(name='status-template') template div#member-status ${value == true ? 'Available' : 'Busy'} +