feature: profile edition added

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

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

@@ -1,7 +1,7 @@
 .content-box {
 
   &.with-form {
-    
+
     hd-template-project-title {
       border-bottom: 1px solid $color-221-51-90;
       color: $color-233-18-29;
@@ -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;
@@ -199,7 +200,7 @@
       }
     }
 
-    /*
+  /*
     input {
       -webkit-appearance: none;
       align-items: center;
@@ -352,7 +353,7 @@
     }
   */
     /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
-    /*
+  /*
     sib-form-multiple-dropdown {
 
       button {

src/styles/base/header.scss

@@ -106,11 +106,11 @@ details {
 
 details#user-controls {
 
-  // summary:focus {
-  //   background-color: $color-233-18-29;
-  //   color: $color-0-0-100;
-  //   outline: none;
-  // }
+  summary:focus {
+    background-color: $color-233-18-29;
+    color: $color-0-0-100;
+    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] {
-  //   background-color: $color-233-18-29;
-  //   color: $color-0-0-100;
+  &[open] {
+    background-color: $color-233-18-29;
+    color: $color-0-0-100;
 
-  //   #user-controls__profile {
+    #user-controls__profile {
 
-  //     div {
+      div {
 
-  //       sib-display-value[name='first_name'] {
-  //         @include icon('close');
+        sib-display-value[name='first_name'] {
+          @include icon('close');
 
-  //         &::before {
-  //           margin-left: 1.5rem;
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
+          &::before {
+            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;
+      }
+    }
+  }
+}