diff --git a/src/dependencies.pug b/src/dependencies.pug index a1daf4f..358313e 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -17,8 +17,8 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3 //- CDN script(type="module" src="https://unpkg.com/@startinblox/core@0.7") script(type="module" src="https://unpkg.com/@startinblox/router@0.7.2") -script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7") +script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.10") script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1.12") script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2.1") -script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.16") +script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.18") diff --git a/src/index.pug b/src/index.pug index a67f96c..a666834 100644 --- a/src/index.pug +++ b/src/index.pug @@ -31,5 +31,5 @@ html(lang="en") #circle(hidden).with-sidebar include page-circle.pug - #member-chat(hidden).with-sidebar - include page-member-chat.pug + #messages(hidden).with-sidebar + include page-messages.pug diff --git a/src/menu-left.pug b/src/menu-left.pug index 8535260..ede7bf5 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -46,13 +46,13 @@ nav#main__menu div.menu-icon.icon-arrow-up div.menu-label Chat div.menu-icon.icon-envelope-letter - sib-route(hidden, name='member-chat', id-prefix=`${sdn}/members/`, rdf-type='foaf:user', use-id='') + sib-route(hidden, name='messages', id-prefix=`${sdn}/members/`, rdf-type='foaf:user', use-id='') div.sub-menu sib-display( data-src=`${sdn}/members/`, data-fields='user.username', widget-user.username='sib-display-div', - next='member-chat' + next='messages' ) div.divider diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug index 4f02f24..f92929c 100644 --- a/src/page-job-offers.pug +++ b/src/page-job-offers.pug @@ -7,7 +7,8 @@ div.job-offers__main sib-widget(name='hd-contact-author') template - sib-link(next='member-chat', data-src="${value.profile['@id']}") Send a message + p ${JSON.stringify(value)} + sib-link(next='messages', data-src="${value.profile['@id']}") Send a message div.job-offers__content h1 New offers diff --git a/src/page-member-chat.pug b/src/page-messages.pug similarity index 100% rename from src/page-member-chat.pug rename to src/page-messages.pug diff --git a/src/styles/layout/members/member-profile.scss b/src/styles/layout/members/member-profile.scss index 183a6e9..0cb4fef 100644 --- a/src/styles/layout/members/member-profile.scss +++ b/src/styles/layout/members/member-profile.scss @@ -3,137 +3,136 @@ flex-direction: column; flex-grow: 1; - #member-info { + .member-info { background-color: $color-0-0-100; 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-221-51-90; - display: grid; - grid-template-areas: "avatar name status" - "avatar pseudo status" - "avatar bio status" - "avatar list button"; - grid-template-columns: 1fr 2fr 1fr; - padding: 4.5rem; + .member-bio { - div[name='member-img'] { - grid-area: avatar; - overflow: hidden; - position: relative; - - img { - border-radius: 50%; - object-fit: cover; - max-width: 90% !important; + div[name='member-profile__bio'] { + border-bottom: 1px solid $color-221-51-90; + display: grid; + 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'] { + grid-area: avatar; + overflow: hidden; + position: relative; + + img { + border-radius: 50%; + object-fit: cover; + max-width: 90% !important; + } } - } - div[name='member-profile'] { - align-items: flex-start; - align-self: end; - display: flex; - grid-area: name; - - > sib-display-value[name^='user.'] { - color: $color-216-4-22; + div[name='member-profile'] { + align-items: baseline; + align-self: end; + display: flex; + grid-area: name; + + >sib-display-value[name^='user.'] { + color: $color-216-4-22; + font-weight: bold; + @extend h1; + } + + >sib-multiple[name$='groups'] { + display: flex; + padding-left: 1.4rem; + } + } + + sib-display-value[name='user.username'] { + grid-area: pseudo; + + &::before { + content: '@'; + } + } + + sib-display-value[name='bio'] { + grid-area: bio; + } + + div[name='infos'] { + grid-area: list; + + @extend %member-info; + } + + member-status[name$='available'] { + align-self: flex-end; + color: $color-244-73-62; + 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-43-100-50; + font-size: 7.3rem; + padding-bottom: 1.5rem; + } + } + + span.status-two { + @include ci('armor'); + + &::before { + border-bottom: 2px solid $color-43-100-50; + font-size: 7.3rem; + padding-bottom: 1.5rem; + } + } + } + + sib-action[name='send'] { + align-self: flex-end; + grid-area: button; + justify-self: flex-end; + } + + [next=messages] { + @include icon('speech'); + border: 1px solid $color-244-73-62; + border-radius: 2em; + color: $color-244-73-62; + font-size: 18px; font-weight: bold; - @extend h1; - } - - > sib-multiple[name$='groups'] { - display: flex; - padding-left: 1.4rem; - } - } - - sib-display-value[name='user.username'] { - grid-area: pseudo; - - &::before { - content: '@'; - } - } - - sib-display-value[name='bio'] { - grid-area: bio; - } - - div[name='infos'] { - grid-area: list; - - @extend %member-info; - } - - member-status[name$='available']{ - align-self: flex-end; - color: $color-244-73-62; - 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'); + justify-self: end; + padding: 0.6em 1.5em 0.4em; &::before { - border-bottom: 2px solid $color-43-100-50; - font-size: 7.3rem; - padding-bottom: 1.5rem; + font-size: 25px; + padding-right: 0.5em; } } - - span.status-two { - @include ci('armor'); - - &::before { - border-bottom: 2px solid $color-43-100-50; - font-size: 7.3rem; - padding-bottom: 1.5rem; - } - } - } - - sib-action[name='send'] { - align-self: flex-end; - grid-area: button; - justify-self: flex-end; - } - - [next=member-chat] { - @include icon('speech'); - border: 1px solid $color-244-73-62; - border-radius: 2em; - color: $color-244-73-62; - font-size: 18px; - font-weight: bold; - justify-self: end; - padding: 0.6em 1.5em 0.4em; - - &::before { - font-size: 25px; - padding-right: 0.5em; - } } } - div[name='member-profile__skills'] { - padding: 4.5rem; - - & ~ div[name='member-profile__skills'] { - padding-top: 0; - } + .member-skills { label { + float: left; font-weight: bold; display: block; padding-bottom: 0.5rem; diff --git a/src/styles/layout/members/members.scss b/src/styles/layout/members/members.scss index e430fbb..7248391 100644 --- a/src/styles/layout/members/members.scss +++ b/src/styles/layout/members/members.scss @@ -191,7 +191,7 @@ member-info-groups { text-align: center; } - [next=member-chat] { + [next=messages] { align-self: center; border: 1px solid $color-244-73-62; border-radius: 3.4rem;