ui: project-profile page is now ready

New CSS rules added, HTML has been modified.

Closes #54

src/header.pug

@@ -16,7 +16,7 @@ details
     include page-notifications.pug
 
 sib-display#profile(
-  data-fields='first_name,account.picture',
+  data-fields='first_name, account.picture',
   widget-account.picture='sib-display-img',
   bind-user
   )

src/menu.pug

@@ -32,7 +32,9 @@ nav#navbar
       div.sub-menu
         sib-display(
           data-src=`${sdn}/projects/`,
-          data-fields='name',
+          data-fields='project',
+          set-project='customer.name, dash, name',
+          value-dash='-',
           next='project'
         )
     div.divider
@@ -60,7 +62,7 @@ nav#navbar
       div.sub-menu
         sib-display(
           data-src=`${sdn}/members/`,
-          data-fields='pseudo',
+          data-fields='user.username',
           next='member-chat'
         )
     div.divider

src/page-job-offers.pug

@@ -5,12 +5,18 @@ div.grid-layer
     sib-display#offers-list(
       data-src=`${sdn}/job-offers/`,
       data-fields='status, user-thumb, creation, title, description, skills, send',
+      
       set-status='closingDate',
       widget-closingDate='hdapp-closing-date',
-      set-user-thumb='author.account.picture, author.first_name, author.groups.ldp:contains.name',
+      
+      set-user-thumb='author.account.picture, author.first_name, author.groups',
       widget-author.account.picture='sib-display-img',
+      widget-author.groups='sib-display-lookuplist',
+      
       set-creation='creationDate',
+
       widget-skills='sib-display-lookuplist',
+      
       set-send='before-send-link, send-link',
       value-before-send-link='',
       value-send-link='Send a private message',
@@ -26,9 +32,9 @@ div.grid-layer
     sib-link(next="job-offer-create").containerH.containerCenter.action-link
       div.icon-plus
       div Post a new offer
-    sib-link().containerH.containerCenter.how-link
+    //-sib-link().containerH.containerCenter.how-link
       div.icon-idea
       div.grow How To find a new offer?
-    sib-link().containerH.containerCenter.how-link
+    //-sib-link().containerH.containerCenter.how-link
       div.icon-idea
       div.grow How to set notification?

src/page-members.pug

@@ -5,31 +5,32 @@ div.grid-layer
     h1 Members
     sib-display#profiles-list(
       data-src=`${sdn}/members/`,
-      data-fields='header, infos, groups',
+      counter-template='${counter} members',
+      data-fields='header, infos',
+
       set-header='user.account.picture, user, pseudonym, bio, send',
-      set-infos='cell, user.groups.name, user.email, phone, user.skills',
-      set-user='user.first_name, user.last_name',
+      widget-user.account.picture='sib-display-img',
+      widget-user='hdapp-userinfo',
       set-pseudonym='before-pseudo,user.username',
       value-before-pseudo='@',
       value-send='SEND A MESSAGE',
       template-send='chat-link',
-      counter-template='${counter} members',
-      widget-user.account.picture='sib-display-img',
-      widget-roles='sib-display-lookuplist',
-      widget-user='hdapp-userinfo',
+      
+      set-infos='city, user.groups, user.email, phone, user.skills',
+      widget-user.groups='sib-display-lookuplist',
       widget-user.skills='sib-display-lookuplist',
 
-      search-range-roles=`${sdn}/role/`,
+      search-range-groups=`${sdn}/groups/`,
       search-range-skills=`${sdn}/skills/`,
-      search-fields='name, roles, skills',
-      set-name='pseudo,user.first_name,user.last_name',
+      search-fields='name, groups, skills',
+      set-name='pseudo, user.first_name, user.last_name',
       search-label-name='Search by lastname, firstname...',
-      search-label-roles='Filter by role',
-      search-label-skills='Search by skills',
       search-widget-name='sib-form-placeholder-text',
+      search-label-groups='Filter by role',
+      search-label-skills='Search by skills',
       search-widget-skills='sib-form-placeholder-text',
       next='member')
