Sidebar is responsive

This commit is contained in:
gaelle morin 2020-01-19 13:19:25 +01:00
parent 56953601e1
commit 3e281edc5c
No known key found for this signature in database
GPG Key ID: BC97AADCB48B7F27
6 changed files with 67 additions and 6 deletions

View File

@ -24,7 +24,7 @@ details#user-controls
#user-controls__panel #user-controls__panel
include page-user-panel.pug include page-user-panel.pug
.mobile-menu-icon .jsToggleLeftMenu.mobile-menu-icon
button.icon-menu button.icon-menu
button(role='log in' onclick="document.querySelector('sib-auth').login();") Login button(role='log in' onclick="document.querySelector('sib-auth').login();") Login

View File

@ -7,7 +7,7 @@ sib-widget(name='hd-create')
p.create You are not part of any ${value} yet. To create a new one, you can go to the p.create You are not part of any ${value} yet. To create a new one, you can go to the
sib-link(next='admin') administration panel sib-link(next='admin') administration panel
nav#main__menu nav#main__menu.jsLeftMenu.mobile-closed
sib-router#navbar-router(default-route='members') sib-router#navbar-router(default-route='members')
//- sib-route.menu(name='members') //- sib-route.menu(name='members')
//- div.menu-label Members //- div.menu-label Members

View File

@ -13,6 +13,9 @@
value-const-title1='N°' value-const-title1='N°'
) )
.mobile-sidebar-button.jsMobileSidebarOpenButton
button.icon-arrow-left-circle
span MENU
div.content-box__info div.content-box__info
sib-ac-checker(permission='acl:Read', bind-resources) sib-ac-checker(permission='acl:Read', bind-resources)
#project-chat(hidden) #project-chat(hidden)
@ -25,7 +28,7 @@ dialog(id='project-contributions-help').modal
button.icon-close button.icon-close
img(src='/images/contributions-help.png') img(src='/images/contributions-help.png')
nav.jsRightMenu(role='navigation') nav.jsRightMenu.mobile-closed(role='navigation')
sib-router(default-route='project-chat') sib-router(default-route='project-chat')
ul ul
li.jsOffsiteToggle li.jsOffsiteToggle

View File

@ -199,6 +199,40 @@ h5 {
border-bottom: 1px solid $color-221-51-90; border-bottom: 1px solid $color-221-51-90;
padding: 3rem; padding: 3rem;
@include breakpoint(sm) {
background: $color-221-51-90;
}
sib-display {
@include breakpoint(sm) {
float: left;
}
}
.mobile-sidebar-button {
@include breakpoint(sm) {
float: right;
button {
color: $color-233-18-29;
&::before {
font-size: 2.2rem;
margin-right: 1.2rem;
}
}
span {
font-size: 1.8rem;
font-weight: bold;
}
}
@include breakpoint($min: 1025px, $max: 0) {
display: none;
}
}
div { div {
.h1-aside { .h1-aside {

View File

@ -189,9 +189,11 @@
} }
} }
&.mobile-opened { &.jsLeftMenu.mobile-opened {
@include breakpoint(sm) { @include breakpoint(sm) {
bottom: 0; bottom: 0;
box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
min-width: 80%; min-width: 80%;
position: fixed; position: fixed;
right: 0; right: 0;
@ -200,7 +202,8 @@
} }
} }
&.mobile-closed { &.jsLeftMenu.mobile-closed {
@include breakpoint(sm) { @include breakpoint(sm) {
display: none; display: none;
} }

View File

@ -111,12 +111,33 @@
} }
} }
&.offsite-is-closed { &.jsRightMenu.offsite-is-closed {
transform: translate(15.5rem); transform: translate(15.5rem);
& .jsOffsiteToggle::before { & .jsOffsiteToggle::before {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
&.jsRightMenu.mobile-opened {
@include breakpoint(sm) {
background: $color-221-51-90;
bottom: 0;
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
min-width: 60%;
position: fixed;
right: 0;
top: 83px;
z-index: 1;
}
}
&.jsRightMenu.mobile-closed {
@include breakpoint(sm) {
display: none;
}
}
} }
} }