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

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/dependencies.pug
View File

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

2
src/index.pug
View File

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

1
src/menu-left.pug
View File

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

32
src/page-member-profile.pug
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
)

55
src/page-members.pug
View File

@ -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='<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 ?
sib-directory(
data-src=`${sdn}/members/`,
range-groups=`${sdn}/groups/`,
range-skills=`${sdn}/skills/`
)

6
src/scripts/index.js
View File

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

14
src/styles/filters.scss
View File

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

1
src/styles/index.scss
View File

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

15
src/styles/main.scss
View File

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

44
src/styles/member-profile.scss
View File

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

34
src/styles/members.scss
View File

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

8
src/styles/variables.scss
View File

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

1
src/templates/template-skills.pug
View File

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

1
src/templates/template-status.pug
View File

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