From 912a13403621a682565a80b15224767a86d91fd9 Mon Sep 17 00:00:00 2001
From: Alexandre Bourlier <alexandre@happy-dev.fr>
Date: Thu, 26 Apr 2018 02:20:32 +0200
Subject: [PATCH] Menu, Member list and Member detail pages made responsive
---
src/scss/_member.scss | 12 ++++++++++
src/scss/_members.scss | 51 +++++++++++++++++++++++++++++++++++++---
src/scss/_menu.scss | 11 +++++++++
src/scss/_variables.scss | 2 ++
4 files changed, 73 insertions(+), 3 deletions(-)
diff --git a/src/scss/_member.scss b/src/scss/_member.scss
index 578577a8..8efc89af 100644
--- a/src/scss/_member.scss
+++ b/src/scss/_member.scss
@@ -82,3 +82,15 @@
}
}
}
+
+@media (min-width: $sm-with) {
+ #member-detail {
+ #member-info {
+ ldp-display-img {
+ display: block;
+ float: right;
+ width: 300px;
+ }
+ }
+ }
+}
diff --git a/src/scss/_members.scss b/src/scss/_members.scss
index 23aee087..10358fe3 100644
--- a/src/scss/_members.scss
+++ b/src/scss/_members.scss
@@ -2,19 +2,64 @@
ldp-form {
background-color: #F3F3F3;
}
+
+ ldp-display {
+ display: block;
+ margin-top: 40px;
+ }
}
-@media (min-width: 576px) {
- #profilesList {
+@media (min-width: $md-with) {
+ #profiles-list {
display: flex;
- justify-content: space-between;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ ldp-form {
+ flex-basis: 100%;
+ }
ldp-display {
+ cursor: pointer;
+ margin-right: 20px;
+ margin-bottom: 20px;
+ position: relative;
+
&, img {
width: 250px;
max-width: initial;
min-width: initial;
}
+
+ &::before,
+ &::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ transform: scale3d(0, 0, 1);
+ transition: transform .3s ease-out 0s;
+ background: rgba(255, 255, 255, .075);
+ content: '';
+ pointer-events: none;
+ }
+
+ &::before {
+ transform-origin: left top;
+ }
+
+ &::after {
+ transform-origin: right bottom;
+ }
+
+ &:hover,
+ &:focus {
+ &::before,
+ &::after {
+ transform: scale3d(1, 1, 1);
+ }
+ }
}
}
}
diff --git a/src/scss/_menu.scss b/src/scss/_menu.scss
index 7f8a4f79..75fe9027 100644
--- a/src/scss/_menu.scss
+++ b/src/scss/_menu.scss
@@ -30,6 +30,10 @@
border-bottom: 2px solid $hd-color;
color: $hd-color;
}
+
+ ldp-route:hover {
+ border-bottom: 2px solid $hd-color;
+ }
}
}
@@ -50,12 +54,19 @@
ldp-route {
text-align: center;
+ cursor: pointer;
padding: 6px 0px;
+ margin-bottom: 2px;
+ border-left: 2px solid transparent;
&[active] {
border-left: 2px solid $hd-color;
color: $hd-color;
}
+
+ &:hover {
+ border-left: 2px solid $hd-color;
+ }
}
}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index b2392ae0..9423ce58 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -4,3 +4,5 @@ $twitter-color: #1DA1F2;
$menu-height: 46px;
$menu-font-size: 17px;
$vertical-menu-width: 50px;
+$sm-with: 576px;
+$md-with: 768px;
--
GitLab