diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug index 3aad238..60d0aac 100644 --- a/src/page-project-edit.pug +++ b/src/page-project-edit.pug @@ -1,55 +1,90 @@ +sib-widget(name='hd-fieldset-title') + template + label ${label} + +sib-widget(name='hd-project-members') + template + sib-display.member-info( + data-src='${id}' + fields='user.account.picture, user.name, name' + widget-user.account.picture='sib-display-img' + ) + +sib-widget(name='hd-member-form') + template + sib-form.member-add( + bind-resources + range-user=`${endpoints.users}` + nested-field='members' + fields='member-form__input(user, name)' + + class-user='member-select form-label is-light is-half-width' + label-user='Member' + widget-user='sib-form-auto-completion' + + class-name='form-label is-light is-half-width' + label-name='Role' + + submit-button='Add' + ) .content-box.with-padding.with-form.full-width + h1 Edit your project - p Here you can edit your projet's details - sib-widget(name='hd-template-project-title') - template - span ${label} - sib-widget(name='template-members') - template - sib-form.team.is-horizontal( - naked, - data-src='${id}', - fields='user.name, name', - range-user.name=`${endpoints.users}`, - class-name='field', - class-user.name='field', - label-name='Role', - label-user.name='Member(s)', - ) + 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), fieldset-members, block-project__members(member-form, members)' - sib-form.block( - fields='block-project__info(customer.name, name, customer.logo, description), block-project__fee(fieldset-fee, businessProvider, businessProvider.fee), block-project__customer(fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone), block-project__team(fieldset-team, members)', + class-customer.name='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-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' - label-customer.name='Customer\'s name', - label-name='Project\'s name', - label-customer.logo='Customer\'s logo', - label-description='Project description', + 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' - range-businessProvider=`${endpoints.businessproviders}`, - label-businessProvider='Business provider', - label-businessProvider.fee='Amount of the contribution (%)', - widget-fieldset-fee='hd-template-project-title', - widget-businessProvider.fee='sib-form-number', - label-fieldset-fee='Fee', + 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' - label-customer.companyRegister='Company registration number', - 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-template-project-title', - label-fieldset-customer='Customer information', + class-fieldset-members='fieldset' + label-fieldset-members='Team' + label-members='' + multiple-members='' + widget-members='hd-project-members' + widget-fieldset-members='hd-fieldset-title' + widget-member-form='hd-member-form' - label-fieldset-team='The team', - widget-fieldset-team='hd-template-project-title', - widget-members='template-members', - multiple-members, - - bind-resources - ) + submit-button='Submit' + ) diff --git a/src/page-project.pug b/src/page-project.pug index 2e871cf..6f1f7f1 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -24,8 +24,8 @@ nav.jsRightMenu(role='navigation') li a Drive sib-route(name='project-edit', use-id) - //- li - //- a Edit + li + a Edit sib-route(name='project-create', use-id) //- li //- a Add new \ No newline at end of file diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index a2b0c07..c1ae4a7 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -2,14 +2,6 @@ &.with-form { - hd-template-project-title { - border-bottom: 1px solid $color-221-51-90; - color: $color-233-18-29; - font-size: 1.8rem; - font-weight: 600; - padding-bottom: 1rem; - } - sib-form { padding-bottom: 2.55rem; } @@ -20,6 +12,16 @@ font-size: 2rem; text-align: center; } + + .fieldset { + border-bottom: 1px solid $color-221-51-90; + color: $color-233-18-29; + display: flex; + flex: 1 0 100%; + font-size: 1.8rem; + font-weight: 600; + padding-bottom: 1rem; + } p.center { margin: 0; @@ -31,16 +33,32 @@ margin-bottom: 2rem; } - div[name^='block-'] { + [name^='block-'] { + margin-bottom: 2.75rem; + } + + form { display: flex; flex-direction: column; } + sib-set-default { + clear: both; + display: flex; + flex-wrap: wrap; + max-width: 100%; + + sib-form-label-text { + float: left; + width: 50%; + } + } + label { display: flex; flex-direction: column; - input, + input:not([type='file']), textarea { -webkit-tap-highlight-color: $color-244-73-62; background-color: $color-222-57-95; @@ -49,12 +67,11 @@ color: $color-233-18-29; /*flex: 1 1 0; Problem on Firefox for input type date*/ line-height: 1; - margin-top: 0.8rem; min-width: 0; padding: 1rem; } - input:not([type="search"]), + input:not([type="search"]):not([type="file"]), textarea { border: 2px solid $color-222-57-95; @@ -63,6 +80,10 @@ border-bottom: 2px solid $color-244-73-62; } } + + textarea { + height: 100px; + } } input[type='submit'] { @@ -70,34 +91,89 @@ border: none; border-radius: 100em; color: $color-0-0-100; - float: right; + cursor: pointer; font-size: 1.4rem; font-weight: bold; - margin-top: 6rem; - padding: 0.85rem 2.55rem; + margin-left: auto; + margin-top: 3.2rem; + padding: 0.55rem 2.5rem; text-transform: uppercase; } /* CLASSES Peut-être à sortir de .content-box */ - .form-label { - flex: 1 1 auto; - font-weight: 600; + .form-container>form { + margin-top: 2.7rem; + } - &.is-dark label { - color: $color-216-4-22; - margin-top: 3rem; + .form-label { + /*flex: 1 1 auto;*/ + font-weight: 600; + + &.is-dark label { + color: $color-216-4-22; + margin-top: 3rem; + + &>*:nth-child(2) { + margin-top: 0.8rem; + } + } + + &.is-light label { + color: $color-244-10-70; + 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 { + align-self: flex-end; + font-weight: normal; + + .ss-single-selected { + background-color: $color-222-57-95; + border: none; + border-radius: 0px; + display: flex; + margin-top: 0.8rem; + min-height: 3.9rem; + padding-left: 1rem; + text-transform: none; + + .ss-arrow span { + border: solid $color-244-73-62; + border-width: 0 2px 2px 0; + } } - &.is-light label { - color: $color-244-10-70; - margin-top: 2.2rem; - text-transform: uppercase; + .ss-content .ss-list .ss-option { + text-transform: none; } } - /* WIDGETS */ - sib-form-date { input[type="date"] { background-image: url("/images/calendar.svg"); @@ -132,6 +208,39 @@ } } + sib-form-file { + + label { + align-items: baseline; + clear: both; + display: flex; + flex-direction: row; + flex-wrap: wrap; + max-width: 100%; + + div { + width: 100%; + } + + input[type='text'] { + box-sizing: border-box; + flex: 0 0 50%; + } + + input[type='file'] { + box-sizing: border-box; + flex: 0 0 20%; + color: $color-244-73-62; + cursor: pointer; + padding-left: 3rem; + } + } + } + + sib-multiple-form { + margin-top: 1.8rem; + } + sib-multiple-select { sib-form-auto-completion > label { @@ -139,9 +248,11 @@ flex-direction: column; .ss-main { + font-weight: normal; margin-bottom: 7.8rem; margin-top: 1.6rem; max-width: 50vw; + text-transform: none; .ss-multi-selected { align-items: center; @@ -200,263 +311,98 @@ } } - /* - input { - -webkit-appearance: none; - align-items: center; - background: $color-222-57-95; - border: none; - color: $color-233-18-29; - display: inline-flex; - justify-content: flex-start; - line-height: 1.5; - vertical-align: top; - } + /* CUSTOM WIDGETS */ - sib-form-auto-completion, - sib-form-checkbox, - sib-form-dropdown, - sib-form-label-text, - sib-form-multiple-dropdown, - sib-form-number, - sib-form-textarea { - display: flex; - flex-direction: column; + hd-member-form { + width: 100%; - >label { - color: $color-244-10-70; - font-weight: 600; - margin: 2em 0 0.5em; - text-transform: uppercase; - - >div { - padding-bottom: 1rem; - } - } - - select, - textarea { - background: $color-222-57-95; - border: none; - color: $color-233-18-29; - line-height: 1.5; - width: 100%; - - } - - select, - textarea { - padding: 1.7rem; - } - - select { - margin-bottom: 1.7rem; - } - } - - sib-form-auto-completion, - sib-form-checkbox, - sib-form-multiple-dropdown { - - label { - color: $color-216-4-22; - font-weight: 600; - text-transform: initial; - } - } - - sib-form-auto-completion { - - div.choices__inner { - background-color: inherit; - border: none; + form { display: flex; - flex-direction: column-reverse; - padding-left: 0; + flex-direction: column; - div.choices__list { - margin-top: 1.7rem; - - div.choices__item { - - button.choices__button { - border-left: 1px solid $color-43-100-50; - opacity: 1; - padding-left: 0; - } - } + [name='member-form__input'] { + margin-bottom: 1rem; } - input[type='text'].choices__input { - max-width: 27.2rem; - min-width: 27.2rem; + sib-form-auto-completion { + float: left; + } + + input[type='submit'] { + background-color: transparent; + border: 1px solid $color-244-73-62; + color: $color-244-73-62; } } } - sib-form-checkbox { - flex-direction: row; + [widget='hd-project-members'] { + display: flex; + flex-wrap: wrap; + width: 100%; - [type='checkbox'] { - position: relative; - margin-top: 2em; - - &:before { - border: 2px solid $color-210-5-56; - content: ''; - height: 1rem; - left: 0; - margin-left: 1rem; - padding-bottom: 0.2rem; - position: absolute; - width: 1.2rem; - z-index: 1; - } - - &:checked { - &:before { - border: 2px solid $color-210-5-56; - color: $color-244-73-62; - height: 1rem; - left: 0; - margin-left: 1rem; - padding-bottom: 0.2rem; - position: absolute; - width: 1.2rem; - z-index: 1; - @include mdi('check'); - } - } - - &:after { - background: $color-0-0-100; - content: ''; - height: 1rem; - position: absolute; - width: 1rem; - } - } - } - - sib-form-dropdown { - - select { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - background-image: url("/images/chevron-down.png"); - background-position: right 12px top 60%; - background-repeat: no-repeat; - background-size: 14px 9px; - box-sizing: border-box; - } - } - */ - /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */ - /* - sib-form-multiple-dropdown { - - button { - appearance: none; - background-color: $color-0-0-100; - border: 1px solid; - border-radius: 100%; - color: $color-244-73-62; - font-size: 2.55rem; - height: 1em; - line-height: 0; - margin: 0.34rem; - padding: 0 0.04em 0.08em; - vertical-align: middle; - width: 1em; - } - } - - sib-form-textarea { - align-items: stretch; - } - - sib-multiple-form { - - >label { + &>label { display: none; } - } - input[type='submit'] { - margin-top: 6rem; - background-color: $color-233-18-29; - color: $color-0-0-100; - float: right; - font-weight: bold; - text-transform: uppercase; - } - */ - } - /* - .is-horizontal { - display: flex; - } + &>div { + align-items: center; + border: 1px solid $color-43-100-50; + border-radius: 3px; + display: flex; + margin: 0 1.5rem 1.5rem 0; + padding: 2.2rem; - sib-multiple-form[name='members'] { + .member-info>div { + display: grid; + grid-template-areas: "avatar name" + "avatar role"; + grid-column-gap: 15px; + margin-right: 15px; + } - >div { - align-items: center; - display: flex; - } - - >div:not(:nth-child(-n + 2)) { - - label { - - >div { - display: none; + &>button { + cursor: pointer; + background-color: transparent; + border: 1px solid $color-43-100-50; + border-radius: 50%; + color: $color-43-100-50; + height: 22px; + width: 22px; } } - } - button { - appearance: none; - background-color: $color-0-0-100; - border: 1px solid; - border-radius: 100%; - color: $color-244-73-62; - font-size: 2.55rem; - height: 1em; - line-height: 0; - margin: 0.34rem; - padding: 0 0.04em 0.08em; - vertical-align: middle; - width: 1em; + &>button { + display: none; + } - &::after { - content: Add; + sib-display-img { + grid-area: avatar; + align-items: center; + background-color: #e3e8ed; + border-radius: 50%; + display: flex; + height: 45px; + justify-content: center; + overflow: hidden; + width: 45px; + + img { + height: 100%; + object-fit: cover; + object-position: center; + width: 100%; + } + } + + sib-display-value:first-of-type { + font-weight: 600; + grid-area: name; + } + + sib-display-value:last-of-type { + grid-area: role; } } } - */ } -/* -sib-form { - - form > * { - margin-top: 0.85rem; - } - - // button like - input[type='color'], - input[type='file'], - input[type='reset'], - input[type='submit'] { - display: inline-block; - padding: 0.85rem 2.55rem; - border: none; - border-radius: 100em; - font-weight: normal; - } - - input[type='reset'] { - display: none; - } -} -*/