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

feature: left-menu: new classes

Browse Source
This commit is contained in:
gaelle morin 2020-11-17 19:00:35 +01:00
parent 69c2dd2bb3
commit c103457d6d
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
5 changed files with 86 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/header.pug
View File

@ -17,7 +17,7 @@
summary.segment.padding(tabindex='0' role='button') summary.segment.padding(tabindex='0' role='button')
solid-display#user-controls__profile( solid-display#user-controls__profile(
fields='first_name, account.picture' fields='first_name, account.picture'
class-first_name='text-letter-spacing-large' class-first_name='text-letter-spacing-larger'
class-account.picture='avatar small margin-right-small' class-account.picture='avatar small margin-right-small'
widget-account.picture='hubl-user-avatar' widget-account.picture='hubl-user-avatar'
bind-user bind-user

4
src/index.pug
View File

@ -19,10 +19,10 @@ html(lang="en")
//- header#header.header.is-spaced(role='banner') //- header#header.header.is-spaced(role='banner')
include header.pug include header.pug
header#header.segment.shadow header#header.segment.bg-color-white.shadow
include header.pug include header.pug
nav#main__menu.left-menu.jsLeftMenu nav#main__menu.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
include menu-left.pug include menu-left.pug
main#viewport.content.notLoggedIn main#viewport.content.notLoggedIn

66
src/menu-left.pug
View File

@ -55,45 +55,39 @@ solid-widget(name='hubl-menu-fix-url-project')
solid-router#navbar-router(default-route='dashboard') solid-router#navbar-router(default-route='dashboard')
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
solid-route.menu(name='dashboard') solid-route.menu.segment.lg-auto.padding.text-bold(name='dashboard')
div.menu-label(data-trans="menuLeft.dashboard") div.menu-icon.icon-home.segment.lg-auto.margin-right-small.float-left
div.menu-icon.icon-home div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.dashboard")
div.divider
if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
solid-route.menu(name='members') solid-route.menu.segment.lg-auto.padding.text-bold(name='members')
div.menu-label(data-trans="menuLeft.profileDirectory") div.menu-icon.icon-people.segment.lg-auto.margin-right-small.float-left
div.menu-icon.icon-people div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.profileDirectory")
div.divider
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
solid-route.menu(name='job-offers', rdf-type='hd:joboffer') solid-route.menu.segment.lg-auto.padding.text-bold(name='job-offers', rdf-type='hd:joboffer')
div.menu-label(data-trans="menuLeft.jobBoard") div.menu-icon.icon-briefcase.segment.lg-auto.margin-right-small.float-left
div.menu-icon.icon-briefcase div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.jobBoard")
div.divider
if endpoints.resources || (endpoints.get && endpoints.get.resources) if endpoints.resources || (endpoints.get && endpoints.get.resources)
solid-route.menu(name='resources') solid-route.menu.segment.lg-auto.padding.text-bold(name='resources')
div.menu-label(data-trans="menuLeft.resources") div.menu-icon.icon-docs.segment.lg-auto.margin-right-small.float-left
div.menu-icon.icon-docs div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.resources")
div.divider
if endpoints.polls || (endpoints.get && endpoints.get.polls) if endpoints.polls || (endpoints.get && endpoints.get.polls)
solid-route.menu(name='polls') solid-route.menu.segment.lg-auto.padding.text-bold(name='polls')
div.menu-label(data-trans="menuLeft.gov") div.menu-icon.icon-bubbles.segment.lg-auto.margin-right-small.float-left
div.menu-icon.icon-bubbles div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.gov")
div.divider
if endpoints.events || (endpoints.get && endpoints.get.events) if endpoints.events || (endpoints.get && endpoints.get.events)
solid-route.menu(name='events') solid-route.menu.segment.lg-auto.padding.text-bold(name='events')
div.menu-label(data-trans="menuLeft.events") div.menu-icon.icon-calendar.segment.lg-auto.margin-right-small.float-left
div.menu-icon.icon-calendar div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.events")
div.divider
if endpoints.projects || (endpoints.get && endpoints.get.projects) if endpoints.projects || (endpoints.get && endpoints.get.projects)
div.menu-wrapper div.menu-wrapper
solid-link solid-link
//- (next='admin-project-list') //- (next='admin-project-list')
div.menu div.menu.segment.lg-auto.padding.text-bold
div.menu-chevron div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.projects")
div.menu-chevron.segment.lg-auto.float-left
div.menu-icon.icon-arrow-up div.menu-icon.icon-arrow-up
//- div.menu-icon.icon-arrow-right-circle //- div.menu-icon.icon-arrow-right-circle
div.menu-label(data-trans="menuLeft.projects")
div.menu-icon.icon-folder-alt
solid-route(name='project', rdf-type='hd:project', use-id='', hidden) solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
div.sub-menu.menu-notification div.sub-menu.menu-notification
div#loader-projects.loader.loader-menu div#loader-projects.loader.loader-menu
@ -117,12 +111,12 @@ solid-router#navbar-router(default-route='dashboard')
div.menu-wrapper div.menu-wrapper
solid-link solid-link
//- (next='admin-circle-list') //- (next='admin-circle-list')
div.menu div.menu.segment.lg-auto.padding.text-bold
div.menu-chevron div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.circles")
div.menu-chevron.segment.lg-auto.float-left
div.menu-icon.icon-arrow-up div.menu-icon.icon-arrow-up
//- div.menu-icon.icon-arrow-right-circle //- div.menu-icon.icon-arrow-right-circle
div.menu-label(data-trans="menuLeft.circles")
div.menu-icon.icon-folder-alt
solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden) solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
div.sub-menu.menu-notification div.sub-menu.menu-notification
div#loader-circles.loader.loader-menu div#loader-circles.loader.loader-menu
@ -144,11 +138,11 @@ solid-router#navbar-router(default-route='dashboard')
div.divider div.divider
if endpoints.users || (endpoints.get && endpoints.get.users) if endpoints.users || (endpoints.get && endpoints.get.users)
div.menu-wrapper div.menu-wrapper
div.menu div.menu.segment.lg-auto.padding.text-bold
div.menu-chevron div.menu-icon.icon-envelope-letter.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.messages")
div.menu-chevron.segment.lg-auto.float-left
div.menu-icon.icon-arrow-up div.menu-icon.icon-arrow-up
div.menu-label(data-trans="menuLeft.messages")
div.menu-icon.icon-envelope-letter
solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden) solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
div.sub-menu.menu-notification div.sub-menu.menu-notification
div#loader-messages.loader.loader-menu div#loader-messages.loader.loader-menu

