autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: responsive - general layout. Flex to grid

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/index.pug
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')
include header.pug
main.notLoggedIn .wrapper
include menu-left.pug
div#viewport header#header.header(role='banner')
include header.pug
nav#main__menu.left-menu.jsLeftMenu
include menu-left.pug
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

176
src/menu-left.pug
View File

@ -47,94 +47,94 @@ 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')
div.menu-label Tableau de bord div.menu-label Tableau de bord
div.menu-icon.icon-home div.menu-icon.icon-home
div.divider div.divider
if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
sib-route.menu(name='members') sib-route.menu(name='members')
div.menu-label Annuaire des membres div.menu-label Annuaire des membres
div.menu-icon.icon-people div.menu-icon.icon-people
div.divider div.divider
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
sib-route.menu(name='job-offers', rdf-type='hd:joboffer') sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
div.menu-label Offres de mission div.menu-label Offres de mission
div.menu-icon.icon-briefcase div.menu-icon.icon-briefcase
div.divider div.divider
if endpoints.events || (endpoints.get && endpoints.get.events) if endpoints.events || (endpoints.get && endpoints.get.events)
sib-route.menu(name='events') sib-route.menu(name='events')
div.menu-label Evènements div.menu-label Evènements
div.menu-icon.icon-calendar div.menu-icon.icon-calendar
div.divider div.divider
if endpoints.projects || (endpoints.get && endpoints.get.projects) if endpoints.projects || (endpoints.get && endpoints.get.projects)
div div
sib-link(next='admin-project-list') sib-link(next='admin-project-list')
div.menu
div.menu-chevron
div.menu-icon.icon-arrow-right-circle
div.menu-label Projets
div.menu-icon.icon-folder-alt
sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
div.sub-menu.menu-notification
sib-display.project-tab(
bind-user
nested-field='projects'
fields='project'
empty-widget='hubl-create'
empty-value='projet'
widget-project='hubl-menu-fix-url-project'
order-by='project.customer.name'
next='project'
)
div.divider
if endpoints.circles || (endpoints.get && endpoints.get.circles)
div
sib-link(next='admin-circle-list')
div.menu
div.menu-chevron
div.menu-icon.icon-arrow-right-circle
div.menu-label Canaux
div.menu-icon.icon-folder-alt
sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
div.sub-menu.menu-notification
sib-display(
bind-user
nested-field='circles'
fields='circle'
empty-widget='hubl-create'
empty-value='canal'
widget-circle='hubl-menu-fix-url-circle'
order-by='circle.name'
next='circle'
)
div.divider
if endpoints.users || (endpoints.get && endpoints.get.users)
div.menu-wrapper
div.menu div.menu
div.menu-chevron div.menu-chevron
div.menu-icon.icon-arrow-up div.menu-icon.icon-arrow-right-circle
div.menu-label Messages div.menu-label Projets
div.menu-icon.icon-envelope-letter div.menu-icon.icon-folder-alt
sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden) sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
div.sub-menu.menu-notification div.sub-menu.menu-notification
sib-display.nosub( sib-display.project-tab(
data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}` bind-user
fields='name, chatProfile.jabberID, badge' nested-field='projects'
search-fields="name" fields='project'
search-label-name="Rechercher..." empty-widget='hubl-create'
search-widget-name="hubl-search-users" empty-value='projet'
widget-name='sib-display-div' widget-project='hubl-menu-fix-url-project'
widget-badge='hubl-counter' order-by='project.customer.name'
widget-chatProfile.jabberID='hubl-menu-jabberid' next='project'
action-badge='badge' )
order-by='username' div.divider
next='messages' if endpoints.circles || (endpoints.get && endpoints.get.circles)
paginate-by='10' div
) sib-link(next='admin-circle-list')
div.divider div.menu
div.menu-chevron
div.menu-icon.icon-arrow-right-circle
div.menu-label Canaux
div.menu-icon.icon-folder-alt
sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
div.sub-menu.menu-notification
sib-display(
bind-user
nested-field='circles'
fields='circle'
empty-widget='hubl-create'
empty-value='canal'
widget-circle='hubl-menu-fix-url-circle'
order-by='circle.name'
next='circle'
)
div.divider
if endpoints.users || (endpoints.get && endpoints.get.users)
div.menu-wrapper
div.menu
div.menu-chevron
div.menu-icon.icon-arrow-up
div.menu-label Messages
div.menu-icon.icon-envelope-letter
sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
div.sub-menu.menu-notification
sib-display.nosub(
data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
fields='name, chatProfile.jabberID, badge'
search-fields="name"
search-label-name="Rechercher..."
search-widget-name="hubl-search-users"
widget-name='sib-display-div'
widget-badge='hubl-counter'
widget-chatProfile.jabberID='hubl-menu-jabberid'
action-badge='badge'
order-by='username'
next='messages'
paginate-by='10'
)
div.divider
sib-route(name='admin', hidden) sib-route(name='admin', hidden)
sib-route.menu(name='profile', hidden) sib-route.menu(name='profile', hidden)

3
src/styles/base/header.scss
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;

82
src/styles/base/main.scss
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;

25
src/styles/base/menu-left.scss
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