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