From 4750bdea616f33793fca95e79d2c7e4ef719a1e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 12 Aug 2019 17:24:23 +0200 Subject: [PATCH] ui: members page responsive --- src/dependencies.pug | 8 +- src/styles/layout/members/member-profile.scss | 4 +- src/styles/layout/members/members.scss | 196 ++++++++++-------- 3 files changed, 113 insertions(+), 95 deletions(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index c012d46..53ee6a8 100644 --- a/src/dependencies.pug +++ b/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-directory@beta") -//- script(type="module" src="https://unpkg.com/@startinblox/component-job-board@beta") +script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3") +script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3") +script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3") diff --git a/src/styles/layout/members/member-profile.scss b/src/styles/layout/members/member-profile.scss index 53fd9c3..b974ba3 100644 --- a/src/styles/layout/members/member-profile.scss +++ b/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 { diff --git a/src/styles/layout/members/members.scss b/src/styles/layout/members/members.scss index 6d18f5f..79ffa52 100644 --- a/src/styles/layout/members/members.scss +++ b/src/styles/layout/members/members.scss @@ -1,8 +1,8 @@ %member-info { sib-multiple[name^='user.'], - > member-info > div, - > sib-display-value { + >member-info>div, + >sib-display-value { display: flex; flex-wrap: wrap; margin-bottom: 0; @@ -13,7 +13,7 @@ padding: 0 0.6em 0 0; } } - + [name$='profile.city'] * { @include mdi('atom'); } @@ -36,7 +36,6 @@ member-info-groups { } #members-list { - @extend %grid-layer; #members-list__content { @extend %grid-layer; @@ -44,12 +43,13 @@ member-info-groups { nav { align-items: center; display: flex; + flex-wrap: wrap; font-size: 2.4rem; justify-content: center; button { color: $color-210-25-95; - + &:before { color: $color-216-4-22; @include icon('arrow-left-circle'); @@ -70,62 +70,81 @@ member-info-groups { } } - & > sib-form { + &>sib-form { grid-column-start: start; grid-column-end: middle; grid-row-start: start; grid-row-end: middle; } - & > div, - & > nav { - display: flex; - flex-wrap: wrap; + &>div, + &>nav { grid-column-start: start; grid-column-end: end; margin-bottom: 1.7rem; } - - & > div { - justify-content: space-between; - &:first-of-type { - color: $color-0-0-29; - font-weight: bold; - justify-content: center; - margin: 3.75rem 0; - position: relative; + &>div:first-of-type { + display: flex; + color: $color-0-0-29; + flex-wrap: wrap; + font-weight: bold; + justify-content: center; + margin: 3.75rem 0; + position: relative; - &::before { - border-top: 1px solid $color-0-0-85; - bottom: 0; - content: ''; - left: 0; - margin: 0 auto; - position: absolute; - right: 0; - top: 50%; - width: 100%; - z-index: -1; - } - - span { - background-color: $color-210-25-95; - padding: 0 60px; - } + &::before { + border-top: 1px solid $color-0-0-85; + bottom: 0; + content: ''; + left: 0; + margin: 0 auto; + position: absolute; + right: 0; + top: 50%; + width: 100%; + z-index: -1; } - > sib-display { + span { + background-color: $color-210-25-95; + padding: 0 60px; + } + } + + &>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; - display: flex; - flex-flow: column wrap; - margin-bottom: 2.5rem; - padding-bottom: 2rem; - @media(min-width: 56rem) { - width: 32%; + min-height: auto; + position: relative; + text-decoration: none; + top: 0; + transition: all .1s ease-in; + + &>div { + display: flex; + flex-direction: column; + } + + &:hover { + box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24); + top: -2px; } label { @@ -141,62 +160,59 @@ member-info-groups { padding-right: 2.6rem; padding-top: 1.3rem; - > * { + >* { margin: 0.3rem; } } - sib-set-default[name='header'] { + member-picture { + align-items: center; + background-color: $color-213-20-91; + border-radius: 50%; + display: flex; + height: 28vh; + justify-content: center; + margin: 1.7rem auto; + overflow: hidden; + width: 28vh; + + img { + height: 100%; + object-fit: cover; + object-position: center; + width: 100%; + } + + object { + height: 45%; + width: 45%; + } + } + + sib-set-default[name='bio'] { + align-items: center; border-bottom: 1px solid $color-210-25-95; display: flex; flex-direction: column; - padding: 0.85rem 0 3.4rem; + padding-bottom: 3rem; - >*:not(member-picture) { - display: flex; - flex-basis: content; - justify-content: center; + >* { + text-align: center; } - member-picture { - align-items: center; - background-color: $color-213-20-91; - border-radius: 50%; - display: flex; - height: 28vh; - justify-content: center; - margin: 1.7rem auto; - overflow: hidden; - width: 28vh; - - img { - height: 100%; - object-fit: cover; - object-position: center; - width: 100%; - } - - object { - height: 45%; - width: 45%; - } - } - - [name='name'] { - margin: 0.67em 0; + [name='pseudonym'] { + margin-top: 0.6rem; } sib-display-value[name$='bio'] { - display: flex; - flex-basis: 3.5em; - line-height: 1.6; + flex: 1; margin: 2.5rem 0; - padding: 0 6.8rem; - text-align: center; + padding: 0 10px; + width: 70%; + flex-basis: 4.5em; } - - [next=messages] { - align-self: center; + + [name='send'] { border: 1px solid $color-244-73-62; border-radius: 3.4rem; color: $color-244-73-62; @@ -204,8 +220,8 @@ member-info-groups { font-weight: bold; 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 1.7rem; - + padding: 0.4rem 2rem 3.7rem; @extend %member-info; + + sib-multiple[name='skills'] { + margin: 1.6rem 0; + } } } }