diff --git a/src/dependencies.pug b/src/dependencies.pug
index 5ec0e2bbfbe9977dec5d9366f6bdab2dd78bc213..722df98747b330343c21bcdb4a3d1fa9663aa334 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 3f08fcc077d3f38dad765cc551e4fabd1308d57b..d32d309bafca8c6f04f0a51e6e27e678a6828cad 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 fbb76fd206395d41fb7bb52db1cb7a8353d52b41..19702410c05b7e578be94727de6e07211c9ad4ac 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 3bd20f311aec2ae1202d0dc69ebf1e7e1112834b..0000000000000000000000000000000000000000
--- 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 b5f5d4077eb6e4cf3859a5128e20bffafc50c582..aa6b537dbc8baf4a1682257b7d00644efcb5b0e2 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='<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/`
+)
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 9b4fac6b787c70da1e0fe18a5e6db0bd04c0834b..dc79031d0c86168d6228028fc9ff9329deac708f 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 622176cd11327e1473f57c50d2270cd10baeaf6b..4498840bce96c465473bddf191dfca4e8d77e1a8 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 1f8608e97203ed61fd3051af84588b2a290972b1..3e0a7022788a1bf2c03014ab9971d86b680c98af 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 cc96944684ad6a8c1185ac1a23ad1a82115c5360..484dfd6a8b5418576b3d8e930da52976451b811a 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 40b3856e745266d413824d8e4584bb4f348d3f27..07ec78344580d8dab0fa6c3088eb1e90ccf0c2ef 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 db8f13d29bcee8d163bd8e353002caad4bf94bdd..d9122e3e8126d6844685c25f0656b0bb0042b451 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 ad6a14de167ac18dd4418051f98e7185e4b994e5..b28254572b7c2f900e00c0a046586e62306c39aa 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 cb2cdcb1fb87e9cb3f85280c35a667f851015fd9..cad1b90a65d1e7948ade5e636dc8d293d4bca697 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 94e6e2f8b5cd0b41b6a704b624631f7e7a42f403..c6f5fa884ddd5c1050bca9705614e012e94cabce 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 ? '<span class="status-one">Available</span>' : '<span class="status-two">Busy</span>'}
+