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

@@ -1,13 +1,38 @@
-h1 Edit project
+.frame-form
-  //- sib-display(data-fields="name" bind-resources)]
+  h1 Edit your project
-.form-view
+  p Here you can edit your projet's details
+    Do not forget to add comment
+  .form-view
     sib-form(
-    range-customer=`${sdn}/customers/`,
+      range-team=`${sdn}/users/`,
-    range-team=`${sdn}/members/`,
+      range-members=`${sdn}/project-members/`,
-    data-fields=`name, phone, customer, description, team, jabberRoom, foaf:jabberID`,
+
+      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='hdapp-link-more',
+      widget-team='sib-form-multiple-dropdown',
-    label-team='Equipe'
+      widget-members='sib-form-multiple-dropdown',
+      
       bind-resources
     )
+

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:"

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;

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;

src/styles/form.scss

@@ -1,118 +1,137 @@
-%button {
+.frame-form {
-  display: inline-block;
+  padding: 4em 5em 6em;
-  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 {
   @extend %frame;
+  
+  .form-view {
+    border-bottom: 1px solid $color-platinum;
+    padding-bottom: 1.5em;
+  }
+}
+
+#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;
+    
+    > * {
+      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;
-}
-sib-display sib-form form {
-  //margin: -0.5em;
-  > * {
-    margin-top: 0.5em;
     }
-}
+
-sib-form.block {
-  display: block;
-  > form {
-    > * {
-      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;
+      margin-bottom: 1em;
+      padding: 0.5em;
     }
-        input,
-        textarea,
-        select {
-          width: 100%;
-        }
-        textarea {
-          resize: vertical;
-          height: 200px;
-          min-height: 3em;
-        }
-      }
-    }
-    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
+  sib-form-checkbox {
-  button,
+    flex-direction: row;
-  input[type='button'],
+
-  input[type='color'],
+    [type='checkbox'] {
-  input[type='file'],
+      cursor: pointer;
-  input[type='reset'],
+      position: relative;
-  input[type='submit'] {
+      
-    @extend %button;
+      &: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;
       }
       
-  input[type='reset'] {
+      &:checked {
-    display: none;
+        &: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;
+  }
 }

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,

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;
-    }
-  }
-}

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,

www/fonts/material-design-icons.svg

@@ -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>