ui: project-edit page enhanced + new CSS styles

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(
+	    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
+
   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
+    
+		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'
 	)

src/page-project.pug

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

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;
     }
@@ -21,6 +13,16 @@
       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;
       text-align: center;
@@ -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,33 +91,88 @@
       border: none;
       border-radius: 100em;
       color: $color-0-0-100;
-      float: right;
+      cursor: pointer;
       font-size: 1.4rem;
       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;
     }
 
     /* CLASSES Peut-être à sortir de .content-box */
 
+		.form-container>form {
+		  margin-top: 2.7rem;
+		}
+
 		.form-label {
-      flex: 1 1 auto;
+		  /*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: 2.2rem;
+		    margin-top: 1.8rem;
 		    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 {
       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-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 @@
       }
     }
 
-  /*
+    /* 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;
         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 {
-
+          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'] {
-      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;
+      flex-wrap: wrap;
+      width: 100%;
+
+      &>label {
+        display: none;
       }
 
-  sib-multiple-form[name='members'] {
+      &>div {
-
-    >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;
+
+        .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;
       }
+
+      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;
   }
 }
-*/