-  div.grid-layer-links.containerV
+  //-div.grid-layer-links.containerV
     div.containerH.containerCenter.how-link
       div.containerV.fix.icon-idea
       div.containerV.grow

src/page-project-profile.pug

@@ -2,37 +2,63 @@
   template#customer-template
     div#clientBox
       div
-        h2 Client :
-        div.containerH
-          label Raison Sociale :
-          span ${value.name}
-        div.containerV
-          label Adresse :
-          span ${value.address}
+        h5 Client:
+        ul
+          li #[span Business name:]${value.name}
+          li #[span Company register:]${value.companyRegister}
+          li
+            span Address:
+            br
+            p ${value.address}
       div
-        h2 Contact :
+        h5 Contact:
+        ul
+          li(name='name') #[span ${value.firstName} ${value.lastName}], ${value.role}
+          li(name='email')
+            a(href='mailto:${value.email}') ${value.email}
+          li(name='phone') ${value.phone}
 
   sib-display(
-    data-fields='title, customer.logo, label-description, description, customer',
-    set-title='const-title1,phone, customer.name,const-title2, name',
-    widget-customer.logo='sib-display-img',
-    template-customer='customer-template',
-    widget-team='sib-display-lookuplist',
-    value-label-description="Description:",
-    value-label-customer="Client:",
-    value-const-title1="N°:",
+    data-fields='block-title, infos, block-lead, block-fee, block-customer',
+    
+    set-block-title='const-title1, number, customer.name,const-title2, name, entitled, creationDate',
+    value-const-title1="N°",
     value-const-title2="-",
+    value-entitled="Creation date:"
+
+    set-infos='block-description, block-logo',
+    set-block-description='label-description, description',
+    set-block-logo='customer.logo',
+    value-label-description='DESCRIPTION:',
+    widget-customer.logo='sib-display-img',
+
+    set-block-fee='label-fee, details-cell, details-business',
+    value-label-fee='FEE:',
+    set-details-cell='cell-name, cell-fee, percentage',
+    value-cell-name='Happy Dev Paris:',
+    value-cell-fee='5',
+    value-percentage='%',
+    set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
+    value-business-contribution='Business contribution:',
+    value-comma=', ',
+
+    set-block-customer='label-customer, customer',
+    value-label-customer='CUSTOMER INFORMATIONS:'
+    template-customer='customer-template',
     bind-resources,
   )
 
-  h2 Team:
-  div.containerH
-    sib-display.members-list-condensed(
-      id-suffix='team',
-      data-fields='account.picture, profile.user, groups',
-      widget-account.picture='sib-display-img',
-      widget-profile.user='hdapp-userinfo',
-      widget-groups='sib-display-lookuplist',
+  div(name='block-team')
+    h2(name='label-team') Team:
+    sib-display(
+      id-suffix='members',
+      data-fields='teammate-img, teammate-profile, teammate-job',
+      set-teammate-img='user.account.picture',
+      set-teammate-profile='user, user.groups',
+      set-teammate-job='name',
+      widget-user.account.picture='sib-display-img',
+      widget-user='hdapp-userinfo',
+      widget-user.groups='sib-display-lookuplist',
       next='profile',
       bind-resources,
     )

src/styles/content.scss

@@ -74,10 +74,10 @@
 }
 // member-profile && members
 
-.members-list-condensed {
+/*.members-list-condensed {
   img {
     width: 50px;
-    height: 50px;
+    height: 100px;
     border-radius: 100%;
     object-fit: cover;
     object-position: top;
@@ -88,11 +88,20 @@
   }
 
   > div > sib-display > div {
-    margin: 1em 0;
     display: grid;
-    grid-template-columns: [first] 50px [middle] auto [end];
-    grid-template-rows: [first] 25px [middle] 25px [end];
+    grid-template-columns: 0.5fr 2fr;
+    grid-template-rows: repeat(3, auto);
+    grid-column-gap: 3rem;
     align-items: center;
+
+    div[name="teammate-img"] {
+      background: blue;
+      grid-row: 1 / -1;
+    }
+      
+    }
+
+
     ul{
       margin-top: 0px;
       margin-bottom: 0px;
@@ -112,7 +121,7 @@
   // ul {
   //   padding-left: 1em;
   // }
-}
+}*/
 
 sib-display#member-info {
   display: flex;
@@ -265,81 +274,6 @@ hdapp-available {
     }
   }
 }
