feature(members): MR!6 - Sib-directory added

- CSS finalised
- Default user picture added
- See https://git.happy-dev.fr/startinblox/components/sib-directory/merge_requests/6

src/styles/filters.scss

@@ -1,8 +1,7 @@
 %filters {
-  border-bottom: 1px solid $color-gainsboro;
   display: grid;
   grid-gap: 0px 15px;
-  grid-template-columns: 50% 50%;
+  grid-template-columns: 1fr 1fr;
   grid-template-rows: 3.5em 3.5em;
 
   label {
@@ -29,7 +28,7 @@
   select {
     background: $color-white;
     background-image: url("/images/chevron-down.png");
-    background-position: 96% 60%;
+    background-position: right 12px top 60%;
     background-repeat: no-repeat;
     background-size: 14px 9px;
     box-sizing: border-box;
@@ -47,10 +46,15 @@
     display: flex;
     flex-direction: column;
   }
+
+  sib-form-placeholder-dropdown[name="skills"] {
+    grid-column-end: 3;
+    grid-column-start: 1;
+  }
 }
 
-#offers-list, #profiles-list {
-  & > sib-form {
+#offers-list, #members-list {
+  sib-form {
     @extend %filters;
   }
 }

src/styles/index.scss

@@ -1,6 +1,7 @@
 @charset "UTF-8";
 
 @import '../../node_modules/include-media/dist/include-media';
+@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css';
 @import 'icons/custom-icons';
 @import 'icons/icons';
 @import 'icons/material-design-icons';

src/styles/main.scss

@@ -1,6 +1,6 @@
-@import 'variables';
-
-[hidden] {
+[hidden],
+.hidden,
+.is-hidden {
   display: none !important;
 }
 
@@ -141,7 +141,6 @@ li {
 }
 
 sib-route,
-sib-trigger,
 sib-link {
   cursor: pointer;
 }
@@ -193,7 +192,7 @@ sib-link.back {
   display: grid;
   font-size: 16px;
   grid-template-columns: [start]auto[middle]25%[end];
-  grid-template-rows: [start]13em[middle]auto[end];
+  grid-template-rows: [start]7em[middle]auto[end];
 }
 .grid-layer-main {
   grid-column-start: start;
@@ -223,7 +222,11 @@ sib-multiple[name*='skills'] {
   color: $color-white;
   font-size: 1.4rem;
   font-weight: bold;
-  margin: 0.4rem 0.4rem 0.4rem 0;
+  margin: 0.4rem 1rem 0.4rem 0;
   padding: 0.5rem 2rem;
 }
 
+member-info-groups {
+  @extend %group;
+}
+

src/styles/member-profile.scss

@@ -1,4 +1,4 @@
-#member {
+#member-profile {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -14,7 +14,7 @@
     }
   }
 
-  #member-profile {
+  #member-info {
     background-color: $color-white;
     box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
     margin: 2rem 1rem 5rem 2rem;
@@ -23,29 +23,22 @@
     div[name='member-profile__bio'] {
       border-bottom: 1px solid $color-link-water;
       display: grid;
-      grid-template-areas: "avatar name name name status"
-                           "avatar pseudo pseudo pseudo status"
-                           "avatar bio bio bio status"
-                           "avatar list list list button"
-                           "avatar list list list button";
+      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'] {
-        background-color: $color-bombay;
-        border-radius: 50%;
         grid-area: avatar;
-        height: 34vh;
         overflow: hidden;
         position: relative;
-        width: 34vh;
         
         img {
-          height: 100%;
-          left: 0;
+          border-radius: 50%;
           object-fit: cover;
-          position: absolute;
-          top: 0;
-          width: 100%;
+          max-width: 90% !important;
         }
       }
 
@@ -64,10 +57,6 @@
         > sib-multiple[name$='groups'] {
           display: flex;
           padding-left: 1.4rem;
-
-          groups-name {
-            @extend %group;
-          }
         }
       }
 
@@ -89,7 +78,7 @@
         @extend %member-info;
       }
 
-      status-template[name$='available']{
+      member-status[name$='available']{
         align-self: flex-end;
         color: $color-majorelle-blue;
         grid-area: status;
@@ -149,12 +138,15 @@
     }
 
     div[name='member-profile__skills'] {
+      padding: 4.5rem;
+      
+      & ~ div[name='member-profile__skills'] {
+        padding-top: 0;
+      }
 
-      sib-display-lookuplist {
-
-        label {
-          display: none;
-        }
+      label {
+        font-weight: bold;
+        padding-bottom: 0.5rem;
       }
     }
   }

src/styles/members.scss

@@ -1,6 +1,7 @@
-#members {
+#members-list {
+  @extend .grid-layer;
 
-  #profiles-list {
+  #members-list__content {
     @extend .grid-layer;
 
     nav {
@@ -86,9 +87,8 @@
         display: flex;
         flex-flow: column wrap;
         margin-bottom: 2.5rem;
-        padding-bottom: 10rem;
+        padding-bottom: 2rem;
         @media(min-width: 56rem) {
-          height: 62rem;
           width: 32%;
         }
 
@@ -96,19 +96,33 @@
           display: none;
         }
 
+        sib-multiple[name$='groups'] {
+          align-items: flex-start;
+          display: flex;
+          justify-content: flex-end;
+          min-height: 3.4rem;
+          padding-left: 2.6rem;
+          padding-right: 2.6rem;
+          padding-top: 1.3rem;
+
+          > * {
+            margin: 0.3rem;
+          }
+        }
+
         div[name='header'] {
           border-bottom: 1px solid $color-anti-flash-white;
           display: flex;
           flex-direction: column;
           padding: 0.85rem 0 3.4rem;
 
-          > *:not(sib-display-img) {
+          >*:not(member-picture) {
             display: flex;
             flex-basis: content;
             justify-content: center;
           }
 
-          sib-display-img {
+          member-picture {
             background-color: $color-white;
             border-radius: 50%;
             height: 28vh;
@@ -163,14 +177,6 @@
           padding: 0 1.7rem;
 
           @extend %member-info;
-
-          sib-multiple[name$='groups'] {
-            display: flex;
-
-            > * {
-              margin-right: 0.4rem;
-            }
-          }
         }
       }
     }

src/styles/variables.scss

@@ -28,8 +28,13 @@ $color-spun-pearl:       hsl(244, 10%, 70%);
 $color-majorelle-blue:   hsl(244, 73%, 62%);
 
 %backlink {
-  color: #3d4057;
   @include icon('arrow-left-circle');
+  color: #3d4057;
+  text-decoration: underline;
+
+  &::before {
+    text-decoration: none;
+  }
 }
 
 %button {
@@ -63,6 +68,7 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
 %member-info {
 
   sib-multiple[name^='user.'],
+  > member-info > div,
   > sib-display-div > div {
     display: flex;
     flex-wrap: wrap;