Merge branch 'gm-sib-directory' into 'master'

Resolve "HTML - Use sib-directory"

Closes #87

See merge request startinblox/applications/sib-app!6
This commit is contained in:
Jean-Baptiste Pasquier 2019-04-12 17:15:17 +00:00
commit ee8f596251
14 changed files with 79 additions and 139 deletions

View File

@ -11,7 +11,7 @@ script(
script(src="/scripts/index.js") script(src="/scripts/index.js")
// Stylesheets // 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='/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,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') 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') //link(rel='import', href='/lib/sib-chat/sib-chat.html')
//- cdn //- 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/core@0.6")
script(type="module" src="https://unpkg.com/@startinblox/router@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-chat@0.1")
script(type="module" src="https://unpkg.com/@startinblox/component-notifications") script(type="module" src="https://unpkg.com/@startinblox/component-notifications")
script(type="module" src="https://unpkg.com/@startinblox/component-directory")

View File

@ -21,8 +21,6 @@ html(lang="en")
include page-members.pug include page-members.pug
#member-chat(hidden) #member-chat(hidden)
include page-member-chat.pug include page-member-chat.pug
#member(hidden)
include page-member-profile.pug
#job-offers(hidden) #job-offers(hidden)
include page-job-offers.pug include page-job-offers.pug
#job-offer-create(hidden) #job-offer-create(hidden)

View File

@ -9,7 +9,6 @@ nav#navbar
) )
div.menu-label Members div.menu-label Members
div.menu-icon.icon-people div.menu-icon.icon-people
sib-route.menu(hidden, name='member', id-prefix=`${sdn}/members/`)
div.divider div.divider
sib-route.menu(name='job-offers') sib-route.menu(name='job-offers')
div.menu-notification div.menu-notification

View File

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

View File

@ -1,51 +1,6 @@
div.grid-layer sib-directory(
data-src=`${sdn}/members/`,
include templates/template-groups.pug range-groups=`${sdn}/groups/`,
include templates/template-skills.pug range-skills=`${sdn}/skills/`
)
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='<span>${counter} members</span>',
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 ?

View File

@ -6,6 +6,12 @@ document.addEventListener('DOMContentLoaded', function (event) {
if (!navBar || !btnToggle) return; 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 => { btnToggle.addEventListener('click', e => {
navBar.classList.toggle('open'); navBar.classList.toggle('open');
e.stopPropagation(); e.stopPropagation();

View File

@ -1,8 +1,7 @@
%filters { %filters {
border-bottom: 1px solid $color-gainsboro;
display: grid; display: grid;
grid-gap: 0px 15px; grid-gap: 0px 15px;
grid-template-columns: 50% 50%; grid-template-columns: 1fr 1fr;
grid-template-rows: 3.5em 3.5em; grid-template-rows: 3.5em 3.5em;
label { label {
@ -29,7 +28,7 @@
select { select {
background: $color-white; background: $color-white;
background-image: url("/images/chevron-down.png"); background-image: url("/images/chevron-down.png");
background-position: 96% 60%; background-position: right 12px top 60%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 14px 9px; background-size: 14px 9px;
box-sizing: border-box; box-sizing: border-box;
@ -47,10 +46,15 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
sib-form-placeholder-dropdown[name="skills"] {
grid-column-end: 3;
grid-column-start: 1;
}
} }
#offers-list, #profiles-list { #offers-list, #members-list {
& > sib-form { sib-form {
@extend %filters; @extend %filters;
} }
} }

View File

@ -1,6 +1,7 @@
@charset "UTF-8"; @charset "UTF-8";
@import '../../node_modules/include-media/dist/include-media'; @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/custom-icons';
@import 'icons/icons'; @import 'icons/icons';
@import 'icons/material-design-icons'; @import 'icons/material-design-icons';

View File

@ -1,6 +1,6 @@
@import 'variables'; [hidden],
.hidden,
[hidden] { .is-hidden {
display: none !important; display: none !important;
} }
@ -141,7 +141,6 @@ li {
} }
sib-route, sib-route,
sib-trigger,
sib-link { sib-link {
cursor: pointer; cursor: pointer;
} }
@ -193,7 +192,7 @@ sib-link.back {
display: grid; display: grid;
font-size: 16px; font-size: 16px;
grid-template-columns: [start]auto[middle]25%[end]; 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-layer-main {
grid-column-start: start; grid-column-start: start;
@ -223,7 +222,11 @@ sib-multiple[name*='skills'] {
color: $color-white; color: $color-white;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: bold; font-weight: bold;
margin: 0.4rem 0.4rem 0.4rem 0; margin: 0.4rem 1rem 0.4rem 0;
padding: 0.5rem 2rem; padding: 0.5rem 2rem;
} }
member-info-groups {
@extend %group;
}

View File

@ -1,4 +1,4 @@
#member { #member-profile {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
@ -14,7 +14,7 @@
} }
} }
#member-profile { #member-info {
background-color: $color-white; background-color: $color-white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
margin: 2rem 1rem 5rem 2rem; margin: 2rem 1rem 5rem 2rem;
@ -23,29 +23,22 @@
div[name='member-profile__bio'] { div[name='member-profile__bio'] {
border-bottom: 1px solid $color-link-water; border-bottom: 1px solid $color-link-water;
display: grid; display: grid;
grid-template-areas: "avatar name name name status" grid-template-areas: "avatar name status"
"avatar pseudo pseudo pseudo status" "avatar pseudo status"
"avatar bio bio bio status" "avatar bio status"
"avatar list list list button" "avatar list button";
"avatar list list list button"; grid-template-columns: 1fr 2fr 1fr;
padding: 4.5rem; padding: 4.5rem;
div[name='member-img'] { div[name='member-img'] {
background-color: $color-bombay;
border-radius: 50%;
grid-area: avatar; grid-area: avatar;
height: 34vh;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 34vh;
img { img {
height: 100%; border-radius: 50%;
left: 0;
object-fit: cover; object-fit: cover;
position: absolute; max-width: 90% !important;
top: 0;
width: 100%;
} }
} }
@ -64,10 +57,6 @@
> sib-multiple[name$='groups'] { > sib-multiple[name$='groups'] {
display: flex; display: flex;
padding-left: 1.4rem; padding-left: 1.4rem;
groups-name {
@extend %group;
}
} }
} }
@ -89,7 +78,7 @@
@extend %member-info; @extend %member-info;
} }
status-template[name$='available']{ member-status[name$='available']{
align-self: flex-end; align-self: flex-end;
color: $color-majorelle-blue; color: $color-majorelle-blue;
grid-area: status; grid-area: status;
@ -149,12 +138,15 @@
} }
div[name='member-profile__skills'] { div[name='member-profile__skills'] {
padding: 4.5rem;
& ~ div[name='member-profile__skills'] {
padding-top: 0;
}
sib-display-lookuplist { label {
font-weight: bold;
label { padding-bottom: 0.5rem;
display: none;
}
} }
} }
} }