-// projects
-
-#project-profile sib-display {
-  sib-display-div {
-    > [name^='label-'] {
-      @extend h2;
-    }
-  }
-
-  [name='title'] {
-    @extend h1;
-    display: flex;
-
-    > * {
-      padding-left: 0.5em;
-      padding-right: 0.5em;
-    }
-
-    > [name^='const-'] {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    > [name='name'] {
-      font-weight: normal;
-    }
-  }
-}
-
-#clientBox {
-  margin-top: 1em;
-  display: grid;
-  grid-template-columns: 50% 50%;
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-left-width: 1px;
-  border-left-style: solid;
-
-  > * {
-    label{
-      font-weight: bold;
-      margin-right: 1em;
-    }
-    border-right-width: 1px;
-    border-right-style: solid;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    padding: 1em;
-    > div{
-      margin-bottom: 1em;
-    }
-  }
-}
-
-#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;
-    }
-  }
-}
 
 /*
 label {

src/styles/index.scss

@@ -8,10 +8,13 @@
 @import 'main';
 @import 'form';
 @import 'content';
+
 @import 'filters';
 @import 'right-panel';
+
 @import 'job-offers';
 @import 'members';
+@import 'project-profile';
 
 // @import 'members';
 @import 'header';

src/styles/job-offers.scss

@@ -53,6 +53,12 @@
 
   > sib-link {
     cursor: pointer;
+    @include icon('speech');
+
+    &::before {
+      font-size: 15px;
+      margin-right: 12px;
+    }
   }
 }
 

src/styles/main.scss

@@ -15,7 +15,7 @@ html {
   font-family: Open Sans, sans-serif;
   font-size: 13px;
   background-color: $color-anti-flash-white;
-  color: $color-taupe-gray;
+  color: $color-text-base;
 }
 // body {
 //   height: 100%;
@@ -59,13 +59,22 @@ h4 {
   font-size: 0.68em;
 }
 
+h5 {
+  font-size: 20px;
+}
+
 .debug {
   outline: 2px dotted red;
 }
 
+#job-offers,
+#members {
+  @extend %content-padding;
+}
+
 .frame {
   @extend %frame;
-  padding: 1em;
+  padding: 3em;
 }
 
 .menu-notification {
@@ -176,7 +185,7 @@ h4 {
     > div {
       //display: flex;
       //margin: 2.6em;
-      padding:2.6em;
+      //padding:2.6em;
       //flex: 1 1 0;
       flex-grow: 1;
     }
@@ -318,3 +327,14 @@ sib-display-lookuplist {
     font-weight: bold;
   }
 }
+
+div[name*='groups'],
+li[name*='groups'] {
+  border: 1px solid $color-mikado-yellow;
+  border-radius: 3px;
+  color: $color-rolling-stone;
+  font-size: 13px;
+  font-weight: 400;
+  margin-left: 1em;
+  padding: calc(16px - 1em) 0.7em;
+}

src/styles/material-design-icons.scss

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

src/styles/members.scss

@@ -28,7 +28,7 @@
         content: '';
         position: relative;
         top: 0.5em;
-        width: 31.4em;
+        width: 35.2vw;
       }
 
       &::before {
@@ -41,10 +41,10 @@
     }
 
     > sib-display {
-      color: $color-rolling-stone;
-      cursor: pointer;
       background-color: white;
       box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
+      color: $color-rolling-stone;
+      cursor: pointer;
       display: flex;
       flex-flow: column wrap;
       margin-bottom: 2.5rem;
@@ -59,9 +59,9 @@
 
       div[name='header'] {
         border-bottom: 1px solid $color-anti-flash-white;
-        padding: 0.5em 0 2em;
         display: flex;
         flex-direction: column;
+        padding: 0.5em 0 2em;
 
         > *:not(sib-display-img) {
           display: flex;
@@ -81,13 +81,10 @@
           }
         }
 
-        div[name='user'] {
+        ul[name='user'] {
           font-weight: bold;
+          margin: 0;
           @extend h1;
-
-          sib-display-div[name$='last_name'] {
-            margin-left: 6px;
-          }
         }
 
         sib-display-div[name$='bio'] {
@@ -118,7 +115,9 @@
       
       div[name='infos'] {
 
-        > sib-display-div > div {
+        > sib-display-div > div,
+        > sib-display-lookuplist > ul {
+          margin-bottom: 0;
           margin-top: 1em;
 
           &::before {
@@ -128,15 +127,22 @@
           }
         }
 
-        ul {
+        > sib-display-lookuplist[name$='groups'] > ul > li {
+          border: none;
+          font-size: inherit;
+          margin-left: 0;
+          padding: 0;
+        }
+
+        > sib-display-lookuplist[name$='skills'] > ul {
           margin-left: 1em;
         }
         
-        [name$='cell'] * {
+        [name$='city'] * {
           @include mdi('atom');
         }
 
-        [name*='groups'] * {
+        ul[name*='groups'] {
           @include mdi('account-outline');
         }
 

src/styles/menu.scss

@@ -59,11 +59,20 @@ sib-router {
 
   .sub-menu {
     padding-left: 1.8em;
+    
     div {
       color: $color-spun-pearl;
       padding-bottom: 0.7em;
       font-size: 15px;
       cursor: pointer;
+
+      div[name='project'] {
+        display: flex;
+
+        sib-display-div[name='dash'] {
+          margin: 0 0.4em;
+        }
+      }
     }
   }
 

src/styles/project-profile.scss

@@ -0,0 +1,264 @@
+#project-profile {
+  
+  [name^='block-']:not([name='block-title']) {
+    margin-top: 3em;
+  
+    [name^='label-'] {
+      font-weight: bold;
+      margin-bottom: 0.8em;
+      text-transform: uppercase;
+      @extend h2;
+    }
+  
+    sib-display-div:not(:first-of-type),
+    ul,
+    [name*='job'] {
+      font-size: 15px;
+    }
+  }
+
+  [name='block-title'] {
+    border-bottom: 1px solid $color-link-water;
+    display: flex;
+    padding-bottom: 2em;
+  
+    > * {
+      color: $color-dark-lava;
+      font-size: 20px;
+      font-weight: bold;
+      padding-right: 0.5em;
+      text-transform: uppercase;
+    }
+  
+    > [name^='const-'] {
+      padding: 0;
+    }
+
+    > sib-display-div[name='name'] {
+      padding-left: 0.5em;
+    }
+    
+    > :not(:nth-last-child(n+4)) {
+      color: $color-purple-dark;
+      font-weight: normal;
+      text-transform: none;
+    }
+
+    > :not(:nth-last-child(n+3)) {
+      color: $color-text-base;
+      font-size: 16px;
+    }
+
+    [name='entitled'] {
+      margin-left: auto;
+    }
+  }
+
+  [name='infos'] {
+    display: flex;
+
+    [name='description'] {
+      width: 90%;
+    }
+    
+    [name='block-logo'] {
+      box-sizing: border-box;
+      display: block;
+      height: 8.5vh;
+      position: relative;
+      text-align: center;
+      width: 15vw;
+    }
+  }
+
+
+  [name^='details-'] {
+    display: flex;
+    font-size: 15px;
+    margin-bottom: 0.5em;
+
+    [name='cell-name'],
+    [name='business-contribution'] {
+      font-weight: bold;
+      margin-right: 5px;
+    }
+
+    [name='comma'] {
+      margin-right: 0.2em;
+    }
+  }
+}
+
+#clientBox {
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 1em;
+  max-width: 100%;
+
+  > * {
+    border: 1px solid $color-link-water;
+    flex: 1 1 auto;
+    justify-content: space-between;
+    margin: 0 -1px -1px 0;
+    min-width: 25vw;
+    padding: 0;
+
+    h5 {
+      margin-left: 1.1em;
+      margin-top: 1.2em;
+    }
+
+    ul {
+      font-size: 15px;
+      list-style: none;
+      margin: -1.2em 0 2.2em -1.2em;
+
+      li {
+
+        span {
+          font-weight: bold;
+        }
+      }
+    }
+
+    &:first-child {
+      li {
+      
+        span {
+          margin-right: 0.3em;
+        }
+
+        &:first-child {
+          margin-bottom: 0.5em;
+        }
+
+        &:last-child {
+          margin-top: 2.4em;
+        }
+      }
+    }
+
+    &:not(:first-child) {
+      padding-left: 3em;
+
+      li {
+        margin-bottom: 1em;
+
+        &:last-child {
+          margin-top: 1.3em;
+        }
+
+        &::before {
+          color: $color-selective-yellow;
+          font-size: 20px;
+          padding: 0 0.6em 0 0;
+        }
+      }
+
+      [name$='name'] {
+        @include mdi('account-outline');
+
+        &::before {
+          padding-left: 0.2em;
+        }
+      }
+
+      [name$='email'] {
+        @include icon('envelope');
+      }
+
+      [name$='phone'] {
+        @include mdi('cellphone-iphone');
+
+        &::before{
+          padding-left: 0.2em;
+        }
+      }
+    }
+  }
+}
+
+[name='block-team'] {
+  
+  > sib-display > div > sib-display > div {
+    align-items: center;
+    display: grid;
+	  grid-template-columns: 5vw 2fr;
+    grid-template-rows: repeat(2, 5.2vh);
+    
+    label {
+      display: none;
+    }
+    
+    [name='teammate-profile'],
+    [name='teammate-img'],
+    [name='teammate-job'] {
+      margin: 0;
+      width: auto;
+    }
+
+    [name='teammate-img'] {
+      grid-row: 1 / -1;
+      
+      img {
+        border: 0;
+        border-radius: 100%;
+        display: block;
+        font-size: 100%;
+        margin: 0;
+        padding: 0;
+        width: 75%;
+      }
+    }
+    
+    [name='teammate-profile'] {
+      align-self: end;  
+    
+      hdapp-userinfo {
+        display: inline-block;
+        height: 0;
+
+        > ul {
+          font-weight: 600;
+          padding-inline-start: 0;
+        }
+      }
+      
+      sib-display-lookuplist {
+        display: inline-block;
+
+        > ul {
+          margin-block-end: 0;
+          margin-block-start: 0;
+        }
+      }
+    }
+
+    [name='teammate-job'] {
+      align-self: start;
+    }
+  }
+}
+
+#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/right-panel.scss

@@ -36,6 +36,7 @@
   color: $color-white;
   font-weight: bold;
   text-transform: uppercase;
+  cursor: pointer;
 
   .icon-plus {
     font-size: 20px;

src/styles/variables.scss

@@ -4,15 +4,18 @@ $color-timberwolf:       hsl(0, 0%, 85%);
 $color-white:            hsl(0, 0%,100%);
 
 $color-selective-yellow: hsl(43, 100%, 50%);
+$color-mikado-yellow:    hsl(45, 95%, 54%);
 $color-mustard:          hsl(46, 100%, 67%);
 
 $color-rolling-stone:    hsl(210, 4%, 50%);
 $color-taupe-gray:       hsl(210, 5%, 56%);
 $color-anti-flash-white: hsl(210, 25%, 95%);
+$color-text-base:        hsl(213, 4%, 50%);
 $color-gainsboro:        hsl(213, 13%, 86%);
 $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-purple-dark:      hsl(233, 18%, 29%);
 $color-spun-pearl:       hsl(244, 10%, 70%);
 $color-majorelle-blue:   hsl(244, 73%, 62%);
@@ -22,6 +25,10 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
 }
 
+%content-padding {
+  padding: 2.6em;
+}
+
 %frame {
   @extend %shadow;
   background-color: $color-white;