diff --git a/src/config.sample.json b/src/config.sample.json index eedcb92..3bced3b 100644 --- a/src/config.sample.json +++ b/src/config.sample.json @@ -3,6 +3,7 @@ "cdn": "https://cdn.happy-dev.fr", "xmpp": "https://jabber.happy-dev.fr/http-bind/", "authority": "http://127.0.0.1:8000/openid/", + "clientName": "SIB App", "endpoints": { "businessproviders": "http://127.0.0.1:8000/businessproviders/", "circles": "http://127.0.0.1:8000/circles/", diff --git a/src/dependencies.pug b/src/dependencies.pug index c012d46..491c23d 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -12,13 +12,13 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3 //- script(type="module" src="/lib/sib-notifications/sib-notifications.js") //- script(type="module" src="/lib/sib-conversation/sib-conversation.js") //- script(type="module" src="/lib/sib-directory/sib-directory.js") -//- script(type="module" src="/lib/sib-joboffers/sib-job-board.js") +//- script(type="module" src="/lib/sib-job-board/sib-job-board.js") //- CDN script(type="module" src="https://unpkg.com/@startinblox/core@0.8") script(type="module" src="https://unpkg.com/@startinblox/router@0.7") -script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.2") +script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.3") script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.2") //- script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3") -//- script(type="module" src="https://unpkg.com/@startinblox/component-directory@beta") -//- script(type="module" src="https://unpkg.com/@startinblox/component-job-board@beta") +//- script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3") +//- script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3") diff --git a/src/header.pug b/src/header.pug index 43d5835..9347750 100644 --- a/src/header.pug +++ b/src/header.pug @@ -30,5 +30,6 @@ sib-auth sib-auth-provider( data-authority=`${authority}` data-id=`${authorityName || "paris"}` + data-client-name=`${clientName || "SIB App"}` ) diff --git a/src/menu-left.pug b/src/menu-left.pug index 0a15c81..0c3114e 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -1,6 +1,11 @@ sib-widget(name='hd-counter') template sib-badge(data-src="${src}") + +sib-widget(name='hd-create') + template + p.create You are not part of any ${value} yet. To create a new one, you can go to the administration panel (coming soon). + nav#main__menu sib-router#navbar-router(default-route='members') //- sib-route.menu(name='members') @@ -24,12 +29,13 @@ nav#main__menu //- sib-display( //- data-src=`${endpoints.projects}` //- fields='project(customer.name, dash, name), badge' + //- empty-widget='hd-create' + //- empty-value='project' //- value-dash=' - ' //- widget-badge='hd-counter' //- action-badge='badge' - //- next='project' //- ) - //- div.divider + div.divider div.menu-wrapper div.menu div.menu-chevron @@ -41,9 +47,16 @@ nav#main__menu sib-display( data-src=`${endpoints.circles}` fields='name, badge' + empty-widget='hd-create' + empty-value='circle' widget-name='sib-display-div', widget-badge='hd-counter' action-badge='badge' + search-fields='team' + search-widget-team='sib-form-hidden' + search-value-team='' + set-user-id='search-value-team' + order-by='name' next='circle' ) div.divider @@ -61,6 +74,7 @@ nav#main__menu widget-username='sib-display-div' widget-badge='hd-counter' action-badge='badge' + order-by='username' next='messages' ) diff --git a/src/page-circle-chat.pug b/src/page-circle-chat.pug index 3ba8793..6d1df86 100644 --- a/src/page-circle-chat.pug +++ b/src/page-circle-chat.pug @@ -1,9 +1,14 @@ -.content-box.with-padding.full-width.chat-view - sib-chat( - data-authentication='login', - data-auto-login='true', - data-bosh-service-url=`${xmpp}`, - data-debug='false', - data-locales-url='en', +.content-box.full-width + sib-display.chat-header( bind-resources - ) \ No newline at end of file + fields='name' + ) + .chat-view + sib-chat( + data-authentication='login', + data-auto-login='true', + data-bosh-service-url=`${xmpp}`, + data-debug='false', + data-locales-url='en', + bind-resources + ) \ No newline at end of file diff --git a/src/page-messages.pug b/src/page-messages.pug index 4f16492..dec706a 100644 --- a/src/page-messages.pug +++ b/src/page-messages.pug @@ -1,9 +1,14 @@ -.content-box.with-padding.full-width.chat-view - sib-chat( - data-authentication='login', - data-auto-login='true', - data-bosh-service-url=`${xmpp}`, - data-debug='false', - data-locales-url='en', +.content-box.full-width + sib-display.chat-header( bind-resources + fields='username' ) + .chat-view + sib-chat( + data-authentication='login', + data-auto-login='true', + data-bosh-service-url=`${xmpp}`, + data-debug='false', + data-locales-url='en', + bind-resources + ) diff --git a/src/scripts/index.js b/src/scripts/index.js index 105b5cf..68240af 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -37,12 +37,11 @@ document.addEventListener('DOMContentLoaded', function (event) { document.querySelector('sib-auth').getUser().then(user => { if(user !== null) { + // Hide login button if already logged document.querySelector('button[role="log in"]').style.display = 'none'; - //- Token expired, hack for ask relogin - if(new Date(document.querySelector('sib-auth').getUser().expires_at*1000) <= new Date()) { - document.querySelector('button[role="log in"]').style.display = ''; - document.querySelector('button[role="log in"]').style.color = 'red'; - document.querySelector('button[role="log in"]').innerHTML = 'Re-login'; + // Set current user id on set-user-id of sib-display + for(sibDisplay of document.querySelectorAll('sib-display[set-user-id]')) { + sibDisplay.setAttribute(sibDisplay.getAttribute('set-user-id'), user['@id']); } } }).catch(error => console.log(error)); diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index c1c2e25..947f756 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -65,7 +65,7 @@ summary { &::-moz-list-bullet { - list-style-type: none; + list-style-type: none; /* To remove the disclosure triangle on Firefox v.<69 */ } &::-webkit-details-marker { @@ -114,6 +114,8 @@ summary { padding: 18px; cursor: pointer; + display: block; /* To remove the disclosure triangle on Firefox v.>=69 */ + &:focus { background-color: $color-233-18-29; color: $color-0-0-100; diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index d5c98cb..f96318e 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -92,6 +92,11 @@ .sub-menu { sib-display>div { + + .create { + color: $color-244-10-70; + margin: 1rem 1rem 2.2rem 3.2rem; + } &>sib-display { diff --git a/src/styles/components/chat.scss b/src/styles/components/chat.scss index 5ac4192..3683b44 100644 --- a/src/styles/components/chat.scss +++ b/src/styles/components/chat.scss @@ -1,9 +1,23 @@ // chat +.chat-header { + + div { + color: $color-233-18-29; + display: flex; + flex-direction: column; + margin: 3rem; + + &>:first-child { + font-size: 2rem; + font-weight: bold; + } + } +} .chat-view { padding: 0; - height: calc(100vh - 84px); + height: calc(100vh - 84px - 83px); position: relative; overflow: hidden; @@ -13,7 +27,7 @@ left: 0; right: 0; bottom: 0; - max-height: calc(100vh - 84px); + max-height: calc(100vh - 84px - 83px); z-index: 0; } } diff --git a/src/styles/layout/members/member-profile.scss b/src/styles/layout/members/member-profile.scss index 53fd9c3..b974ba3 100644 --- a/src/styles/layout/members/member-profile.scss +++ b/src/styles/layout/members/member-profile.scss @@ -34,10 +34,10 @@ width: 28vh; img { - height: 255px; + height: 265px; object-fit: cover; object-position: center; - width: 255px; + width: 265px; } object { diff --git a/src/styles/layout/members/members.scss b/src/styles/layout/members/members.scss index 6d18f5f..79ffa52 100644 --- a/src/styles/layout/members/members.scss +++ b/src/styles/layout/members/members.scss @@ -1,8 +1,8 @@ %member-info { sib-multiple[name^='user.'], - > member-info > div, - > sib-display-value { + >member-info>div, + >sib-display-value { display: flex; flex-wrap: wrap; margin-bottom: 0; @@ -13,7 +13,7 @@ padding: 0 0.6em 0 0; } } - + [name$='profile.city'] * { @include mdi('atom'); } @@ -36,7 +36,6 @@ member-info-groups { } #members-list { - @extend %grid-layer; #members-list__content { @extend %grid-layer; @@ -44,12 +43,13 @@ member-info-groups { nav { align-items: center; display: flex; + flex-wrap: wrap; font-size: 2.4rem; justify-content: center; button { color: $color-210-25-95; - + &:before { color: $color-216-4-22; @include icon('arrow-left-circle'); @@ -70,62 +70,81 @@ member-info-groups { } } - & > sib-form { + &>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; + &>div, + &>nav { grid-column-start: start; grid-column-end: end; margin-bottom: 1.7rem; } - - & > div { - justify-content: space-between; - &:first-of-type { - color: $color-0-0-29; - font-weight: bold; - justify-content: center; - margin: 3.75rem 0; - position: relative; + &>div:first-of-type { + display: flex; + color: $color-0-0-29; + flex-wrap: wrap; + font-weight: bold; + justify-content: center; + margin: 3.75rem 0; + position: relative; - &::before { - border-top: 1px solid $color-0-0-85; - bottom: 0; - content: ''; - left: 0; - margin: 0 auto; - position: absolute; - right: 0; - top: 50%; - width: 100%; - z-index: -1; - } - - span { - background-color: $color-210-25-95; - padding: 0 60px; - } + &::before { + border-top: 1px solid $color-0-0-85; + bottom: 0; + content: ''; + left: 0; + margin: 0 auto; + position: absolute; + right: 0; + top: 50%; + width: 100%; + z-index: -1; } - > sib-display { + span { + background-color: $color-210-25-95; + padding: 0 60px; + } + } + + &>div:nth-of-type(2) { + display: grid; + grid-gap: 30px; + grid-template-columns: 1fr; + grid-template-rows: auto; + + @media only screen and (min-width: 850px) { + grid-template-columns: repeat(2, 1fr); + } + + @media only screen and (min-width: 1180px) { + grid-template-columns: repeat(3, 1.5fr); + } + + &>sib-display { background-color: white; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14); color: $color-210-4-50; cursor: pointer; - display: flex; - flex-flow: column wrap; - margin-bottom: 2.5rem; - padding-bottom: 2rem; - @media(min-width: 56rem) { - width: 32%; + min-height: auto; + position: relative; + text-decoration: none; + top: 0; + transition: all .1s ease-in; + + &>div { + display: flex; + flex-direction: column; + } + + &:hover { + box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24); + top: -2px; } label { @@ -141,62 +160,59 @@ member-info-groups { padding-right: 2.6rem; padding-top: 1.3rem; - > * { + >* { margin: 0.3rem; } } - sib-set-default[name='header'] { + member-picture { + align-items: center; + background-color: $color-213-20-91; + border-radius: 50%; + display: flex; + height: 28vh; + justify-content: center; + margin: 1.7rem auto; + overflow: hidden; + width: 28vh; + + img { + height: 100%; + object-fit: cover; + object-position: center; + width: 100%; + } + + object { + height: 45%; + width: 45%; + } + } + + sib-set-default[name='bio'] { + align-items: center; border-bottom: 1px solid $color-210-25-95; display: flex; flex-direction: column; - padding: 0.85rem 0 3.4rem; + padding-bottom: 3rem; - >*:not(member-picture) { - display: flex; - flex-basis: content; - justify-content: center; + >* { + text-align: center; } - member-picture { - align-items: center; - background-color: $color-213-20-91; - border-radius: 50%; - display: flex; - height: 28vh; - justify-content: center; - margin: 1.7rem auto; - overflow: hidden; - width: 28vh; - - img { - height: 100%; - object-fit: cover; - object-position: center; - width: 100%; - } - - object { - height: 45%; - width: 45%; - } - } - - [name='name'] { - margin: 0.67em 0; + [name='pseudonym'] { + margin-top: 0.6rem; } sib-display-value[name$='bio'] { - display: flex; - flex-basis: 3.5em; - line-height: 1.6; + flex: 1; margin: 2.5rem 0; - padding: 0 6.8rem; - text-align: center; + padding: 0 10px; + width: 70%; + flex-basis: 4.5em; } - - [next=messages] { - align-self: center; + + [name='send'] { border: 1px solid $color-244-73-62; border-radius: 3.4rem; color: $color-244-73-62; @@ -204,8 +220,8 @@ member-info-groups { font-weight: bold; padding: 1rem 2.55rem 0.7rem; @include icon('speech'); - - &::before { + + [next=messages]:before { font-size: 2.5rem; padding-right: 0.85rem; } @@ -213,10 +229,12 @@ member-info-groups { } sib-set-default[name='infos'] { - display: block; - padding: 0 1.7rem; - + padding: 0.4rem 2rem 3.7rem; @extend %member-info; + + sib-multiple[name='skills'] { + margin: 1.6rem 0; + } } } } diff --git a/src/templates/hd-user-avatar.pug b/src/templates/hd-user-avatar.pug index 1624767..ec37182 100644 --- a/src/templates/hd-user-avatar.pug +++ b/src/templates/hd-user-avatar.pug @@ -1,2 +1,2 @@ sib-widget(name='hd-user-avatar') - template ${value ? `` : ``} + template ${value ? `` : ``}