feature: profile edition added

- new page created
- new route added
- some styles are reworked
- new styles added

src/header.pug

@@ -8,7 +8,7 @@
 //-   i#close-search-icon.icon-close(aria-hidden='true')
 
 sib-notifications(
-  id-suffix="inbox",
+  id-suffix="inbox"
   bind-user
 )
 
@@ -17,10 +17,12 @@ include templates/hd-user-avatar.pug
 details#user-controls
   summary(tabindex='0' role='button')
     sib-display#user-controls__profile(
-      data-fields='first_name, account.picture',
+      data-fields='first_name, account.picture'
-      widget-account.picture='hd-user-avatar',
+      widget-account.picture='hd-user-avatar'
       bind-user
     )
+  #user-controls__panel
+    include page-user-panel.pug
 
 button(role='log in' onclick="document.querySelector('sib-auth').login();") Login
 

src/index.pug

@@ -37,3 +37,6 @@ html(lang="en")
 
         #messages(hidden).with-sidebar
           include page-messages.pug
+        
+        #my-profile(hidden).no-sidebar
+          include page-user-profile.pug

src/menu-left.pug

@@ -64,4 +64,5 @@ nav#main__menu
         )
 
     div.divider
+    sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')
 

src/page-circle-chat.pug

@@ -1,4 +1,4 @@
-.content-box.full-width.chat-view
+.content-box.with-padding.full-width.chat-view
   sib-chat(
     data-authentication='login',
     data-auto-login='true',

src/page-circle-create.pug

@@ -1,4 +1,4 @@
-.content-box.with-form.full-width
+.content-box.with-padding.with-form.full-width
   h1 New group
   p Here you can create a new group according to your interests, what you want to share, etc.
 

src/page-circle-edit.pug

@@ -1,4 +1,4 @@
-#circle-edit.content-box.with-form.full-width
+#circle-edit.content-box.with-padding.with-form.full-width
   h1 Edit group
   sib-form.block(
     range-owner=`${endpoints.users}`,

src/page-circle-profile.pug

@@ -1,4 +1,4 @@
-.content-box.full-width
+.content-box.with-padding.full-width
   h2 Channel's name:
   sib-display(
     data-fields='name',

src/page-job-offer-create.pug

@@ -1,4 +1,4 @@
-.content-box.with-form
+.content-box.with-padding.with-form
   h1 Post a new job offer
   p.center This form allows you to share an offer to all members of the network.
     

src/page-job-offer-edit.pug

@@ -1,4 +1,4 @@
-.content-box.with-form
+.content-box.with-padding.with-form
   h1 Edit your job offer
   
   sib-form.block(

src/page-messages.pug

@@ -1,4 +1,4 @@
-.content-box.full-width.chat-view
+.content-box.with-padding.full-width.chat-view
   sib-chat(
     data-authentication='login',
     data-auto-login='true',

src/page-project-chat.pug

@@ -1,4 +1,4 @@
-.content-box.full-width.chat-view
+.content-box.with-padding.full-width.chat-view
   sib-chat(
     data-authentication='login',
     data-auto-login='true',

src/page-project-create.pug

@@ -1,4 +1,4 @@
-.content-box.with-form.full-width
+.content-box.with-padding.with-form.full-width
   h1 New project
   p Here you can create your project, add members and assign them a job.
   

src/page-project-drive.pug

@@ -3,7 +3,7 @@ sib-widget(name='hd-drive')
         iframe.drive.chat-view(
             src='https://drive.google.com/embeddedfolderview?id=${value}'
         )
-.content-box.full-width.chat-view
+.content-box.with-padding.full-width.chat-view
     sib-display(
         bind-resources=""
         data-fields="driveID"

src/page-project-edit.pug

@@ -1,6 +1,6 @@
 
 
-.content-box.with-form.full-width
+.content-box.with-padding.with-form.full-width
   h1 Edit your project
   p Here you can edit your projet's details
 

src/page-project-profile.pug

@@ -1,4 +1,4 @@
-.content-box.full-width
+.content-box.with-padding.full-width
 
   include templates/template-business-provider.pug
   include templates/template-customer.pug

src/page-user-panel.pug

@@ -1,13 +1,9 @@
-//- nav(role="user's functionalities menu")
+nav(role="user's functionalities menu")
-//-   sib-router
+  ul
-//-     ul
+    li
-//-       sib-route(name='user-profile')
+      sib-link(next='my-profile') My profile
-//-         li
+    //-li
-//-           a(href='#') My profile
+      sib-link(next='user-settings') Settings
-//-       sib-route(name='user-settings')
+    //-li
-//-         li
+      sib-link(name='user-admin') Admin
-//-           a(href='#') Settings
+  //-button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out
-//-       sib-route(name='user-admin')
-//-         li
-//-           a Admin
-//-     button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out

src/page-user-profile.pug

@@ -0,0 +1,78 @@
+include templates/template-groups.pug
+
+.content-box.with-form.user-profile__container
+
+  .section.user-bio
+
+    sib-display.avatar-display(
+      bind-user=''
+      data-fields='account.picture'
+      label-account.picture=''
+      widget-account.picture='sib-display-img'
+    )
+    
+    sib-display.name-diplay(
+      bind-user=''
+      data-fields='user-name-groups, username'
+      set-user-name-groups='name, groups'
+
+      class-name='name'
+
+      label-groups=''
+      multiple-groups=''
+      widget-groups='groups-name'
+      
+      class-username='username'
+    )
+
+    sib-form.info-form(
+      bind-user=''
+      data-fields='profile.bio, inline-1, inline-2, inline-3, account.picture, instruction'
+
+      set-inline-1='profile.city, email'
+
+      set-inline-2='profile.phone, profile.website'
+
+      set-inline-3='profile.available'
+
+      class-profile.bio='form-label is-light'
+      label-profile.bio='short description'
+
+      class-profile.city='form-label is-light'
+      label-profile.city='your cell'
+
+      class-email='form-label is-light'
+
+      class-profile.phone='form-label is-light'
+      label-profile.phone='phone'
+
+      class-profile.website='form-label is-light'
+      label-profile.website='your website'
+
+      class-profile.available='form-label is-light'
+      label-profile.available='your availability'
+
+      class-account.picture='form-label is-light'
+      label-account.picture='your picture'
+
+      widget-instruction='hd-instruction'
+    )
+
+  .section.user-skills
+
+    sib-form(
+      bind-user=''
+      range-skills=`${endpoints.skills}`
+      data-fields='skills'
+
+      class-skills='form-label is-dark'
+      label-skills='Your main skills (4 max.):'
+      multiple-skills='sib-multiple-select'
+      widget-skills='sib-form-auto-completion'
+    )
+
+
+  sib-widget(name='hd-instruction')
+    template
+      span Show us your most beautiful smile
+      p Pictures help us to know ourselves and also to recognize ourselves, so don't be afraid to show your pretty face and avoid strange avatars.

src/styles/_index.scss

@@ -18,4 +18,5 @@ div#viewport {
     @import 'layout/job-offers/index';
     @import 'layout/project-profile/index';
     @import 'layout/circle-profile/index';
+    @import 'layout/user/index';
 }

src/styles/base/form.scss

@@ -11,7 +11,6 @@
     }
 
     sib-form {
-      border-bottom: 1px solid $color-210-17-91;
       padding-bottom: 2.55rem;
     }
 
@@ -66,7 +65,7 @@
       }
     }
 
-    input[type="submit"] {
+    input[type='submit'] {
       background-color: $color-233-18-29;
       border: none;
       border-radius: 100em;
@@ -82,6 +81,7 @@
     /* CLASSES Peut-être à sortir de .content-box */
 
     .form-label {
+      flex: 1 1 auto;
       font-weight: 600;
 
       &.is-dark label {
@@ -133,6 +133,7 @@
     }
 
     sib-multiple-select {
+
       sib-form-auto-completion > label {
         display: flex;
         flex-direction: column;

src/styles/base/header.scss

@@ -106,11 +106,11 @@ details {
 
 details#user-controls {
 
-  // summary:focus {
+  summary:focus {
-  //   background-color: $color-233-18-29;
+    background-color: $color-233-18-29;
-  //   color: $color-0-0-100;
+    color: $color-0-0-100;
-  //   outline: none;
+    outline: none;
-  // }
+  }
 
   #user-controls__profile {
     div {
@@ -131,7 +131,7 @@ details#user-controls {
       }
 
       sib-display-value[name='first_name'] {
-        // @include icon('arrow-down');
+        @include icon('arrow-down');
         align-items: center;
         display: flex;
         flex-direction: row-reverse;
@@ -169,9 +169,9 @@ details#user-controls {
           margin-right: 0;
           padding: 1.6rem 1.3rem;
 
-          a {
+          sib-link {
             color: $color-213-4-50;
-            text-decoration: none;
+            display: block;
           }
         }
       }
@@ -185,23 +185,23 @@ details#user-controls {
     }
   }
 
-  // &[open] {
+  &[open] {
-  //   background-color: $color-233-18-29;
+    background-color: $color-233-18-29;
-  //   color: $color-0-0-100;
+    color: $color-0-0-100;
 
-  //   #user-controls__profile {
+    #user-controls__profile {
 
-  //     div {
+      div {
 
-  //       sib-display-value[name='first_name'] {
+        sib-display-value[name='first_name'] {
-  //         @include icon('close');
+          @include icon('close');
 
-  //         &::before {
+          &::before {
-  //           margin-left: 1.5rem;
+            margin-left: 1.5rem;
-  //         }
+          }
-  //       }
+        }
-  //     }
+      }
-  //   }
+    }
-  // }
+  }
 }
 

src/styles/base/main.scss

@@ -63,7 +63,7 @@ h6 {
 }
 
 h1 {
-  font-size: 2.1rem;
+  font-size: 2rem;
 }
 
 h2 {
@@ -107,7 +107,6 @@ a {
 
 .content-box {
   @include window-style-modal();
-  @extend %padding-main;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -120,6 +119,10 @@ a {
     margin: 0 auto;
     min-height: calc(100vh - 84px);
   }
+
+  &.with-padding {
+    @extend %padding-main;
+  }
 }
 
 .drive {
@@ -144,6 +147,24 @@ a {
   }
 }
 
+.name {
+  color: $color-216-4-22;
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.username {
+
+  &::before {
+    content: '@';
+  }
+}
+
+.section {
+  border-bottom: 1px solid $color-221-51-90;
+  padding: 4.5rem;
+}
+
 // Compatibility layer for non-updated components
 @import 'compat';
 // Other base components

src/styles/layout/members/member-profile.scss

@@ -12,14 +12,12 @@
     .member-bio {
 
       div[name='member-profile__bio'] {
-        border-bottom: 1px solid $color-221-51-90;
         display: grid;
         grid-template-areas: "avatar name status"
           "avatar pseudo status"
           "avatar bio status"
           "avatar list button";
         grid-template-columns: 1fr 2fr 1fr;
-        padding: 4.5rem;
 
         div[name='member-img'] {
           grid-area: avatar;

src/styles/layout/user/_index.scss

@@ -0,0 +1 @@
+@import 'user-profile';

src/styles/layout/user/user-profile.scss

@@ -0,0 +1,77 @@
+.user-profile__container {
+
+  .user-bio {
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-areas: "avatar name"
+      "avatar information";
+    grid-template-columns: minmax(300px, 400px) 2fr;
+
+    .avatar-display {
+      grid-area: avatar;
+      overflow: hidden;
+      position: relative;
+
+      img {
+        width: 300px;
+        height: 300px;
+        object-fit: cover;
+        border-radius: 50%;
+        overflow: hidden;
+        object-position: center;
+        
+      }
+    }
+
+    .name-diplay {
+      grid-area: name;
+
+      [name='user-name-groups'] {
+        align-items: baseline;
+        align-self: end;
+        display: flex;
+
+        sib-multiple {
+          display: flex;
+          padding-left: 1.4rem;
+
+          groups-name {
+            @extend %user-role;
+          }
+        }
+      }
+    }
+
+    .info-form {
+      grid-area: information;
+
+      /* ces styles disparaitront lorsque l'on aura la fonctionnalité pour uploader une photo */
+      [name="account.picture"] {
+        margin-bottom: 1rem;
+      }
+
+      hd-instruction {
+        margin-left: 1rem;
+
+        span {
+          color: $color-233-18-29;
+          font-weight: bold;
+        }
+
+        p {
+          margin-left: 1rem;
+        }
+      }
+      /* Fin commentaire sur upload photos */
+    }
+
+    [name^="inline-"] {
+      display: flex;
+      justify-content: flex-start;
+
+      >*:not(:last-child) {
+        margin-right: 3rem;
+      }
+    }
+  }
+}