autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ui(project-edit): #issue60 edit team + #issue83 CSS - project edit

Browse Source 
Customize labels.
Styling labels, inputs, text areas, title, paragraph, buttons and checkbox.
Big clean up
This commit is contained in:
Gaëlle Morin 2019-01-28 18:19:42 +01:00
parent 95c410e688
commit ed50a26380
9 changed files with 208 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/page-project-edit.pug
View File

@ -1,13 +1,38 @@
h1 Edit project
//- sib-display(data-fields="name" bind-resources)]
.form-view
sib-form(
range-customer=`${sdn}/customers/`,
range-team=`${sdn}/members/`,
data-fields=`name, phone, customer, description, team, jabberRoom, foaf:jabberID`,
widget-jabberRoom='sib-form-checkbox',
widget-description='sib-form-textarea',
widget-team='hdapp-link-more',
label-team='Equipe'
bind-resources
)
.frame-form
h1 Edit your project
p Here you can edit your projet's details
Do not forget to add comment
.form-view
sib-form(
range-team=`${sdn}/users/`,
range-members=`${sdn}/project-members/`,
data-fields=`customer.name, name, description, customer.logo, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`,
set-block-team=`team, members`,
set-block-fee=`businessProvider, businessProviderFee`,
'label-customer,name'='Business name',
label-name='Project name',
label-description='Project description',
'label-customer,logo'='Customer logo',
'label-customer,companyRegister'='Company register',
'label-customer,address'='Customer address',
'label-customer,firstName'='Contact firstname',
'label-customer,lastName'='Contact lastname',
'label-customer,role'='Contact role',
'label-customer,email'='Contact email',
'label-customer,phone'='Contact phone',
label-businessProvider='Business provider',
label-businessProviderFee='Fee (%)',
label-foaf:jabberID='Chatroom id',
label-team='Teammates',
label-members='Member role'
widget-jabberRoom='sib-form-checkbox',
widget-description='sib-form-textarea',
widget-team='sib-form-multiple-dropdown',
widget-members='sib-form-multiple-dropdown',
bind-resources
)

2
src/page-project-profile.pug
View File

