From ffd384aa871989da4083f5b053e9ec0795d16b16 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Tue, 12 May 2020 19:14:50 +0200 Subject: [PATCH] update: frameworkisation of forms --- src/styles/base/form.scss | 325 ++++++------------ src/styles/base/main.scss | 4 + src/views/admin/page-admin-circles-create.pug | 2 +- .../admin/page-admin-projects-create.pug | 2 +- src/views/admin/page-admin-users-create.pug | 2 +- src/views/admin/page-admin-users-edit.pug | 2 +- src/views/circle/page-circle-edit.pug | 4 +- src/views/project/page-project-edit.pug | 4 +- 8 files changed, 123 insertions(+), 222 deletions(-) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 8941017..460e10e 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -1,59 +1,98 @@ -#admin-circle-create, -#admin-project-create, -#admin-users-create, -#admin-users-edit { +form { + display: flex; + flex-direction: column; + transition: all .3s ease; +} - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-secondary, - .bordered; - margin-left: auto; - margin-top: 3.2rem; +.button-register>form>input[type=submit] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-secondary, + .bordered; + margin-left: auto; + margin-top: 3.2rem; +} + +.fieldset { + border-bottom: 1px solid var(--color-fieldset-border); + color: var(--color-title); + display: flex; + flex: 1 0 100%; + font-size: 1.8rem; + font-weight: 600; + margin: 2.6rem 0 1.8rem; + padding-bottom: 0.8rem; +} + +.form-label { + /*flex: 1 1 auto;*/ + font-weight: 600; + + &.is-dark label { + color: var(--color-label-dark); + margin-top: 3rem; + + &>*:nth-child(2) { + margin-top: 0.8rem; + } } + + &.is-light label { + color: var(--color-label-light); + margin-top: 1.8rem; + text-transform: uppercase; + + &>*:nth-child(2) { + margin-top: 0.8rem; + } + } +} + +.is-full-width { + flex: 1 1 100%; +} + +.is-half-width { + box-sizing: border-box; + flex: 0 0 50%; + + &:nth-child(even) { + padding-left: 1.7rem; + } + + &:nth-child(odd) { + padding-right: 1.7rem; + } +} + +input:not([type='file']):not([type='search']), +textarea { + -webkit-tap-highlight-color: var(--color-grey-7); + background-color: var(--color-input-background); + box-sizing: border-box; + border: 2px solid var(--color-input-background); + color: var(--color-input-text); + /*flex: 1 1 0; Problem on Firefox for input type date*/ + line-height: 1; + min-width: 0; + padding: 1rem; + + &:focus, + &:active { + border-bottom: 2px solid var(--color-input-active); + } +} + +textarea { + height: 100px; } .content-box { &.with-form { - h1 { - color: var(--color-title); - font-weight: bold; - font-size: 2rem; - - &.centered { - text-align: center; - } - } - - .fieldset { - border-bottom: 1px solid var(--color-fieldset-border); - color: var(--color-title); - display: flex; - flex: 1 0 100%; - font-size: 1.8rem; - font-weight: 600; - margin: 2.6rem 0 1.8rem; - padding-bottom: 0.8rem; - } - - [name^='block-'] { - margin-bottom: 2.75rem; - } - - [name$='border-top'] { - border-top: 1px solid var(--color-grey-10); - margin-top: 3rem; - } - - form { - display: flex; - flex-direction: column; - } - sib-set-default:not([name='user-thumb']) { clear: both; display: flex!important; @@ -66,39 +105,13 @@ } } + /* To align label and input vertically */ label { display: flex; flex-direction: column; - - input:not([type='file']), - textarea { - -webkit-tap-highlight-color: var(--color-grey-7); - background-color: var(--color-input-background); - box-sizing: border-box; - border: 2px solid var(--color-input-background); - color: var(--color-input-text); - /*flex: 1 1 0; Problem on Firefox for input type date*/ - line-height: 1; - min-width: 0; - padding: 1rem; - } - - input:not([type="search"]):not([type="file"]), - textarea { - border: 2px solid var(--color-input-background); - - &:focus, - &:active { - border-bottom: 2px solid var(--color-input-active); - } - } - - textarea { - height: 100px; - } } - sib-form[set-user-id-select] { + /*sib-form[set-user-id-select] { input[type="submit"] { margin-left: 0; @@ -108,156 +121,48 @@ select { display: none; } - } + }*/ - /* CLASSES Peut-être à sortir de .content-box */ - .block.select-add-member>form { /* circle-profile */ - display: flex; - flex-direction: row; - margin-bottom: 2.6rem; + /* WIDGETS SIB (let in .content-box to override default styles) */ - label { - margin-top: 0; + sib-form-auto-completion { - >.ss-main { - font-weight: normal; - min-width: 35vw; - text-transform: none; - - >.ss-single-selected { - align-items: center; - background-color: var(--color-input-background); - border: none; - border-radius: 0px; - color: var(--color-input-text); - display: flex; - justify-content: flex-end; - min-height: 4.2rem; - padding-left: 1.2rem; - - .ss-arrow { - font-size: 1.8rem; - margin: 0 18px 0 0; - - span { - border: solid var(--color-input-icon); - border-width: 0 2px 2px 0; - } - } - } - - .ss-list { - color: var(--color-select-list); - } - } - } - - >input[type='submit'] { - @extend - .button, - .btn-margin-left, - .text-bold, - .text-uppercase, - .button-complementary, - .bordered; - margin-top: auto; - margin-bottom: auto; - } - } - - .form-container>form { - margin-top: 2.7rem; - } - - .form-edit>form { - - input[type='submit'] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-secondary, - .bordered; - margin-left: auto; - margin-top: 3.2rem; - } - } - - .form-label { - /*flex: 1 1 auto;*/ - font-weight: 600; - - &.is-dark label { - color: var(--color-label-dark); - margin-top: 3rem; - - &>*:nth-child(2) { - margin-top: 0.8rem; - } - } - - &.is-light label { - color: var(--color-label-light); - margin-top: 1.8rem; - text-transform: uppercase; - - &>*:nth-child(2) { - margin-top: 0.8rem; - } - } - } - - .is-full-width { - flex: 1 1 100%; - } - - .is-half-width { - box-sizing: border-box; - flex: 0 0 50%; - - &:nth-child(even) { - padding-left: 1.7rem; - } - - &:nth-child(odd) { - padding-right: 1.7rem; - } - } - - /* WIDGETS SIB */ - - sib-form-auto-completion.member-select, hubl-status { - align-self: flex-end; - - >label:first-of-type>div { - font-weight: 600; + .ss-main { + font-weight: normal; + text-transform: none; } .ss-single-selected { + align-items: center; background-color: var(--color-input-background); border: none; border-radius: 0px; color: var(--color-input-text); display: flex; font-weight: normal; - margin-top: 0.8rem; - min-height: 4.4rem; - padding-left: 1rem; + justify-content: flex-end; + min-height: 4.6rem; + padding-left: 1.2rem; text-transform: none; .ss-disabled { color: var(--color-grey-5); } - .ss-arrow span { - border: solid var(--color-input-icon); - border-width: 0 2px 2px 0; + .ss-arrow { + font-size: 1.8rem; + margin: 0 18px 0 0; + + span { + border: solid var(--color-input-icon); + border-width: 0 2px 2px 0; + } } } - .ss-content .ss-list .ss-option { - color: var(--color-input-text); + .ss-list { + color: var(--color-select-list); font-weight: normal; text-transform: none; } @@ -330,15 +235,7 @@ } } - sib-multiple-form { - margin-top: 1.8rem; - } - - sib-multiple-select { - - &.select-groups .ss-values .ss-disabled::before { - content: "Sélectionne des groupes"; - } + /*sib-multiple-select { &.select-skills .ss-values .ss-disabled::before { content: "Select skills"; @@ -413,7 +310,7 @@ } } } - } + }*/ /* CUSTOM WIDGETS */ diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 29f3946..57636ab 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -288,6 +288,10 @@ h5 { } } +.centered { + text-align: center; +} + .name { color: var(--color-grey-1); font-size: 2rem; diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug index 70f19bf..3ae1563 100644 --- a/src/views/admin/page-admin-circles-create.pug +++ b/src/views/admin/page-admin-circles-create.pug @@ -3,7 +3,7 @@ div.content-box__info h1.centered Créer un canal - sib-form( + sib-form.button-register( data-src=`${endpoints.circles || endpoints.post.circles}` fields='status, name, description' diff --git a/src/views/admin/page-admin-projects-create.pug b/src/views/admin/page-admin-projects-create.pug index 44c9101..87ef5d0 100644 --- a/src/views/admin/page-admin-projects-create.pug +++ b/src/views/admin/page-admin-projects-create.pug @@ -18,7 +18,7 @@ div.content-box__info h1.centered Créer un projet - sib-form( + sib-form.button-register( data-src=`${endpoints.projects || endpoints.post.projects}` fields='line-1(customer, name), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-captain, line-10(captain)' diff --git a/src/views/admin/page-admin-users-create.pug b/src/views/admin/page-admin-users-create.pug index ab580b5..f27b2ad 100644 --- a/src/views/admin/page-admin-users-create.pug +++ b/src/views/admin/page-admin-users-create.pug @@ -3,7 +3,7 @@ div.content-box__info h1.centered Ajouter un utilisateur à la plateforme - sib-form( + sib-form.button-register( data-src=`${endpoints.users || endpoints.post.users}` range-groups=`${endpoints.groups || endpoints.get.groups}` diff --git a/src/views/admin/page-admin-users-edit.pug b/src/views/admin/page-admin-users-edit.pug index 61fddec..c18b4d5 100644 --- a/src/views/admin/page-admin-users-edit.pug +++ b/src/views/admin/page-admin-users-edit.pug @@ -8,7 +8,7 @@ div.content-box__info fields='name' ) - sib-form( + sib-form.button-register( bind-resources='' range-groups=`${endpoints.groups || endpoints.get.groups}` diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug index 6663158..726080d 100644 --- a/src/views/circle/page-circle-edit.pug +++ b/src/views/circle/page-circle-edit.pug @@ -46,7 +46,7 @@ div.content-box__info sib-ac-checker(permission='acl:Write', bind-resources) h1 Modifie ton canal - sib-form.form-edit( + sib-form.button-register.form-edit( bind-resources fields='status, block-circle__info(name, owner), description' @@ -75,7 +75,7 @@ div.content-box__info h2 Liste des membres: sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') - sib-form.block.select-add-member( + sib-form.block.select-add.button-add( bind-resources nested-field='members' fields='user' diff --git a/src/views/project/page-project-edit.pug b/src/views/project/page-project-edit.pug index 2a387f0..bb0a7b8 100644 --- a/src/views/project/page-project-edit.pug +++ b/src/views/project/page-project-edit.pug @@ -10,7 +10,7 @@ div.content-box__info h1 Modifie ton projet - sib-form.form-edit( + sib-form.button-register.form-edit( bind-resources fields='fieldset-info, block-project__info(customer, name, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee)' @@ -40,7 +40,7 @@ div.content-box__info h2 Liste des membres : - sib-form.block.select-add-member( + sib-form.block.select-add.button-add( bind-resources nested-field='members' fields='user'