ui: project-edit page enhanced + new CSS styles

This commit is contained in:
Gaëlle Morin 2019-08-06 14:32:55 +02:00
parent 2ab41abe2f
commit b2e2530800
3 changed files with 290 additions and 309 deletions

View File

@ -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(
data-src='https://api.test-paris.happy-dev.fr/projects/2/',
range-user='https://api.test-paris.happy-dev.fr/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 .content-box.with-padding.with-form.full-width
h1 Edit your project 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.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)',
label-customer.name='Customer\'s name',
label-name='Project\'s name',
label-customer.logo='Customer\'s logo',
label-description='Project description',
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',
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',
label-fieldset-team='The team',
widget-fieldset-team='hd-template-project-title',
widget-members='template-members',
multiple-members,
sib-form.form-container.block(
bind-resources 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)'
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'
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-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'
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'
submit-button='Submit'
) )

View File

@ -24,8 +24,8 @@ nav.jsRightMenu(role='navigation')
li li
a Drive a Drive
sib-route(name='project-edit', use-id) sib-route(name='project-edit', use-id)
//- li li
//- a Edit a Edit
sib-route(name='project-create', use-id) sib-route(name='project-create', use-id)
//- li //- li
//- a Add new //- a Add new

View File

@ -2,14 +2,6 @@
&.with-form { &.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 { sib-form {
padding-bottom: 2.55rem; padding-bottom: 2.55rem;
} }
@ -21,6 +13,16 @@
text-align: center; 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 { p.center {
margin: 0; margin: 0;
text-align: center; text-align: center;
@ -31,16 +33,32 @@
margin-bottom: 2rem; margin-bottom: 2rem;
} }
div[name^='block-'] { [name^='block-'] {
margin-bottom: 2.75rem;
}
form {
display: flex; display: flex;
flex-direction: column; 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 { label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
input, input:not([type='file']),
textarea { textarea {
-webkit-tap-highlight-color: $color-244-73-62; -webkit-tap-highlight-color: $color-244-73-62;
background-color: $color-222-57-95; background-color: $color-222-57-95;
@ -49,12 +67,11 @@
color: $color-233-18-29; color: $color-233-18-29;
/*flex: 1 1 0; Problem on Firefox for input type date*/ /*flex: 1 1 0; Problem on Firefox for input type date*/
line-height: 1; line-height: 1;
margin-top: 0.8rem;
min-width: 0; min-width: 0;
padding: 1rem; padding: 1rem;
} }
input:not([type="search"]), input:not([type="search"]):not([type="file"]),
textarea { textarea {
border: 2px solid $color-222-57-95; border: 2px solid $color-222-57-95;
@ -63,6 +80,10 @@
border-bottom: 2px solid $color-244-73-62; border-bottom: 2px solid $color-244-73-62;
} }
} }
textarea {
height: 100px;
}
} }
input[type='submit'] { input[type='submit'] {
@ -70,33 +91,88 @@
border: none; border: none;
border-radius: 100em; border-radius: 100em;
color: $color-0-0-100; color: $color-0-0-100;
float: right; cursor: pointer;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: bold; font-weight: bold;
margin-top: 6rem; margin-left: auto;
padding: 0.85rem 2.55rem; margin-top: 3.2rem;
padding: 0.55rem 2.5rem;
text-transform: uppercase; text-transform: uppercase;
} }
/* CLASSES Peut-être à sortir de .content-box */ /* CLASSES Peut-être à sortir de .content-box */
.form-container>form {
margin-top: 2.7rem;
}
.form-label { .form-label {
flex: 1 1 auto; /*flex: 1 1 auto;*/
font-weight: 600; font-weight: 600;
&.is-dark label { &.is-dark label {
color: $color-216-4-22; color: $color-216-4-22;
margin-top: 3rem; margin-top: 3rem;
&>*:nth-child(2) {
margin-top: 0.8rem;
}
} }
&.is-light label { &.is-light label {
color: $color-244-10-70; color: $color-244-10-70;
margin-top: 2.2rem; margin-top: 1.8rem;
text-transform: uppercase; text-transform: uppercase;
&>*:nth-child(2) {
margin-top: 0.8rem;
}
} }
} }
/* WIDGETS */ .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;
}
}
.ss-content .ss-list .ss-option {
text-transform: none;
}
}
sib-form-date { sib-form-date {
input[type="date"] { input[type="date"] {
@ -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-multiple-select {
sib-form-auto-completion > label { sib-form-auto-completion > label {
@ -139,9 +248,11 @@
flex-direction: column; flex-direction: column;
.ss-main { .ss-main {
font-weight: normal;
margin-bottom: 7.8rem; margin-bottom: 7.8rem;
margin-top: 1.6rem; margin-top: 1.6rem;
max-width: 50vw; max-width: 50vw;
text-transform: none;
.ss-multi-selected { .ss-multi-selected {
align-items: center; align-items: center;
@ -200,263 +311,98 @@
} }
} }
/* /* CUSTOM WIDGETS */
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;
}
sib-form-auto-completion, hd-member-form {
sib-form-checkbox, width: 100%;
sib-form-dropdown,
sib-form-label-text, form {
sib-form-multiple-dropdown,
sib-form-number,
sib-form-textarea {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
>label { [name='member-form__input'] {
color: $color-244-10-70; margin-bottom: 1rem;
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 { sib-form-auto-completion {
float: left;
div.choices__inner {
background-color: inherit;
border: none;
display: flex;
flex-direction: column-reverse;
padding-left: 0;
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;
}
}
}
input[type='text'].choices__input {
max-width: 27.2rem;
min-width: 27.2rem;
}
}
}
sib-form-checkbox {
flex-direction: row;
[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 {
display: none;
}
} }
input[type='submit'] { input[type='submit'] {
margin-top: 6rem; background-color: transparent;
background-color: $color-233-18-29; border: 1px solid $color-244-73-62;
color: $color-0-0-100; color: $color-244-73-62;
float: right;
font-weight: bold;
text-transform: uppercase;
} }
*/
} }
/* }
.is-horizontal {
[widget='hd-project-members'] {
display: flex; display: flex;
flex-wrap: wrap;
width: 100%;
&>label {
display: none;
} }
sib-multiple-form[name='members'] { &>div {
>div {
align-items: center; align-items: center;
border: 1px solid $color-43-100-50;
border-radius: 3px;
display: flex; display: flex;
margin: 0 1.5rem 1.5rem 0;
padding: 2.2rem;
.member-info>div {
display: grid;
grid-template-areas: "avatar name"
"avatar role";
grid-column-gap: 15px;
margin-right: 15px;
} }
>div:not(:nth-child(-n + 2)) { &>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;
}
}
label { &>button {
>div {
display: none; display: none;
} }
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%;
} }
} }
button { sib-display-value:first-of-type {
appearance: none; font-weight: 600;
background-color: $color-0-0-100; grid-area: name;
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;
&::after {
content: Add;
}
}
}
*/
}
/*
sib-form {
form > * {
margin-top: 0.85rem;
} }
// button like sib-display-value:last-of-type {
input[type='color'], grid-area: role;
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;
} }
} }
*/