Menu, Member list and Member detail pages made responsive

This commit is contained in:
Alexandre Bourlier 2018-04-26 02:20:32 +02:00
parent 5304880083
commit 912a134036
4 changed files with 73 additions and 3 deletions

View File

@ -82,3 +82,15 @@
}
}
}
@media (min-width: $sm-with) {
#member-detail {
#member-info {
ldp-display-img {
display: block;
float: right;
width: 300px;
}
}
}
}

View File

@ -2,19 +2,64 @@
ldp-form {
background-color: #F3F3F3;
}
}
@media (min-width: 576px) {
#profilesList {
display: flex;
justify-content: space-between;
ldp-display {
display: block;
margin-top: 40px;
}
}
@media (min-width: $md-with) {
#profiles-list {
display: flex;
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);
}
}
}
}
}

View File

@ -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;
}
}
}

View File

@ -4,3 +4,5 @@ $twitter-color: #1DA1F2;
$menu-height: 46px;
$menu-font-size: 17px;
$vertical-menu-width: 50px;
$sm-with: 576px;
$md-with: 768px;