From bb40beb449a4ce7b8256eaa9a53867cef4579d2e Mon Sep 17 00:00:00 2001 From: Calum Mackervoy Date: Thu, 9 Jan 2020 15:21:17 +0100 Subject: [PATCH 01/11] customer dropdown in edit-project --- config.sample.json | 1 + src/page-project-edit.pug | 28 ++++------------------------ 2 files changed, 5 insertions(+), 24 deletions(-) diff --git a/config.sample.json b/config.sample.json index 27aed52..54ce4fc 100644 --- a/config.sample.json +++ b/config.sample.json @@ -7,6 +7,7 @@ "groups": "http://localhost:8000/groups/", "joboffers": "http://localhost:8000/job-offers/", "projects": "http://localhost:8000/projects/", + "customers": "http://localhost:8000/customers/", "skills": "http://localhost:8000/skills/", "users": "http://localhost:8000/users/" } diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug index 19a0dc1..2ea3ab8 100644 --- a/src/page-project-edit.pug +++ b/src/page-project-edit.pug @@ -13,18 +13,16 @@ div.content-box__info sib-form.form-container.block( bind-resources - fields='fieldset-info, block-project__info(customer.name, name, customer.logo, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee), fieldset-customer, block-project__customer(customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone)' + fields='fieldset-info, block-project__info(customer, name, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)' - class-customer.name='form-label is-light is-half-width' + class-customer='form-label is-light is-half-width' class-name='form-label is-light is-half-width' - class-customer.logo='form-label is-light is-full-width' class-description='form-label is-light is-full-width' label-fieldset-info='' - label-customer.name='Customer\'s name' + label-customer='Customer' + range-customer=`${endpoints.customer}` label-name='Project\'s name*' - label-customer.logo='Customer\'s logo' label-description='Project description' - upload-url-customer.logo='' widget-fieldset-info='hd-fieldset-title' widget-description='sib-form-textarea' @@ -36,24 +34,6 @@ div.content-box__info label-businessproviderfee='Amount of the contribution' widget-fieldset-fee='hd-fieldset-title' - class-fieldset-customer='fieldset' - class-customer.companyregister='form-label is-light is-half-width' - class-customer.address='form-label is-light is-half-width' - class-customer.firstname='form-label is-light is-half-width' - class-customer.lastname='form-label is-light is-half-width' - class-customer.role='form-label is-light is-half-width' - class-customer.email='form-label is-light is-half-width' - class-customer.phone='form-label is-light is-half-width' - label-fieldset-customer='Customer\'s information' - label-customer.companyregister='Company register*' - label-customer.address='Address' - label-customer.firstname='Name of the contact at the customer\'s premises' - label-customer.lastname='Firstname of the contact at the customer\'s premises' - label-customer.role='Role within the company' - label-customer.email='Email' - label-customer.phone='Phone' - widget-fieldset-customer='hd-fieldset-title' - submit-button='Save' ) From e50845455ba1f46115c3fa522beddaeb0613a154 Mon Sep 17 00:00:00 2001 From: Calum Mackervoy Date: Mon, 13 Jan 2020 10:33:36 +0100 Subject: [PATCH 02/11] customer dropdown in project-edit --- src/page-project-edit.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug index 2ea3ab8..bb1fe73 100644 --- a/src/page-project-edit.pug +++ b/src/page-project-edit.pug @@ -20,7 +20,7 @@ div.content-box__info class-description='form-label is-light is-full-width' label-fieldset-info='' label-customer='Customer' - range-customer=`${endpoints.customer}` + range-customer=`${endpoints.customers}` label-name='Project\'s name*' label-description='Project description' widget-fieldset-info='hd-fieldset-title' From 6a0821a59b7a0bd7fe5c948c4115c61bb5f2ff42 Mon Sep 17 00:00:00 2001 From: Calum Mackervoy Date: Mon, 13 Jan 2020 11:50:45 +0100 Subject: [PATCH 03/11] customer dropdown for project create --- src/page-project-create.pug | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/src/page-project-create.pug b/src/page-project-create.pug index 80cbcea..87182c3 100644 --- a/src/page-project-create.pug +++ b/src/page-project-create.pug @@ -7,24 +7,15 @@ range-members=`${endpoints.users}`, range-team=`${endpoints.users}`, - fields='block-project__info(customer.name, name, customer.logo, description), block-project__fee(fieldset-fee, businessProvider, businessProviderFee), block-project__customer(fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone)', + fields='block-project__info(customer, name, description), block-project__fee(fieldset-fee, businessProvider, businessProviderFee)', - label-customer.name='Customer\'s name', + label-customer='Customer', + range-customer=`${endpoints.customers}`, label-name='Project\'s name', - label-customer.logo='Customer\'s logo', label-description='Project description', widget-fieldset-fee='hd-template-project-title', label-businessProvider='Business provider', label-businessProviderFee='Amount of the contribution', - - widget-fieldset-customer='hd-template-project-title', - label-customer.companyRegister='Company register', - label-customer.address='Address', - label-customer.firstName='Name of the contact at the customer\'s premises', - label-customer.lastName='Firstname of the contact at the customer\'s premises', - label-customer.role='Role within the company', - label-customer.email='Email', - label-customer.phone='Phone' ) \ No newline at end of file From b0e7584a076973c78fed0fbcd632895d4b691aff Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Thu, 16 Jan 2020 18:48:21 +0100 Subject: [PATCH 04/11] css for project-edit added + refactoring --- src/page-admin-projects-create.pug | 5 +- src/page-circle-edit.pug | 6 +- src/page-project-edit.pug | 105 ++++++------ src/styles/base/form.scss | 23 ++- src/styles/base/table.scss | 1 + src/styles/layout/circle/_index.scss | 1 - src/styles/layout/circle/circle-edit.scss | 161 ------------------ src/styles/layout/circle/circle-profile.scss | 9 - src/styles/layout/project-profile/_index.scss | 2 +- 9 files changed, 82 insertions(+), 231 deletions(-) delete mode 100644 src/styles/layout/circle/circle-edit.scss diff --git a/src/page-admin-projects-create.pug b/src/page-admin-projects-create.pug index 92dd724..3ea8961 100644 --- a/src/page-admin-projects-create.pug +++ b/src/page-admin-projects-create.pug @@ -32,8 +32,9 @@ div.content-box__info widget-fieldset-captain='hd-template-project-title' label-customer='Customer' - class-customer='form-label is-light is-half-width' - range-customer=`${endpoints.customers}`, + class-customer='member-select form-label is-light is-half-width' + range-customer=`${endpoints.customers}` + widget-customer='sib-form-auto-completion' label-name='Project\'s name*' class-name='form-label is-light is-half-width' diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 2a7bab0..930302e 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -41,7 +41,7 @@ div.content-box__info sib-ac-checker(permission='acl:Write', bind-resources) h1 Edit your circle - sib-form.block.circle-edit-form( + sib-form.block.form-edit( bind-resources fields='block-circle__info(name, owner), description' @@ -65,7 +65,7 @@ div.content-box__info h2 Members list sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') - sib-form.block.team-form( + sib-form.block.select-add-member( bind-resources nested-field='members' fields='user' @@ -84,7 +84,7 @@ div.content-box__info div Name div Access - //-class='table-body' + //-class='table-body' sib-display( class='table-body' bind-resources diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug index bb1fe73..2a5be6c 100644 --- a/src/page-project-edit.pug +++ b/src/page-project-edit.pug @@ -1,69 +1,70 @@ div.content-box__info - include templates/hd-user-avatar.pug + include templates/hd-user-avatar.pug - sib-widget(name='hd-fieldset-title') - template - label ${label} + sib-widget(name='hd-fieldset-title') + template + label ${label} - sib-link(class='backlink', bind-resources, next='project-profile') Back + sib-link(class='backlink', bind-resources, next='project-profile') Back - h1 Edit your project + h1 Edit your project - sib-form.form-container.block( - bind-resources - - fields='fieldset-info, block-project__info(customer, name, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)' + sib-form.block.form-edit( + bind-resources + + fields='fieldset-info, block-project__info(customer, name, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)' - class-customer='form-label is-light is-half-width' - class-name='form-label is-light is-half-width' - class-description='form-label is-light is-full-width' - label-fieldset-info='' - label-customer='Customer' - range-customer=`${endpoints.customers}` - label-name='Project\'s name*' - label-description='Project description' - widget-fieldset-info='hd-fieldset-title' - widget-description='sib-form-textarea' + class-customer='member-select form-label is-light is-half-width' + widget-customer='sib-form-auto-completion' + class-name='form-label is-light is-half-width' + class-description='form-label is-light is-full-width' + label-fieldset-info='' + label-customer='Customer' + range-customer=`${endpoints.customers}` + label-name='Project\'s name*' + label-description='Project description' + widget-fieldset-info='hd-fieldset-title' + widget-description='sib-form-textarea' - class-fieldset-fee='fieldset' - class-businessprovider='form-label is-light is-half-width' - class-businessproviderfee='form-label is-light is-half-width' - label-fieldset-fee='Fee' - label-businessprovider='Business provider' - label-businessproviderfee='Amount of the contribution' - widget-fieldset-fee='hd-fieldset-title' + class-fieldset-fee='fieldset' + class-businessprovider='form-label is-light is-half-width' + class-businessproviderfee='form-label is-light is-half-width' + label-fieldset-fee='Fee' + label-businessprovider='Business provider' + label-businessproviderfee='Amount of the contribution' + widget-fieldset-fee='hd-fieldset-title' - submit-button='Save' - ) + submit-button='Save' + ) - h2 Members List + h2 Members List - sib-form.block.team-form( - bind-resources - nested-field='members' - fields='user' - range-user=`${endpoints.users}` + sib-form.block.select-add-member( + bind-resources + nested-field='members' + fields='user' + range-user=`${endpoints.users}` - class-user='team form-label is-dark' - label-user='' - widget-user='sib-form-auto-completion' + class-user='team form-label is-dark' + label-user='' + widget-user='sib-form-auto-completion' - submit-button='Add a member' - ) + submit-button='Add a member' + ) - .table + .table - div.table-header.grey-color - div Name - div Access + div.table-header.grey-color + div Name + div Access - //-class='table-body' - sib-display( - class='table-body' - bind-resources - fields='members' + //-class='table-body' + sib-display( + class='table-body' + bind-resources + fields='members' - multiple-members='' - widget-members='team-template-edit' - ) + multiple-members='' + widget-members='team-template-edit' + ) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 3dff76e..388f197 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -100,11 +100,13 @@ /* CLASSES Peut-être à sortir de .content-box */ - .block.team-form>form { /* circle-profile */ + .block.select-add-member>form { /* circle-profile */ display: flex; flex-direction: row; + margin-bottom: 2.6rem; label { + margin-top: 0; >.ss-main { font-weight: normal; @@ -149,7 +151,24 @@ .form-container>form { margin-top: 2.7rem; - } + } + + .form-edit { + + >form { + + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-dark, + .bordered; + margin-left: auto; + margin-top: 3.2rem; + } + } + } .form-label { /*flex: 1 1 auto;*/ diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss index 6b5b0be..af42ed7 100644 --- a/src/styles/base/table.scss +++ b/src/styles/base/table.scss @@ -2,6 +2,7 @@ #circle-edit, #admin-circle-list, #admin-circle-create, +#project-edit, #admin-project-list, #admin-project-create { diff --git a/src/styles/layout/circle/_index.scss b/src/styles/layout/circle/_index.scss index 8ef0299..940c5fc 100644 --- a/src/styles/layout/circle/_index.scss +++ b/src/styles/layout/circle/_index.scss @@ -1,4 +1,3 @@ @import 'circle'; @import 'circle-profile'; -@import 'circle-edit'; @import 'circle-admin'; diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss deleted file mode 100644 index c1e2683..0000000 --- a/src/styles/layout/circle/circle-edit.scss +++ /dev/null @@ -1,161 +0,0 @@ -#circle-edit { - - .circle-edit-form>form { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-dark, - .bordered; - margin-left: auto; - margin-top: 3.2rem; - } - } - - /*.table-header { - background: $color-228-25-79; - color: white; - display: flex; - font-size: 1.6rem; - font-weight: 600; - justify-content: space-around; - text-align: center; - - >*{ - border-right: 1px solid white; - flex: 1; - padding: 1rem; - width: 50%; - } - - >*:last-of-type { - border-right: 1px solid $color-228-25-79; - - @media (max-width: 1220px) { - display: none; - } - } - }*/ - - /*.table-body div team-template-edit { - display: flex; - justify-content: space-between; - - >* { - border-bottom: 1px solid $color-228-25-79; - flex: 1; - width: 50%; - } - - sib-display { - border-left: 1px solid $color-228-25-79; - padding: 0 2.2rem; - } - - sib-ac-checker { - align-items: center; - border-left: 1px solid $color-228-25-79; - border-right: 1px solid $color-228-25-79; - display: flex; - justify-content: flex-end; - padding: 2.7rem 2.2rem; - - @media (max-width: 1220px) { - display: none; - } - } - }*/ - - .member-select.color { - - .ss-main { - color: $color-233-18-29; - } - } - - /*sib-multiple[widget='team-template-edit'] { - - label { - display: none; - } - - >div>team-template-edit>sib-display>div { - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); - - >[name$='account.picture'] { - align-items: center; - align-self: center; - background-color: $color-213-20-91; - border-radius: 50%; - display: flex; - grid-column: 1 / span 1; - grid-row: 1 / span 2; - height: 7vh; - justify-content: center; - overflow: hidden; - position: relative; - width: 7vh; - - img { - background-color: white; - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; - } - - object { - height: 45%; - width: 45%; - } - } - - >[name='sup'] { - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; - - [name$='name'] { - font-weight: 600; - margin-right: 1rem; - } - - sib-multiple { - display: flex; - - [name='groups'] { - @extend %tag-role; - } - } - } - - >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; - - >[name$='profile.city']:not(:empty) { - @include mdi('atom'); - align-items: center; - display: flex; - - &::before { - color: $color-43-100-50; - margin-right: 0.50rem; - } - } - } - } - }*/ -} - diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index 96e50e5..63bf22a 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -7,16 +7,7 @@ .block { - >form { /* peut-être à mettre dans main.scss */ - margin-bottom: 2.6rem; - - .form-label.is-dark>label { - margin-top: 0; - } - } - /* peut-être à mettre dans main.scss */ - circle-team-template>sib-display>div { display: grid; grid-column-gap: 1.6rem; diff --git a/src/styles/layout/project-profile/_index.scss b/src/styles/layout/project-profile/_index.scss index 0ff827c..74f68a7 100644 --- a/src/styles/layout/project-profile/_index.scss +++ b/src/styles/layout/project-profile/_index.scss @@ -1,2 +1,2 @@ @import 'project'; -@import 'project-profile'; \ No newline at end of file +@import 'project-profile'; From cd9e478264051f6a5312760de4eadea6d454ea68 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Sat, 18 Jan 2020 15:51:43 +0100 Subject: [PATCH 05/11] scrollbars on left menu and content added --- src/menu-left.pug | 50 +++++++++++++++--------------- src/styles/base/main.scss | 18 +++++++++-- src/styles/base/menu-left.scss | 26 ---------------- src/styles/components/sidebar.scss | 7 +++-- 4 files changed, 44 insertions(+), 57 deletions(-) diff --git a/src/menu-left.pug b/src/menu-left.pug index 44880da..52bbfcb 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -19,31 +19,31 @@ nav#main__menu //- sib-route(name='job-offer-create', hidden) //- sib-route(name='job-offer-edit', use-id, hidden) //- div.divider - //- div.menu-wrapper - //- div.menu - //- div.menu-chevron - //- div.menu-icon.icon-arrow-up - //- div.menu-label Projects - //- div.menu-icon.icon-folder-alt - //- sib-route(name='project', rdf-type='hd:project', use-id='', hidden) - //- div.sub-menu.menu-notification - //- sib-display.project-tab( - //- data-src=`${endpoints.projects}` - //- fields='project(customer.name, name), badge' - //- class-customer.name='project-customer' - //- class-name='project-name' - //- empty-widget='hd-create' - //- empty-value='project' - //- search-fields='team' - //- search-widget-team='sib-form-hidden' - //- search-value-team='-' - //- hd-inherit-user-id='search-value-team' - //- hd-inherit-widgets - //- widget-badge='hd-counter' - //- action-badge='badge' - //- order-by='customer.name' - //- next='project' - //- ) + div.menu-wrapper + div.menu + div.menu-chevron + div.menu-icon.icon-arrow-up + div.menu-label Projects + div.menu-icon.icon-folder-alt + sib-route(name='project', rdf-type='hd:project', use-id='', hidden) + div.sub-menu.menu-notification + sib-display.project-tab( + data-src=`${endpoints.projects}` + fields='project(customer.name, name), badge' + class-customer.name='project-customer' + class-name='project-name' + empty-widget='hd-create' + empty-value='project' + search-fields='team' + search-widget-team='sib-form-hidden' + search-value-team='-' + hd-inherit-user-id='search-value-team' + hd-inherit-widgets + widget-badge='hd-counter' + action-badge='badge' + order-by='customer.name' + next='project' + ) div.divider div div.menu diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 4afff70..4d4a0ba 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -22,16 +22,28 @@ $breakpoints: (phone: 480px, font-size: 1.6rem; min-height: 100vh; overflow-wrap: break-word; + overflow-x: hidden; /* To stop getting horizontal scrolling if anything overflows the width */ } main { display: flex; - flex-direction: row; - max-width: 100%; + overflow: hidden; + height: calc(100vh - 83px); /* 83px = height of the header */ + position: relative; + width: 100%; + + backface-visibility: hidden; + /*will-change: overflow;*/ } } - +/* Add scrollbar to the left and right menu, and to the content */ +nav, .views-container { + overflow: auto; + height: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: none; +} /* Quick fix. Will be removed later */ #admin-circles, diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 9848525..35a6246 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -121,32 +121,6 @@ hd-counter { margin-top: 16px; - margin-left: 8px; - } - - &:hover { - background-color: $color-233-20-17; - box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26); - - sib-set-default[name='project'] { - background-color: $color-233-20-17; - color: $color-218-100-98; - /* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */ - z-index: 1000; - - .project-customer, - .project-name { - width: auto; - } - - .project-name { - font-weight: normal; - } - } - - hd-counter { - display: none; - } } } /* End of specific styles of "Projects" tab */ diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index 1e93db5..d1d12ef 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -12,7 +12,7 @@ .views-container { flex: 1 0 0; - -webkit-backface-visibility: hidden; + /*-webkit-backface-visibility: hidden;*/ &.sidebar-is-closed { margin-left: -15.5rem; @@ -27,6 +27,7 @@ nav { background: $color-210-25-95; transition: all 0.5s; + width: 25rem; >sib-router { background-color: $color-222-52-90; @@ -49,13 +50,13 @@ margin: 0; padding: 2.15rem 2.55rem; position: relative; - width: 12em; + /*width: 12em;*/ &::before { float: left; font-size: 4rem; margin-left: 0; - margin-right: 2.55rem; + margin-right: 2.85rem; } } From 90a92cc832cd283f4fc8b95a79e83a3ac3b2eec8 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Sat, 18 Jan 2020 21:43:41 +0100 Subject: [PATCH 06/11] scrollbars are customised --- src/styles/base/main.scss | 41 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 4d4a0ba..bba7e80 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -45,6 +45,46 @@ nav, .views-container { -ms-overflow-style: none; } +/* Custom scrollbar of the left-menu */ +nav { + scrollbar-width: thin; + scrollbar-color: $color-244-10-70 $color-233-18-29; + + &::-webkit-scrollbar-track { + background: $color-233-18-29; + } + + &::-webkit-scrollbar-thumb { + background-color: $color-244-10-70; + border-radius: 6px; + border: 3px solid $color-233-18-29; + } + + &::-webkit-scrollbar { + width: 11px; + } +} + +/* Custom scrollbar of the content */ +.views-container { + scrollbar-width: thin; + scrollbar-color: $color-244-10-70 white; + + &::-webkit-scrollbar-track { + background: white; + } + + &::-webkit-scrollbar-thumb { + background-color: $color-244-10-70; + border-radius: 6px; + border: 3px solid white; + } + + &::-webkit-scrollbar { + width: 11px; + } +} + /* Quick fix. Will be removed later */ #admin-circles, #admin-projects { @@ -52,7 +92,6 @@ nav, .views-container { } - img { max-height: 100%; max-width: 100%; From 56953601e142e3b7eb9b287193042d2835ebb30e Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Sun, 19 Jan 2020 10:48:22 +0100 Subject: [PATCH 07/11] Left menu is responsive --- src/header.pug | 3 ++ src/styles/abstracts/_mixins.scss | 56 ++++++++++++++++++++++++++++++- src/styles/base/header.scss | 12 +++++++ src/styles/base/menu-left.scss | 17 ++++++++++ 4 files changed, 87 insertions(+), 1 deletion(-) diff --git a/src/header.pug b/src/header.pug index 2c2ec98..3e47e55 100644 --- a/src/header.pug +++ b/src/header.pug @@ -24,6 +24,9 @@ details#user-controls #user-controls__panel include page-user-panel.pug +.mobile-menu-icon + button.icon-menu + button(role='log in' onclick="document.querySelector('sib-auth').login();") Login sib-auth diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss index 741219e..3ff49c7 100644 --- a/src/styles/abstracts/_mixins.scss +++ b/src/styles/abstracts/_mixins.scss @@ -1,4 +1,58 @@ @mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) { box-shadow: 0 0 8px 0 $shadow; background-color: $background; -} \ No newline at end of file +} + +@mixin breakpoint($min: 0, $max: 0) { + $type: type-of($min); + + @if $type==string { + @if $min==xs { + @media (max-width: 768px) { + @content; + } + } + + @else if $min==sm { + @media (max-width: 1024px) { + @content; + } + } + + @else if $min==md { + @media (max-width: 1200px) { + @content; + } + } + + @else if $min==lg { + @media (min-width: 1201px) { + @content; + } + } + + @else { + @warn "Beware ! Breakpoints mixin supports xs, sm, md, lg"; + } + } + + @else if $type==number { + $query: "all" !default; + + @if $min !=0 and $max !=0 { + $query: "(min-width: #{$min}) and (max-width: #{$max})"; + } + + @else if $min !=0 and $max==0 { + $query: "(min-width: #{$min})"; + } + + @else if $min==0 and $max !=0 { + $query: "(max-width: #{$max});" + } + + @media #{$query} { + @content; + } + } +} diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 51cc2af..6d1e7b5 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -168,6 +168,10 @@ &::before { margin-left: 1.5rem; } + + @include breakpoint(sm) { + display: none; + } } } } @@ -236,5 +240,13 @@ } } } + + .mobile-menu-icon { + display: none; + + @include breakpoint(sm) { + display: block; + } + } } diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 35a6246..f889e74 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -188,4 +188,21 @@ background-color: $color-213-13-86; } } + + &.mobile-opened { + @include breakpoint(sm) { + bottom: 0; + min-width: 80%; + position: fixed; + right: 0; + top: 0; + z-index: 1; + } + } + + &.mobile-closed { + @include breakpoint(sm) { + display: none; + } + } } From 3e281edc5c260a15d369fce5f9746c86f3356bd3 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Sun, 19 Jan 2020 13:19:25 +0100 Subject: [PATCH 08/11] Sidebar is responsive --- src/header.pug | 2 +- src/menu-left.pug | 2 +- src/page-project.pug | 5 ++++- src/styles/base/main.scss | 34 ++++++++++++++++++++++++++++++ src/styles/base/menu-left.scss | 7 ++++-- src/styles/components/sidebar.scss | 23 +++++++++++++++++++- 6 files changed, 67 insertions(+), 6 deletions(-) diff --git a/src/header.pug b/src/header.pug index 3e47e55..c95b909 100644 --- a/src/header.pug +++ b/src/header.pug @@ -24,7 +24,7 @@ details#user-controls #user-controls__panel include page-user-panel.pug -.mobile-menu-icon +.jsToggleLeftMenu.mobile-menu-icon button.icon-menu button(role='log in' onclick="document.querySelector('sib-auth').login();") Login diff --git a/src/menu-left.pug b/src/menu-left.pug index 52bbfcb..46b0d93 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -7,7 +7,7 @@ sib-widget(name='hd-create') p.create You are not part of any ${value} yet. To create a new one, you can go to the sib-link(next='admin') administration panel -nav#main__menu +nav#main__menu.jsLeftMenu.mobile-closed sib-router#navbar-router(default-route='members') //- sib-route.menu(name='members') //- div.menu-label Members diff --git a/src/page-project.pug b/src/page-project.pug index 00ec69a..9cf8f7d 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -13,6 +13,9 @@ value-const-title1='N°' ) + .mobile-sidebar-button.jsMobileSidebarOpenButton + button.icon-arrow-left-circle + span MENU div.content-box__info sib-ac-checker(permission='acl:Read', bind-resources) #project-chat(hidden) @@ -25,7 +28,7 @@ dialog(id='project-contributions-help').modal button.icon-close img(src='/images/contributions-help.png') -nav.jsRightMenu(role='navigation') +nav.jsRightMenu.mobile-closed(role='navigation') sib-router(default-route='project-chat') ul li.jsOffsiteToggle diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index bba7e80..599f4c0 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -199,6 +199,40 @@ h5 { border-bottom: 1px solid $color-221-51-90; padding: 3rem; + @include breakpoint(sm) { + background: $color-221-51-90; + } + + sib-display { + @include breakpoint(sm) { + float: left; + } + } + + .mobile-sidebar-button { + @include breakpoint(sm) { + float: right; + + button { + color: $color-233-18-29; + + &::before { + font-size: 2.2rem; + margin-right: 1.2rem; + } + } + + span { + font-size: 1.8rem; + font-weight: bold; + } + } + + @include breakpoint($min: 1025px, $max: 0) { + display: none; + } + } + div { .h1-aside { diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index f889e74..e228084 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -189,9 +189,11 @@ } } - &.mobile-opened { + &.jsLeftMenu.mobile-opened { + @include breakpoint(sm) { bottom: 0; + box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); min-width: 80%; position: fixed; right: 0; @@ -200,7 +202,8 @@ } } - &.mobile-closed { + &.jsLeftMenu.mobile-closed { + @include breakpoint(sm) { display: none; } diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index d1d12ef..652b17d 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -111,12 +111,33 @@ } } - &.offsite-is-closed { + &.jsRightMenu.offsite-is-closed { transform: translate(15.5rem); & .jsOffsiteToggle::before { transform: rotate(180deg); } } + + &.jsRightMenu.mobile-opened { + + @include breakpoint(sm) { + background: $color-221-51-90; + bottom: 0; + box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12); + min-width: 60%; + position: fixed; + right: 0; + top: 83px; + z-index: 1; + } + } + + &.jsRightMenu.mobile-closed { + + @include breakpoint(sm) { + display: none; + } + } } } \ No newline at end of file From 5a20cfe3a82e9af8bf247705ac42ed4820a82df1 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Sun, 19 Jan 2020 13:57:34 +0100 Subject: [PATCH 09/11] header is responsive --- src/styles/base/header.scss | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 6d1e7b5..95daac6 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -8,13 +8,10 @@ display: flex; flex-shrink: 0; // padding: 1.6rem 0.64rem; + padding: 0 2.5rem; position: relative; z-index: 1; - > *:not(sib-widget) { - padding: 0 2.5rem; - } - #logo { flex: 1 1 0; } @@ -58,9 +55,20 @@ } } } + + sib-notifications { + + @include breakpoint(sm) { + padding: 0; + } + } details { margin-right: 2.5rem; + + @include breakpoint(sm) { + margin-right: 0; + } summary { @@ -142,6 +150,10 @@ margin-right: 2rem; overflow: hidden; width: 4.8rem; + + @include breakpoint(sm) { + margin-right: 0; + } } img { @@ -246,6 +258,7 @@ @include breakpoint(sm) { display: block; + padding-left: 0; } } } From 36a045cacbd56221a5b745b3c67c15ef05723964 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Sun, 19 Jan 2020 14:25:08 +0100 Subject: [PATCH 10/11] sidebar is responsive for the circles --- src/page-circle.pug | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/page-circle.pug b/src/page-circle.pug index 36a443b..6ef5127 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -9,6 +9,9 @@ class-name='h1-like' class-description='h1-aside description' ) + .mobile-sidebar-button.jsMobileSidebarOpenButton + button.icon-arrow-left-circle + span MENU div.content-box__info sib-ac-checker(permission='acl:Read', bind-resources) #circle-chat(hidden) @@ -16,7 +19,7 @@ #circle-information(hidden) include page-circle-profile.pug -nav.jsRightMenu(role='navigation') +nav.jsRightMenu.mobile-closed(role='navigation') sib-router(default-route='circle-chat') ul li.jsOffsiteToggle From 83e69579340af6511b6a134a5365f84ec23f5d57 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 20 Jan 2020 13:57:03 +0100 Subject: [PATCH 11/11] fix a lot of problems and add js for menus --- src/header.pug | 7 +- src/menu-left.pug | 55 ++++++------ src/page-admin.pug | 8 +- src/page-circle-edit.pug | 2 +- src/page-circle-profile.pug | 6 +- src/page-circle.pug | 8 +- src/page-project.pug | 4 +- src/scripts/index.js | 91 +++++++++++++++----- src/styles/base/header.scss | 5 ++ src/styles/base/main.scss | 19 ++-- src/styles/base/menu-left.scss | 17 ++-- src/styles/components/sidebar.scss | 25 +++--- src/styles/layout/circle/circle-profile.scss | 4 +- src/templates/hd-circle-team.pug | 27 +++--- src/templates/hd-project-team.pug | 8 +- 15 files changed, 169 insertions(+), 117 deletions(-) diff --git a/src/header.pug b/src/header.pug index c95b909..ff59b10 100644 --- a/src/header.pug +++ b/src/header.pug @@ -14,7 +14,7 @@ sib-notifications( include templates/hd-user-avatar.pug -details#user-controls +details#user-controls.notLoggedIn summary(tabindex='0' role='button') sib-display#user-controls__profile( fields='firstName, account.picture' @@ -24,11 +24,10 @@ details#user-controls #user-controls__panel include page-user-panel.pug -.jsToggleLeftMenu.mobile-menu-icon - button.icon-menu - button(role='log in' onclick="document.querySelector('sib-auth').login();") Login +button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu + sib-auth sib-auth-provider( data-authority=`${authority}` diff --git a/src/menu-left.pug b/src/menu-left.pug index 46b0d93..e5fec82 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -7,7 +7,7 @@ sib-widget(name='hd-create') p.create You are not part of any ${value} yet. To create a new one, you can go to the sib-link(next='admin') administration panel -nav#main__menu.jsLeftMenu.mobile-closed +nav#main__menu.jsLeftMenu sib-router#navbar-router(default-route='members') //- sib-route.menu(name='members') //- div.menu-label Members @@ -19,32 +19,33 @@ nav#main__menu.jsLeftMenu.mobile-closed //- sib-route(name='job-offer-create', hidden) //- sib-route(name='job-offer-edit', use-id, hidden) //- div.divider - div.menu-wrapper - div.menu - div.menu-chevron - div.menu-icon.icon-arrow-up - div.menu-label Projects - div.menu-icon.icon-folder-alt - sib-route(name='project', rdf-type='hd:project', use-id='', hidden) - div.sub-menu.menu-notification - sib-display.project-tab( - data-src=`${endpoints.projects}` - fields='project(customer.name, name), badge' - class-customer.name='project-customer' - class-name='project-name' - empty-widget='hd-create' - empty-value='project' - search-fields='team' - search-widget-team='sib-form-hidden' - search-value-team='-' - hd-inherit-user-id='search-value-team' - hd-inherit-widgets - widget-badge='hd-counter' - action-badge='badge' - order-by='customer.name' - next='project' - ) - div.divider + //- div + //- div.menu + //- div.menu-chevron + //- sib-link(next='admin-project-list') + //- div.menu-icon.icon-arrow-right + //- div.menu-label Projects + //- div.menu-icon.icon-folder-alt + //- sib-route(name='project', rdf-type='hd:project', use-id='', hidden) + //- div.sub-menu.menu-notification + //- sib-display.project-tab( + //- data-src=`${endpoints.projects}` + //- fields='project(customer.name, name), badge' + //- class-customer.name='project-customer' + //- class-name='project-name' + //- empty-widget='hd-create' + //- empty-value='project' + //- search-fields='team' + //- search-widget-team='sib-form-hidden' + //- search-value-team='-' + //- hd-inherit-user-id='search-value-team' + //- hd-inherit-widgets + //- widget-badge='hd-counter' + //- action-badge='badge' + //- order-by='customer.name' + //- next='project' + //- ) + //- div.divider div div.menu div.menu-chevron diff --git a/src/page-admin.pug b/src/page-admin.pug index 2dd6834..049e6ca 100644 --- a/src/page-admin.pug +++ b/src/page-admin.pug @@ -1,4 +1,4 @@ -.views-container +.views-container.sidebar-is-closed #admin-circles(hidden) include page-admin-circles.pug #admin-projects(hidden) @@ -16,6 +16,6 @@ nav.jsRightMenu(role='navigation') sib-route(name='admin-circles') li a Circles - sib-route(name='admin-projects') - li - a Projects + //- sib-route(name='admin-projects') + //- li + //- a Projects diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 930302e..f4f0c6a 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -3,7 +3,7 @@ div.content-box__info include templates/hd-user-avatar.pug sib-widget(name='hd-user-groups') - template ${value.name} + template ${await value.name} sib-widget(name='team-template-edit') template diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index eb36bfc..cd4e302 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -25,10 +25,10 @@ sib-router(default-route='circle-profile', hidden) sib-display.block( bind-resources - fields='members.user' + fields='members' - multiple-members.user='' - widget-members.user='circle-team-template' + multiple-members='' + widget-members='circle-team-template' ) div.box-button diff --git a/src/page-circle.pug b/src/page-circle.pug index 6ef5127..e938ee3 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -1,4 +1,4 @@ -.views-container +.views-container.sidebar-is-closed .content-box.full-width.with-form div.content-box__header sib-ac-checker(permission='acl:Read', bind-resources) @@ -9,9 +9,7 @@ class-name='h1-like' class-description='h1-aside description' ) - .mobile-sidebar-button.jsMobileSidebarOpenButton - button.icon-arrow-left-circle - span MENU + button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU div.content-box__info sib-ac-checker(permission='acl:Read', bind-resources) #circle-chat(hidden) @@ -19,7 +17,7 @@ #circle-information(hidden) include page-circle-profile.pug -nav.jsRightMenu.mobile-closed(role='navigation') +nav.jsRightMenu(role='navigation') sib-router(default-route='circle-chat') ul li.jsOffsiteToggle diff --git a/src/page-project.pug b/src/page-project.pug index 9cf8f7d..ae2e06c 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -1,4 +1,4 @@ -.views-container +.views-container.sidebar-is-closed .content-box.full-width.with-form div.content-box__header sib-ac-checker(permission='acl:Read', bind-resources) @@ -28,7 +28,7 @@ dialog(id='project-contributions-help').modal button.icon-close img(src='/images/contributions-help.png') -nav.jsRightMenu.mobile-closed(role='navigation') +nav.jsRightMenu(role='navigation') sib-router(default-route='project-chat') ul li.jsOffsiteToggle diff --git a/src/scripts/index.js b/src/scripts/index.js index b50faf0..ea62622 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -48,14 +48,33 @@ function closeUserControls() { if (userControls) userControls.removeAttribute("open"); } +function closeLeftMenu() { + let leftMenu = document.querySelector('#main__menu'); + if (leftMenu) leftMenu.removeAttribute("open"); +} + +function closeRightMenu() { + let rightMenu = document.querySelectorAll('.jsRightMenu'); + if(Array.from(rightMenu).filter(el=>el.hasAttribute('open')).length > 0) { + Array.from(document.querySelectorAll('.views-container')).forEach(vC => vC.classList.toggle('sidebar-is-closed')); + Array.from(rightMenu).forEach(el => el.removeAttribute('open')); + } +} + +function openRightMenu() { + let rightMenu = document.querySelectorAll('.jsRightMenu'); + Array.from(rightMenu).forEach(el => el.setAttribute('open', '')); + Array.from(document.querySelectorAll('.views-container')).forEach(vC => vC.classList.toggle('sidebar-is-closed')); +} + document.addEventListener('DOMContentLoaded', function (event) { const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper')); - const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu')); - const viewsContainer = Array.from(document.querySelectorAll('.views-container')); //- View change event - // window.addEventListener('navigate', (event) => { - // }); + window.addEventListener('navigate', (event) => { + closeLeftMenu(); + closeUserControls(); + }); //- Toggle sub-menus menuWrappers.forEach(menuWrapper => { @@ -65,35 +84,26 @@ document.addEventListener('DOMContentLoaded', function (event) { }); }); - //- Open/close menu on the right - rightMenus.forEach(rightMenu => { - const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle"); - - btnRightMenu.addEventListener('click', e => { - rightMenus.forEach(rM => rM.classList.toggle('offsite-is-closed')); - viewsContainer.forEach(vC => vC.classList.toggle('sidebar-is-closed')); - }) - }); - //- Watch every sib-forms & update data-src of linked sib-display - document.querySelectorAll('sib-form').forEach(function(el) { - el.addEventListener("save", function(event) { + document.querySelectorAll('sib-form').forEach(function (el) { + el.addEventListener("save", function (event) { //clear cache on this resource //NOTE: this is required because the cache is not refreshed after POSTing changes on the resource - if(el.component.resource != null) el.component.resource.clearCache(); + if (el.component.resource != null) el.component.resource.clearCache(); // if of the edited resource || id of the container of the created resource const resourceId = event.detail.resource['@id'] || el.dataset.src; //update all displays which use this resource Array.from(document.querySelectorAll('sib-display')) - .filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource - .forEach(e => e.dataset.src = e.dataset.src); // and update them + .filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource + .forEach(e => e.dataset.src = e.dataset.src); // and update them }); }); document.querySelector('sib-auth').getUser().then(user => { if (user !== null) { + document.querySelectorAll('.notLoggedIn').forEach(el => el.style.visibility = 'visible'); // Hide login button if already logged document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important'); // Set current user id on set-user-id of sib-display @@ -106,13 +116,52 @@ document.addEventListener('DOMContentLoaded', function (event) { // Document -> close menu document.addEventListener("click", event => { - if (!event.target.closest('#user-controls')) closeUserControls(); + if (!event.target.closest('#user-controls')) { + closeUserControls(); + } + if (!event.target.closest('#main__menu') && event.target.id != "toggleMainMenu") { + closeLeftMenu(); + } + if (!event.target.className.includes('jsMobileSidebarOpenButton') && !event.target.className.includes('jsOffsiteToggle')) { + closeRightMenu(); + } + }); + + document.querySelector('#toggleMainMenu').addEventListener('click', event => { + let leftMenu = document.querySelector('#main__menu'); + if (leftMenu.hasAttribute('open')) { + closeLeftMenu(); + } else { + leftMenu.setAttribute('open', ''); + } + }); + + Array.from(document.querySelectorAll('.jsMobileSidebarOpenButton')).forEach(el => { + el.addEventListener('click', event => { + openRightMenu(); + }); + }); + + const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu')); + rightMenus.forEach(rightMenu => { + const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle"); + btnRightMenu.addEventListener('click', e => { + if (rightMenu.hasAttribute('open')) { + closeRightMenu(); + } else { + openRightMenu(); + } + }) }); // listen for keypress document.onkeydown = (e) => { e = e || window.event; - if (e.key === "Escape" || e.key === "Esc") closeUserControls(); + if (e.key === "Escape" || e.key === "Esc") { + closeUserControls(); + closeLeftMenu(); + closeRightMenu(); + } }; }); \ No newline at end of file diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 95daac6..850e1da 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -56,6 +56,10 @@ } } + .notLoggedIn { + visibility: hidden; + } + sib-notifications { @include breakpoint(sm) { @@ -259,6 +263,7 @@ @include breakpoint(sm) { display: block; padding-left: 0; + font-size: 26px; } } } diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 599f4c0..4aae4ef 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -212,19 +212,14 @@ h5 { .mobile-sidebar-button { @include breakpoint(sm) { float: right; - - button { - color: $color-233-18-29; + color: $color-233-18-29; + font-size: 1.8rem; + font-weight: bold!important; - &::before { - font-size: 2.2rem; - margin-right: 1.2rem; - } - } - - span { - font-size: 1.8rem; - font-weight: bold; + &::before { + font-size: 2.2rem; + font-weight: normal; + margin-right: 1.2rem; } } diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index e228084..1256a05 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -189,9 +189,17 @@ } } - &.jsLeftMenu.mobile-opened { + &.jsLeftMenu { @include breakpoint(sm) { + display: none; + } + } + + &.jsLeftMenu[open] { + + @include breakpoint(sm) { + display: block; bottom: 0; box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); min-width: 80%; @@ -201,11 +209,4 @@ z-index: 1; } } - - &.jsLeftMenu.mobile-closed { - - @include breakpoint(sm) { - display: none; - } - } } diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index 652b17d..8b90344 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -15,8 +15,10 @@ /*-webkit-backface-visibility: hidden;*/ &.sidebar-is-closed { - margin-left: -15.5rem; - transform: translate(15.5rem); + @include breakpoint(769px, 0) { + margin-left: -15.5rem; + transform: translate(15.5rem); + } } } @@ -111,7 +113,14 @@ } } - &.jsRightMenu.offsite-is-closed { + &.jsRightMenu { + + @include breakpoint(sm) { + display: none; + } + } + + &.jsRightMenu:not([open]) { transform: translate(15.5rem); & .jsOffsiteToggle::before { @@ -119,9 +128,10 @@ } } - &.jsRightMenu.mobile-opened { + &.jsRightMenu[open] { @include breakpoint(sm) { + display: block; background: $color-221-51-90; bottom: 0; box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12); @@ -132,12 +142,5 @@ z-index: 1; } } - - &.jsRightMenu.mobile-closed { - - @include breakpoint(sm) { - display: none; - } - } } } \ No newline at end of file diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index 63bf22a..64dbf51 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -14,7 +14,7 @@ grid-template-columns: 7vh auto; grid-template-rows: repeat(2, 5.2vh); - >[name='user.account.picture'] { + >[name='account.picture'] { align-items: center; align-self: center; background-color: $color-213-20-91; @@ -61,7 +61,7 @@ margin-bottom: 1px; margin-left: 0.6rem; - [name='user.groups'] { + [name='groups'] { @extend %tag-role; } } diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug index ff90ce0..846f6e9 100644 --- a/src/templates/hd-circle-team.pug +++ b/src/templates/hd-circle-team.pug @@ -3,23 +3,24 @@ include hd-user-avatar.pug sib-widget(name='circle-team-template') template sib-display( - data-src='${await value}' - fields='user.account.picture, sup(user.name, is_admin, user.groups), sub(user.profile.city)' + data-src='${await value.user}' + fields='account.picture, sup(name, isadmin, groups), sub(profile.city)' + value-isadmin='${await value.is_admin}' - class-user.name='user-name' - class-is_admin='tag-admin' - class-user.groups='tag-group' - class-user.profile.city='city' + class-name='user-name' + class-isadmin='tag-admin' + class-groups='tag-group' + class-profile.city='city' - widget-user.account.picture='hd-user-avatar' - widget-is_admin='hd-user-admin' - widget-user.groups='hd-user-groups' + widget-account.picture='hd-user-avatar' + widget-isadmin='hd-circle-user-admin' + widget-groups='hd-circle-user-groups' - multiple-user.groups='' + multiple-groups='' ) -sib-widget(name='hd-user-admin') - template ${await value ? "Administrator" : ""} +sib-widget(name='hd-circle-user-admin') + template ${(await value) != "false" ? "Administrator" : ""} -sib-widget(name='hd-user-groups') +sib-widget(name='hd-circle-user-groups') template ${await value.name} diff --git a/src/templates/hd-project-team.pug b/src/templates/hd-project-team.pug index c08740a..8fd2458 100644 --- a/src/templates/hd-project-team.pug +++ b/src/templates/hd-project-team.pug @@ -12,14 +12,14 @@ sib-widget(name='hd-project-team') class-user.profile.city='city' widget-user.account.picture='hd-user-avatar' - widget-is_admin='hd-user-admin' - widget-user.groups='hd-user-groups' + widget-is_admin='hd-project-user-admin' + widget-user.groups='hd-project-user-groups' multiple-user.groups='' ) -sib-widget(name='hd-user-admin') +sib-widget(name='hd-project-user-admin') template ${await value ? "Administrator" : ""} -sib-widget(name='hd-user-groups') +sib-widget(name='hd-project-user-groups') template ${await value.name}