Merge branch 'gm-members-responsive' into 'staging'

ui: members page responsive

See merge request startinblox/applications/sib-app!60

src/dependencies.pug

@@ -12,13 +12,13 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 //- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
 //- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
 //- script(type="module" src="/lib/sib-directory/sib-directory.js")
-//- script(type="module" src="/lib/sib-joboffers/sib-job-board.js")
+//- script(type="module" src="/lib/sib-job-board/sib-job-board.js")
 
 //- CDN
 script(type="module" src="https://unpkg.com/@startinblox/core@0.8")
 script(type="module" src="https://unpkg.com/@startinblox/router@0.7")
 script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.2")
 script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.2")
-//- script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3")
+script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3")
-//- script(type="module" src="https://unpkg.com/@startinblox/component-directory@beta")
+script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3")
-//- script(type="module" src="https://unpkg.com/@startinblox/component-job-board@beta")
+script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3")

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

@@ -34,10 +34,10 @@
             width: 28vh;
 
             img {
-              height: 255px;
+              height: 265px;
               object-fit: cover;
               object-position: center;
-              width: 255px;
+              width: 265px;
             }
 
             object {

src/styles/layout/members/members.scss

@@ -36,7 +36,6 @@ member-info-groups {
 }
 
 #members-list {
-  @extend %grid-layer;
 
   #members-list__content {
     @extend %grid-layer;
@@ -44,6 +43,7 @@ member-info-groups {
     nav {
       align-items: center;
       display: flex;
+      flex-wrap: wrap;
       font-size: 2.4rem;
       justify-content: center;
 
@@ -79,18 +79,15 @@ member-info-groups {
 
     &>div,
     &>nav {
-      display: flex;
-      flex-wrap: wrap;
       grid-column-start: start;
       grid-column-end: end;
       margin-bottom: 1.7rem;
     }
 
-    & > div {
+    &>div:first-of-type {
-      justify-content: space-between;
+      display: flex;
-
-      &:first-of-type {
       color: $color-0-0-29;
+      flex-wrap: wrap;
       font-weight: bold;
       justify-content: center;
       margin: 3.75rem 0;
@@ -115,17 +112,39 @@ member-info-groups {
       }
     }
 
-      > sib-display {
+    &>div:nth-of-type(2) {
+      display: grid;
+      grid-gap: 30px;
+      grid-template-columns: 1fr;
+      grid-template-rows: auto;
+
+      @media only screen and (min-width: 850px) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      @media only screen and (min-width: 1180px) {
+        grid-template-columns: repeat(3, 1.5fr);
+      }
+
+      &>sib-display {
         background-color: white;
         box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
         color: $color-210-4-50;
         cursor: pointer;
+        min-height: auto;
+        position: relative;
+        text-decoration: none;
+        top: 0;
+        transition: all .1s ease-in;
+
+        &>div {
           display: flex;
-        flex-flow: column wrap;
+          flex-direction: column;
-        margin-bottom: 2.5rem;
+        }
-        padding-bottom: 2rem;
+
-        @media(min-width: 56rem) {
+        &:hover {
-          width: 32%;
+          box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
+          top: -2px;
         }
 
         label {
@@ -146,18 +165,6 @@ member-info-groups {
           }
         }
 
-        sib-set-default[name='header'] {
-          border-bottom: 1px solid $color-210-25-95;
-          display: flex;
-          flex-direction: column;
-          padding: 0.85rem 0 3.4rem;
-
-          >*:not(member-picture) {
-            display: flex;
-            flex-basis: content;
-            justify-content: center;
-          }
-
         member-picture {
           align-items: center;
           background-color: $color-213-20-91;
@@ -182,21 +189,30 @@ member-info-groups {
           }
         }
 
-          [name='name'] {
+        sib-set-default[name='bio'] {
-            margin: 0.67em 0;
+          align-items: center;
-          }
+          border-bottom: 1px solid $color-210-25-95;
-
-          sib-display-value[name$='bio'] {
           display: flex;
-            flex-basis: 3.5em;
+          flex-direction: column;
-            line-height: 1.6;
+          padding-bottom: 3rem;
-            margin: 2.5rem 0;
+
-            padding: 0 6.8rem;
+          >* {
             text-align: center;
           }
 
-          [next=messages] {
+          [name='pseudonym'] {
-            align-self: center;
+            margin-top: 0.6rem;
+          }
+
+          sib-display-value[name$='bio'] {
+            flex: 1;
+            margin: 2.5rem 0;
+            padding: 0 10px;
+            width: 70%;
+            flex-basis: 4.5em;
+          }
+
+          [name='send'] {
             border: 1px solid $color-244-73-62;
             border-radius: 3.4rem;
             color: $color-244-73-62;
@@ -205,7 +221,7 @@ member-info-groups {
             padding: 1rem 2.55rem 0.7rem;
             @include icon('speech');
 
-            &::before {
+            [next=messages]:before {
               font-size: 2.5rem;
               padding-right: 0.85rem;
             }
@@ -213,10 +229,12 @@ member-info-groups {
         }
 
         sib-set-default[name='infos'] {
-          display: block;
+          padding: 0.4rem 2rem 3.7rem;
-          padding: 0 1.7rem;
-
           @extend %member-info;
+
+          sib-multiple[name='skills'] {
+            margin: 1.6rem 0;
+          }
         }
       }
     }