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 578577a..8efc89a 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 23aee08..10358fe 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 7f8a4f7..75fe902 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 b2392ae..9423ce5 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;