adapt header and sidemenu to mobiles

This commit is contained in:
Frédéric Péters 2018-11-17 20:51:58 +01:00
parent c9dd47af60
commit 6222816ae6
1 changed files with 28 additions and 9 deletions

View File

@ -159,6 +159,16 @@ ul.user-info {
padding: 0 2em;
text-transform: uppercase;
}
@media screen and (max-width: $mobile-limit) {
padding-right: 1rem;
.ui-platform-name, .ui-avatar, .ui-name, .ui-help {
display: none;
}
.ui-logout a {
padding: 1rem;
}
}
}
/* header */
@ -253,6 +263,9 @@ span#applabel {
left: 24px;
height: 50px;
width: 183px;
@media screen and (max-width: $mobile-limit) {
left: $header-height + 5px;
}
}
}
@ -369,7 +382,6 @@ div#main-content {
flex: 1 1 auto;
width: 100%;
margin: 1rem;
margin-left: 1rem;
min-height: 90vh;
position: relative;
overflow-x: auto;
@ -377,6 +389,8 @@ div#main-content {
box-sizing: border-box;
@media screen and (max-width: $mobile-limit) {
border-width: 0 0 1px 0;
margin: 0;
padding: 1rem;
}
}
@ -845,6 +859,16 @@ body.sidepage-expanded #sidepage {
border-radius: 10px;
z-index: 100;
@include vendor-prefix('transition', 'all 0ms ease-in');
@media screen and (max-width: $mobile-limit) {
border-radius: 0;
left: 0;
top: 0;
right: auto;
width: $header-height;
height: $header-height;
line-height: $header-height;
display: block;
}
}
body.sidepage-expanded #sidepage span#applabel::before {
@ -856,6 +880,9 @@ body.sidepage-expanded #sidepage span#applabel::before {
background: white;
position: relative;
left: $sidepage-left-space;
@media screen and (max-width: $mobile-limit) {
left: 0;
}
list-style: none;
padding: 0;
padding-top: 1em;
@ -924,12 +951,6 @@ ul#sidepage-menu li a {
}
@media screen and (max-width: $mobile-limit) {
body #main {
margin-top: 0px;
}
ul.user-info {
z-index: 100;
}
#sidepage {
@include vendor-prefix('transition', 'height 400ms ease-in');
height: $header-height;
@ -937,7 +958,6 @@ ul#sidepage-menu li a {
overflow: hidden;
span#applabel::before {
content: "\f0c9"; /* fa-bars */
width: 1em;
display: inline-block;
}
}
@ -1225,7 +1245,6 @@ div.cke_reset_all .cke_dialog .cke_dialog_body {
}
}
@import 'grid';
@import 'jqueryui';
@import 'forms';