View File

@ -1,6 +1,7 @@
#members { #members-list {
@extend .grid-layer;
#profiles-list { #members-list__content {
@extend .grid-layer; @extend .grid-layer;
nav { nav {
@ -86,9 +87,8 @@
display: flex; display: flex;
flex-flow: column wrap; flex-flow: column wrap;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
padding-bottom: 10rem; padding-bottom: 2rem;
@media(min-width: 56rem) { @media(min-width: 56rem) {
height: 62rem;
width: 32%; width: 32%;
} }
@ -96,19 +96,33 @@
display: none; 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'] { div[name='header'] {
border-bottom: 1px solid $color-anti-flash-white; border-bottom: 1px solid $color-anti-flash-white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.85rem 0 3.4rem; padding: 0.85rem 0 3.4rem;
> *:not(sib-display-img) { >*:not(member-picture) {
display: flex; display: flex;
flex-basis: content; flex-basis: content;
justify-content: center; justify-content: center;
} }
sib-display-img { member-picture {
background-color: $color-white; background-color: $color-white;
border-radius: 50%; border-radius: 50%;
height: 28vh; height: 28vh;
@ -163,14 +177,6 @@
padding: 0 1.7rem; padding: 0 1.7rem;
@extend %member-info; @extend %member-info;
sib-multiple[name$='groups'] {
display: flex;
> * {
margin-right: 0.4rem;
}
}
} }
} }
} }

View File

@ -28,8 +28,13 @@ $color-spun-pearl: hsl(244, 10%, 70%);
$color-majorelle-blue: hsl(244, 73%, 62%); $color-majorelle-blue: hsl(244, 73%, 62%);
%backlink { %backlink {
color: #3d4057;
@include icon('arrow-left-circle'); @include icon('arrow-left-circle');
color: #3d4057;
text-decoration: underline;
&::before {
text-decoration: none;
}
} }
%button { %button {
@ -63,6 +68,7 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
%member-info { %member-info {
sib-multiple[name^='user.'], sib-multiple[name^='user.'],
> member-info > div,
> sib-display-div > div { > sib-display-div > div {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

View File

@ -2,3 +2,4 @@ sib-widget(name='skills-name')
template template
li(class='skill') ${value.name} li(class='skill') ${value.name}

View File

@ -1,3 +1,4 @@
sib-widget(name='status-template') sib-widget(name='status-template')
template template
div#member-status ${value == true ? '<span class="status-one">Available</span>' : '<span class="status-two">Busy</span>'} div#member-status ${value == true ? '<span class="status-one">Available</span>' : '<span class="status-two">Busy</span>'}