@ -21,7 +21,7 @@
sib-display(
data-fields='block-title, infos, block-lead, block-fee, block-customer',
set-block-title='const-title1, number, customer.name,const-title2, name, entitled, creationDate',
set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
value-const-title1="N°",
value-const-title2="-",
value-entitled="Creation date:"

19
src/styles/content.scss
View File

@ -273,6 +273,25 @@ hdapp-available {
}
}
sib-form {
form > * {
margin-top: 0.5em;
}
// button like
input[type='color'],
input[type='file'],
input[type='reset'],
input[type='submit'] {
@extend %button;
}
input[type='reset'] {
display: none;
}
}
/*
label {
@extend h2;

1
src/styles/filters.scss
View File

@ -17,6 +17,7 @@
font-size: 85%;
line-height: 1.80;
margin-top: 1em;
padding: 0.7em;
width: 95%;
-moz-appearance: none;
-webkit-appearance: none;

211
src/styles/form.scss
View File

@ -1,118 +1,137 @@
%button {
display: inline-block;
padding: 0.5em 1em;
border: none;
border-radius: 100em;
background-color: $color-selective-yellow;
color: $color-dark-lava;
font-weight: normal;
}
%status-open {
background-color: $color-majorelle-blue;
border: none;
border-radius: 100em;
color: $color-white;
display: inline-block;
font-weight: normal;
padding: 0.5em 1em;
}
.form-view {
.frame-form {
padding: 4em 5em 6em;
@extend %frame;
padding: 1em;
}
sib-display sib-form form {
//margin: -0.5em;
> * {
margin-top: 0.5em;
.form-view {
border-bottom: 1px solid $color-platinum;
padding-bottom: 1.5em;
}
}
sib-form.block {
display: block;
> form {
#project-create,
#project-edit {
font-size: 17px;
h1 {
color: $color-purple-dark;
font-weight: bold;
font-size: 20px;
text-align: center;
}
p {
margin-bottom: 4em;
text-align: center;
}
div[name^='block-'] {
display: flex;
> * {
display: block;
margin-top: 2em;
&:first-child {
margin-top: 0;
margin-right: 4rem;
}
}
sib-form-checkbox,
sib-form-label-text,
sib-form-multiple-dropdown,
sib-form-textarea {
align-items: stretch;
display: flex;
flex-direction: column;
> label {
color: $color-spun-pearl;
font-weight: 600;
margin-bottom: 0.5em;
}
input,
select,
textarea {
background: $color-glitter;
border: none;
color: $color-purple-dark;
line-height: 1.5;
}
input,
textarea {
margin-bottom: 2em;
padding: 1em;
}
select {
margin-bottom: 1em;
padding: 0.5em;
}
}
sib-form-checkbox {
flex-direction: row;
[type='checkbox'] {
cursor: pointer;
position: relative;
&:before {
border: 2px solid $color-taupe-gray;
content: '';
height: 1rem;
left: 0;
margin-left: 1rem;
padding-bottom: 0.2rem;
position: absolute;
width: 1.2rem;
z-index: 1;
}
&:not(sib-form-checkbox) {
label {
margin: 0.5em 0;
display: block;
}
input,
textarea {
background-color: $color-anti-flash-white;
box-shadow: none !important;
border: none;
padding: 1em 2em;
}
input,
select {
height: 3em;
}
input,
textarea,
select {
width: 100%;
}
textarea {
resize: vertical;
height: 200px;
min-height: 3em;
&:checked {
&:before {
border: 2px solid $color-taupe-gray;
color: $color-majorelle-blue;
height: 1rem;
left: 0;
margin-left: 1rem;
padding-bottom: 0.2rem;
position: absolute;
width: 1.2rem;
z-index: 1;
@include mdi('check');
}
}
}
sib-form-multiple-dropdown select {
width: calc(100% - 2.5em);
}
input[type='submit'] {
width: auto;
}
}
}
//fix: style à mignrer dans filter.scss ? => A voir si ces styles sont utilisés ailleurs que pour les filtres.
sib-form {
// text like
textarea,
input:not([type='button']):not([type='checkbox']):not([type='color']):not([type='file']):not([type='hidden']):not([type='image']):not([type='radio']):not([type='range']):not([type='reset']):not([type='submit']) {
padding: 0.7em;
border: none;
@extend %shadow;
}
// button like
button,
input[type='button'],
input[type='color'],
input[type='file'],
input[type='reset'],
input[type='submit'] {
@extend %button;
}
input[type='reset'] {
display: none;
&:after {
background: $color-white;
content: '';
height: 1rem;
position: absolute;
width: 1rem;
}
}
}
sib-form-multiple-dropdown {
button {
appearance: none;
background-color: $color-white;
color: $color-selective-yellow;
border: 1px solid;
width: 1em;
border-radius: 100%;
color: $color-majorelle-blue;
cursor: pointer;
font-size: 1.5em;
height: 1em;
line-height: 0;
font-size: 1.5em;
padding: 0;
cursor: pointer;
margin: 0.2em;
vertical-align: middle;
padding: 0 0.04em 0.08em;
vertical-align: middle;
width: 1em;
}
}
input[type='submit'] {
margin-top: 3.5em;
@extend %button-form;
}
}

3
src/styles/material-design-icons.scss
View File

@ -23,7 +23,8 @@ $mdi-version: "3.3.92" !default;
$mdi-icons: (
account-outline: '\F013',
atom: '\F767',
cellphone-iphone: '\F120'
cellphone-iphone: '\F120',
check: '\F12C'
);
%mdi,

22
src/styles/project-profile.scss
View File

@ -240,25 +240,3 @@
}
}
}
#project-edit form {
display: flex;
flex-direction: column;
align-items: stretch;
> * {
display: flex;
margin-bottom: 1em;
label {
flex-basis: 8em;
flex-shrink: 0;
}
input,
textarea {
flex-grow: 1;
min-width: 0;
}
}
}

27
src/styles/variables.scss
View File

@ -9,6 +9,7 @@ $color-mustard: hsl(46, 100%, 67%);
$color-rolling-stone: hsl(210, 4%, 50%);
$color-taupe-gray: hsl(210, 5%, 56%);
$color-platinum: hsl(210, 17%, 91%);
$color-anti-flash-white: hsl(210, 25%, 95%);
$color-text-base: hsl(213, 4%, 50%);
$color-gainsboro: hsl(213, 13%, 86%);
@ -16,10 +17,26 @@ $color-gainsboro-a02: hsla(213, 13%, 86%, 0.2);
$color-bombay: hsl(215, 9%, 73%);
$color-dark-lava: hsl(216, 4%, 22%);
$color-link-water: hsl(221, 51%, 90%);
$color-glitter: hsl(222, 57%, 95%);
$color-purple-dark: hsl(233, 18%, 29%);
$color-spun-pearl: hsl(244, 10%, 70%);
$color-majorelle-blue: hsl(244, 73%, 62%);
%button {
display: inline-block;
padding: 0.5em 1.5em;
border: none;
border-radius: 100em;
font-weight: normal;
}
%button-form {
background-color: $color-purple-dark;
color: $color-white;
float: right;
font-weight: bold;
text-transform: uppercase;
}
%shadow {
box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
@ -34,6 +51,16 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
background-color: $color-white;
}
%status-open {
background-color: $color-majorelle-blue;
border: none;
border-radius: 100em;
color: $color-white;
display: inline-block;
font-weight: normal;
padding: 0.5em 1em;
}
$breakpoints: (
phone: 480px,
tablet: 768px,

4
www/fonts/material-design-icons.svg
View File

@ -19,6 +19,10 @@
<glyph glyph-name="cellphone-iphone"
unicode="&#xF120;"
horiz-adv-x="512" d=" M341.3333333333333 64H149.3333333333333V362.6666666666667H341.3333333333333M245.3333333333333 -21.3333333333333C227.6266666666667 -21.3333333333333 213.3333333333333 -7.04 213.3333333333333 10.6666666666667S227.6266666666667 42.6666666666667 245.3333333333333 42.6666666666667S277.3333333333333 28.3733333333333 277.3333333333333 10.6666666666667S263.04 -21.3333333333333 245.3333333333333 -21.3333333333333M330.6666666666667 426.6666666666667H160C130.56 426.6666666666667 106.6666666666667 402.7733333333333 106.6666666666667 373.3333333333334V10.6666666666667C106.6666666666667 -18.7733333333333 130.56 -42.6666666666666 160 -42.6666666666666H330.6666666666667C360.1066666666667 -42.6666666666666 384 -18.7733333333333 384 10.6666666666667V373.3333333333334C384 402.7733333333333 360.1066666666667 426.6666666666667 330.6666666666667 426.6666666666667z" />
<glyph glyph-name="check"
unicode="&#xF12C;"
horiz-adv-x="512" d=" M448 298.6666666666667L192 42.6666666666667L74.6666666666667 160L104.7466666666667 190.0800000000001L192 103.04L417.92 328.7466666666667L448 298.6666666666667z" />
</font>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB