update: responsive - general layout. Flex to grid

This commit is contained in:
gaelle morin 2020-06-01 17:11:24 +02:00
parent 20e27997d6
commit 1432011f34
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
5 changed files with 166 additions and 134 deletions

View File

@ -14,12 +14,16 @@ html(lang="en")
if clientCSS if clientCSS
link(rel='stylesheet', href=`${clientCSS}`) link(rel='stylesheet', href=`${clientCSS}`)
body body
header#header.flex.is-spaced(role='banner')
.wrapper
header#header.header(role='banner')
include header.pug include header.pug
main.notLoggedIn nav#main__menu.left-menu.jsLeftMenu
include menu-left.pug include menu-left.pug
div#viewport
main.box.content.notLoggedIn
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
#dashboard(hidden).no-sidebar.with-padding #dashboard(hidden).no-sidebar.with-padding

View File

@ -47,7 +47,7 @@ sib-widget(name='hubl-menu-fix-url-project')
order-by="customer.name" order-by="customer.name"
) )
nav#main__menu.jsLeftMenu
sib-router#navbar-router(default-route='dashboard') sib-router#navbar-router(default-route='dashboard')
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
sib-route.menu(name='dashboard') sib-route.menu(name='dashboard')

View File

@ -1,13 +1,14 @@
#header { #header {
max-height: 83px; max-height: 83px;
height: 83px; height: 83px;
display: flex;
align-items: center; align-items: center;
background-color: var(--color-header-background); background-color: var(--color-header-background);
color: var(--color-black); color: var(--color-black);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
z-index: 1; /*z-index: 1;*/
&.is-spaced { &.is-spaced {
padding: 0 2.5rem; padding: 0 2.5rem;

View File

@ -11,21 +11,6 @@
background-color: var(--color-main-background); background-color: var(--color-main-background);
color: var(--color-main-text); color: var(--color-main-text);
font-size: 1.6rem; font-size: 1.6rem;
min-height: 100vh;
overflow-wrap: break-word;
overflow-x: hidden; /* To stop getting horizontal scrolling if anything overflows the width */
}
main {
display: flex;
z-index: 0;
overflow: hidden;
height: calc(100vh - 83px); /* 83px = height of the header */
position: relative;
width: 100%;
backface-visibility: hidden;
/*will-change: overflow;*/
} }
.notLoggedIn { .notLoggedIn {
@ -33,6 +18,73 @@
} }
} }
.wrapper {
display: grid;
grid-template-areas:
"header"
"content";
@include breakpoint(lg) {
grid-template-columns: 265px auto;
grid-template-areas:
"header header"
"leftmenu content";
}
}
.header {
grid-area: header;
}
.left-menu {
grid-area: leftmenu;
@include breakpoint(lg) {
height: calc(100vh - 83px); /* 83px = nav height */
position: sticky;
top: 0;
overflow-x: hidden;
overflow-y: auto;
}
&.jsLeftMenu {
display: none;
@include breakpoint(lg) {
display: block;
}
}
&.jsLeftMenu[open] {
display: block;
bottom: 0;
box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
min-width: 80%;
position: fixed;
right: 0;
top: 0;
z-index: 1;
@include breakpoint(lg) {
display: none;
}
}
}
.content {
grid-area: content;
@include breakpoint(lg) {
position: sticky;
top: 0;
overflow-y: auto;
height: calc(100vh - 83px);
overflow-x: hidden;
}
}
/* Add scrollbar to the left and right menu, and to the content */ /* Add scrollbar to the left and right menu, and to the content */
nav, .views-container { nav, .views-container {
overflow: auto; overflow: auto;

View File

@ -1,10 +1,6 @@
#main__menu { #main__menu {
background-color: var(--color-menu-background); background-color: var(--color-menu-background);
color: var(--color-menu-text); color: var(--color-menu-text);
display: block;
max-width: 250px;
min-height: calc(100vh - 83px); /* 83px = nav height */
flex: 1;
/*transition: flex-basis 0.5s ease-in-out;*/ /*transition: flex-basis 0.5s ease-in-out;*/
&.open { &.open {
@ -245,27 +241,6 @@
opacity: 0.2; opacity: 0.2;
} }
} }
&.jsLeftMenu {
display: none;
@include breakpoint(lg) {
display: block;
}
}
&.jsLeftMenu[open] {
display: block;
bottom: 0;
box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
min-width: 80%;
position: fixed;
right: 0;
top: 0;
z-index: 1;
}
} }
// Temporary fix for badges // Temporary fix for badges