From 4750bdea616f33793fca95e79d2c7e4ef719a1e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 12 Aug 2019 17:24:23 +0200 Subject: [PATCH 01/11] ui: members page responsive --- src/dependencies.pug | 8 +- src/styles/layout/members/member-profile.scss | 4 +- src/styles/layout/members/members.scss | 196 ++++++++++-------- 3 files changed, 113 insertions(+), 95 deletions(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index c012d46..53ee6a8 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-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-conversation@0.3") +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/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; + } } } } From 72a519e562c9a662a4d53265e2fb61fc4f813d9d Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 26 Aug 2019 10:34:33 +0000 Subject: [PATCH 02/11] fix: order of circles & users --- src/menu-left.pug | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/menu-left.pug b/src/menu-left.pug index 0a15c81..b488a88 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -44,6 +44,7 @@ nav#main__menu widget-name='sib-display-div', widget-badge='hd-counter' action-badge='badge' + order-by='name' next='circle' ) div.divider @@ -61,6 +62,7 @@ nav#main__menu widget-username='sib-display-div' widget-badge='hd-counter' action-badge='badge' + order-by='username' next='messages' ) From d59d335426529d154d5de8d57da3ba2e003f585c Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 26 Aug 2019 12:53:57 +0200 Subject: [PATCH 03/11] fix: remove unused dependencies --- src/dependencies.pug | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index 53ee6a8..e29ccdc 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -19,6 +19,6 @@ 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-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@0.3") -script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3") +//- script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3") +//- 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") From 2976f8d68612a0637dfba71c95fcde5a59274a99 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 3 Sep 2019 16:58:29 +0200 Subject: [PATCH 04/11] fix: typo --- src/templates/hd-user-avatar.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ? `` : ``} From 99457474523ef651da37448d03f57771ecfeaa22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Fri, 6 Sep 2019 13:18:02 +0200 Subject: [PATCH 05/11] fix: Firefox 69 disclosure triangle masked --- src/styles/base/header.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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; From 9ef9208eeac4adefaf2ef5b26f4b978e118ccfe1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Tue, 17 Sep 2019 18:09:59 +0200 Subject: [PATCH 06/11] ffeature: circle's name displayed --- src/page-circle-chat.pug | 21 +++++++++++++-------- src/styles/components/chat.scss | 18 ++++++++++++++++-- 2 files changed, 29 insertions(+), 10 deletions(-) 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/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; } } From 06db2b185fd0c76de76b2184e1b204e6d972a8d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 23 Sep 2019 17:02:18 +0200 Subject: [PATCH 07/11] fix: textarea too high when chatting with SO fixed --- src/page-messages.pug | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) 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 + ) From bd7d3977d5cb62387cad03c53f3ef2116888572c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Thu, 26 Sep 2019 11:43:21 +0200 Subject: [PATCH 08/11] feature: left-menu display a message when no circle existing --- src/menu-left.pug | 12 ++++++++++-- src/styles/base/menu-left.scss | 5 +++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/menu-left.pug b/src/menu-left.pug index b488a88..64198d6 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,6 +47,8 @@ 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' 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 { From c72ff3f6c1e85c91ef18add52a9f9b62a548de39 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 30 Sep 2019 16:34:06 +0200 Subject: [PATCH 09/11] update: sib-chat@0.3 --- src/dependencies.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index e29ccdc..491c23d 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -17,7 +17,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3 //- 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@0.3") From 93895d166f4a70e4289e7fe7762b816b7632f917 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Wed, 2 Oct 2019 16:56:49 +0200 Subject: [PATCH 10/11] update: resolve !150 --- src/menu-left.pug | 4 ++++ src/scripts/index.js | 9 ++++----- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/menu-left.pug b/src/menu-left.pug index 64198d6..0c3114e 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -52,6 +52,10 @@ nav#main__menu 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' ) 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)); From 4ded6401d0a21ba0522d02fbad49929ca9c9a4b3 Mon Sep 17 00:00:00 2001 From: Christophe Henry Date: Tue, 15 Oct 2019 15:49:53 +0200 Subject: [PATCH 11/11] bugfix: add client name to sib-auth-provider's dataset (startinblox/applications/sib-app#224) --- src/config.sample.json | 10 +++++++--- src/header.pug | 1 + 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/config.sample.json b/src/config.sample.json index 2b02635..031b6db 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/", @@ -11,13 +12,14 @@ "projects": "http://127.0.0.1:8000/projects/", "skills": "http://127.0.0.1:8000/skills/", "users": "http://127.0.0.1:8000/users/" - } + } }, "alpha": { "cdn": "https://cdn.happy-dev.fr", "xmpp": "https://jabber.happy-dev.fr/http-bind/", "authority": "https://api.alpha.happy-dev.fr/openid/", + "clientName": "SIB App", "endpoints": { "businessproviders": "https://api.alpha.happy-dev.fr/businessproviders/", "circles": "https://api.alpha.happy-dev.fr/circles/", @@ -26,7 +28,7 @@ "projects": "https://api.alpha.happy-dev.fr/projects/", "skills": "https://api.alpha.happy-dev.fr/skills/", "users": "https://api.alpha.happy-dev.fr/users/" - } + } }, "paris": { @@ -34,6 +36,7 @@ "cdn": "https://cdn.happy-dev.fr", "xmpp": "https://jabber.happy-dev.fr/http-bind/", "authority": "https://api.test-paris.happy-dev.fr/openid/", + "clientName": "SIB App", "endpoints": { "businessproviders": "https://api.test-paris.happy-dev.fr/businessproviders/", "circles": "https://api.test-paris.happy-dev.fr/circles/", @@ -42,13 +45,14 @@ "projects": "https://api.test-paris.happy-dev.fr/projects/", "skills": "https://api.test-paris.happy-dev.fr/skills/", "users": "https://api.test-paris.happy-dev.fr/users/" - } + } }, "nantes": { "cdn": "https://cdn.happy-dev.fr", "xmpp": "https://jabber.happy-dev.fr/http-bind/", "authority": "https://api.test-nantes.happy-dev.fr/openid/", + "clientName": "SIB App", "endpoints": { "businessproviders": "https://api.test-nantes.happy-dev.fr/businessproviders/", "circles": "https://api.test-nantes.happy-dev.fr/circles/", 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"}` )