From b0e7584a076973c78fed0fbcd632895d4b691aff Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Thu, 16 Jan 2020 18:48:21 +0100 Subject: [PATCH] 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';