30
src/styles/base/main.scss
View File

@ -23,7 +23,7 @@
} }
.segment { .segment {
background: white; /*background: white;*/
position: relative; position: relative;
.content-vertically-centered { .content-vertically-centered {
@ -66,12 +66,18 @@
&.margin-left { &.margin-left {
margin-left: 20px; margin-left: 20px;
} }
&.margin-right-small {
margin-right: 15px;
}
&.margin-right { &.margin-right {
margin-right: 20px; margin-right: 20px;
} }
&.padding { &.padding {
padding: 14px; padding: 14px;
} }
&.padding-large {
padding: 20px;
}
} }
.avatar { .avatar {
@ -105,10 +111,22 @@
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
} }
.bg-color-heading {
background: var(--color-heading);
}
.bg-color-white {
background: white;
}
.text-bold { .text-bold {
font-weight: 600; font-weight: 600;
} }
.text-uppercase {
text-transform: uppercase;
}
.text-xsmall { .text-xsmall {
font-size: 12px; font-size: 12px;
} }
@ -141,6 +159,10 @@
color: var(--color-heading); color: var(--color-heading);
} }
.text-color-white {
color: white;
}
.text-letter-spacing-wide {} .text-letter-spacing-wide {}
.text-letter-spacing-wider {} .text-letter-spacing-wider {}
@ -148,10 +170,12 @@
.text-letter-spacing-widest {} .text-letter-spacing-widest {}
.text-letter-spacing-large { .text-letter-spacing-large {
letter-spacing: 0.38px; letter-spacing: 0.2px;
} }
.text-letter-spacing-larger {} .text-letter-spacing-larger {
letter-spacing: 0.38px;
}
.logo { .logo {

43
src/styles/base/menu-left.scss
View File

@ -1,7 +1,8 @@
#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);*/
/*transition: flex-basis 0.5s ease-in-out;*/ /*transition: flex-basis 0.5s ease-in-out;*/
width: 256px;
&.open { &.open {
transform: translateX(0); transform: translateX(0);
@ -13,6 +14,10 @@
solid-router { solid-router {
.menu-wrapper { .menu-wrapper {
.menu {
border-bottom: none;
}
.menu-icon.icon-arrow-up { .menu-icon.icon-arrow-up {
visibility: hidden; visibility: hidden;
} }
@ -26,7 +31,7 @@
} }
.menu-chevron { .menu-chevron {
transform: rotate(180deg); transform: rotateX(180deg);
} }
} }
} }
@ -38,16 +43,21 @@
.menu { .menu {
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #4F5E72;
display: flex; display: flex;
flex-direction: row-reverse; align-items: center;
font-weight: bold; /*flex-direction: row-reverse;*/
padding: 1.2rem; /*font-weight: bold;
padding: 1.2rem;*/
&[active] { &[active] {
background-color: var(--color-menu-highlight-primary); background-color: var(--color-third);
color: var(--color-heading);
border-bottom: none;
.menu-icon:before { .menu-icon:before {
background-color: var(--color-menu-icon-background-active); background-color: var(--color-heading);
color: white;
} }
.menu-notification>solid-display>div:first-child { .menu-notification>solid-display>div:first-child {
@ -56,15 +66,15 @@
} }
.menu-icon { .menu-icon {
align-items: center; /*align-items: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
font-size: 1.7rem; font-size: 1.7rem;
width: 3.2em; width: 3.2em;*/
&:before { &::before {
border-radius: 100%; border-radius: 100%;
height: 1.9em; height: 1.9em;
line-height: 1.9em; line-height: 1.9em;
@ -72,7 +82,7 @@
} }
} }
.menu-label { /*.menu-label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
@ -82,16 +92,16 @@
letter-spacing: 0.017rem; letter-spacing: 0.017rem;
text-transform: uppercase; text-transform: uppercase;
width: 8em; width: 8em;
} }*/
.menu-chevron { /*.menu-chevron {
align-items: center; align-items: center;
display: flex; display: flex;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
justify-content: center; justify-content: center;
width: 2em; width: 2em;
} }*/
>solid-display { >solid-display {
display: block; display: block;
@ -295,8 +305,7 @@
.divider { .divider {
height: 1px; height: 1px;
background-color: var(--color-grey-11); background-color: #4F5E72;
opacity: 0.2;
} }
} }
} }