From ed50a26380d138efcad36081c507d2460882f706 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Mon, 28 Jan 2019 18:19:42 +0100
Subject: [PATCH] ui(project-edit): #issue60 edit team + #issue83 CSS - project
edit
Customize labels.
Styling labels, inputs, text areas, title, paragraph, buttons and checkbox.
Big clean up
---
src/page-project-edit.pug | 51 +++++--
src/page-project-profile.pug | 2 +-
src/styles/content.scss | 19 +++
src/styles/filters.scss | 1 +
src/styles/form.scss | 203 ++++++++++++++------------
src/styles/material-design-icons.scss | 3 +-
src/styles/project-profile.scss | 22 ---
src/styles/variables.scss | 27 ++++
www/fonts/material-design-icons.svg | 4 +
9 files changed, 203 insertions(+), 129 deletions(-)
diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug
index 859cea07..7e4a9928 100644
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@@ -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
+ )
+
diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug
index ac882b1c..40e7e9b3 100644
--- a/src/page-project-profile.pug
+++ b/src/page-project-profile.pug
@@ -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:"
diff --git a/src/styles/content.scss b/src/styles/content.scss
index c29f7545..a91f6fbd 100644
--- a/src/styles/content.scss
+++ b/src/styles/content.scss
@@ -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;
diff --git a/src/styles/filters.scss b/src/styles/filters.scss
index 3f9eb377..13b6f1a5 100644
--- a/src/styles/filters.scss
+++ b/src/styles/filters.scss
@@ -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;
diff --git a/src/styles/form.scss b/src/styles/form.scss
index e62fc0e7..50b7cfd4 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -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;
+.frame-form {
+ padding: 4em 5em 6em;
+ @extend %frame;
+
+ .form-view {
+ border-bottom: 1px solid $color-platinum;
+ padding-bottom: 1.5em;
+ }
}
-%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;
-}
+#project-create,
+#project-edit {
+ font-size: 17px;
-.form-view {
- @extend %frame;
- padding: 1em;
-}
-sib-display sib-form form {
- //margin: -0.5em;
- > * {
- margin-top: 0.5em;
+ h1 {
+ color: $color-purple-dark;
+ font-weight: bold;
+ font-size: 20px;
+ text-align: center;
}
-}
-sib-form.block {
- display: block;
- > form {
+
+ p {
+ margin-bottom: 4em;
+ text-align: center;
+ }
+
+ div[name^='block-'] {
+ display: flex;
+
> * {
- display: block;
- margin-top: 2em;
- &:first-child {
- margin-top: 0;
- }
- &: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;
- }
- }
+ margin-right: 4rem;
}
- sib-form-multiple-dropdown select {
- width: calc(100% - 2.5em);
+ }
+
+ 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[type='submit'] {
- width: auto;
+
+ input,
+ select,
+ textarea {
+ background: $color-glitter;
+ border: none;
+ color: $color-purple-dark;
+ line-height: 1.5;
}
- }
-}
-//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;
- }
+ input,
+ textarea {
+ margin-bottom: 2em;
+ padding: 1em;
+ }
- // button like
- button,
- input[type='button'],
- input[type='color'],
- input[type='file'],
- input[type='reset'],
- input[type='submit'] {
- @extend %button;
+ select {
+ margin-bottom: 1em;
+ padding: 0.5em;
+ }
}
- input[type='reset'] {
- display: none;
+ 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;
+ }
+
+ &: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');
+ }
+ }
+
+ &: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;
+ }
}
diff --git a/src/styles/material-design-icons.scss b/src/styles/material-design-icons.scss
index b53ae2b2..436656be 100644
--- a/src/styles/material-design-icons.scss
+++ b/src/styles/material-design-icons.scss
@@ -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,
diff --git a/src/styles/project-profile.scss b/src/styles/project-profile.scss
index 5087ccf7..59d15935 100644
--- a/src/styles/project-profile.scss
+++ b/src/styles/project-profile.scss
@@ -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;
- }
- }
-}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 60f8e1b3..4d300143 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -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,
diff --git a/www/fonts/material-design-icons.svg b/www/fonts/material-design-icons.svg
index 2b1e8e6c..48bab3a5 100644
--- a/www/fonts/material-design-icons.svg
+++ b/www/fonts/material-design-icons.svg
@@ -19,6 +19,10 @@
<glyph glyph-name="cellphone-iphone"
unicode=""
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=""
+ 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>
--
GitLab