From 3c859332e27f0c799045a384cab6cf925706ba9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Fri, 12 Apr 2019 16:33:44 +0200
Subject: [PATCH] wip
---
src/dependencies.pug | 2 +-
src/styles/main.scss | 9 ++++++---
src/styles/member-profile.scss | 25 +++++++------------------
src/styles/members.scss | 25 +++++++++++++++----------
src/styles/variables.scss | 1 +
5 files changed, 30 insertions(+), 32 deletions(-)
diff --git a/src/dependencies.pug b/src/dependencies.pug
index 722df987..c0c73f70 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -31,5 +31,5 @@ script(type="module" src="https://unpkg.com/@startinblox/core@0.6")
script(type="module" src="https://unpkg.com/@startinblox/router@0.6")
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
script(type="module" src="https://unpkg.com/@startinblox/component-notifications")
-script(type="module" src="https://unpkg.com/@startinblox/component-directory")
+script(type="module" src="/lib/sib-directory/sib-directory.js")
diff --git a/src/styles/main.scss b/src/styles/main.scss
index ddb82ea3..830c088e 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,6 +1,5 @@
-@import 'variables';
-
-[hidden] {
+[hidden],
+.hidden {
display: none !important;
}
@@ -229,3 +228,7 @@ sib-multiple[name*='skills'] {
padding: 0.5rem 2rem;
}
+member-info-groups {
+ @extend %group;
+}
+
diff --git a/src/styles/member-profile.scss b/src/styles/member-profile.scss
index 7182d422..d22438da 100644
--- a/src/styles/member-profile.scss
+++ b/src/styles/member-profile.scss
@@ -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;
- }
}
}
diff --git a/src/styles/members.scss b/src/styles/members.scss
index 96e8f7ca..f32e2e8f 100644
--- a/src/styles/members.scss
+++ b/src/styles/members.scss
@@ -97,19 +97,32 @@
display: none;
}
+ sib-multiple[name$='groups'] {
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-end;
+ padding-top: 1.3rem;
+ padding-right: 2.6rem;
+ padding-left: 2.6rem;
+
+ > * {
+ 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;
@@ -164,14 +177,6 @@
padding: 0 1.7rem;
@extend %member-info;
-
- sib-multiple[name$='groups'] {
- display: flex;
-
- > * {
- margin-right: 0.4rem;
- }
- }
}
}
}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 4c371cfa..b2825457 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -68,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;
--
GitLab