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

feature: left-menu: new classes

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')
solid-display#user-controls__profile(
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'
widget-account.picture='hubl-user-avatar'
bind-user

4
src/index.pug
View File

@ -19,10 +19,10 @@ html(lang="en")
//- header#header.header.is-spaced(role='banner')
include header.pug
header#header.segment.shadow
header#header.segment.bg-color-white.shadow
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
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')
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
solid-route.menu(name='dashboard')
div.menu-label(data-trans="menuLeft.dashboard")
div.menu-icon.icon-home
div.divider
solid-route.menu.segment.lg-auto.padding.text-bold(name='dashboard')
div.menu-icon.icon-home.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.dashboard")
if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
solid-route.menu(name='members')
div.menu-label(data-trans="menuLeft.profileDirectory")
div.menu-icon.icon-people
div.divider
solid-route.menu.segment.lg-auto.padding.text-bold(name='members')
div.menu-icon.icon-people.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.profileDirectory")
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
solid-route.menu(name='job-offers', rdf-type='hd:joboffer')
div.menu-label(data-trans="menuLeft.jobBoard")
div.menu-icon.icon-briefcase
div.divider
solid-route.menu.segment.lg-auto.padding.text-bold(name='job-offers', rdf-type='hd:joboffer')
div.menu-icon.icon-briefcase.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.jobBoard")
if endpoints.resources || (endpoints.get && endpoints.get.resources)
solid-route.menu(name='resources')
div.menu-label(data-trans="menuLeft.resources")
div.menu-icon.icon-docs
div.divider
solid-route.menu.segment.lg-auto.padding.text-bold(name='resources')
div.menu-icon.icon-docs.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.resources")
if endpoints.polls || (endpoints.get && endpoints.get.polls)
solid-route.menu(name='polls')
div.menu-label(data-trans="menuLeft.gov")
div.menu-icon.icon-bubbles
div.divider
solid-route.menu.segment.lg-auto.padding.text-bold(name='polls')
div.menu-icon.icon-bubbles.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.gov")
if endpoints.events || (endpoints.get && endpoints.get.events)
solid-route.menu(name='events')
div.menu-label(data-trans="menuLeft.events")
div.menu-icon.icon-calendar
div.divider
solid-route.menu.segment.lg-auto.padding.text-bold(name='events')
div.menu-icon.icon-calendar.segment.lg-auto.margin-right-small.float-left
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.events")
if endpoints.projects || (endpoints.get && endpoints.get.projects)
div.menu-wrapper
solid-link
//- (next='admin-project-list')
div.menu
div.menu-chevron
div.menu.segment.lg-auto.padding.text-bold
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-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)
div.sub-menu.menu-notification
div#loader-projects.loader.loader-menu
@ -117,12 +111,12 @@ solid-router#navbar-router(default-route='dashboard')
div.menu-wrapper
solid-link
//- (next='admin-circle-list')
div.menu
div.menu-chevron
div.menu.segment.lg-auto.padding.text-bold
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-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)
div.sub-menu.menu-notification
div#loader-circles.loader.loader-menu
@ -144,11 +138,11 @@ solid-router#navbar-router(default-route='dashboard')
div.divider
if endpoints.users || (endpoints.get && endpoints.get.users)
div.menu-wrapper
div.menu
div.menu-chevron
div.menu.segment.lg-auto.padding.text-bold
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-label(data-trans="menuLeft.messages")
div.menu-icon.icon-envelope-letter
solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
div.sub-menu.menu-notification
div#loader-messages.loader.loader-menu

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

@ -23,7 +23,7 @@
}
.segment {
background: white;
/*background: white;*/
position: relative;
.content-vertically-centered {
@ -66,12 +66,18 @@
&.margin-left {
margin-left: 20px;
}
&.margin-right-small {
margin-right: 15px;
}
&.margin-right {
margin-right: 20px;
}
&.padding {
padding: 14px;
}
&.padding-large {
padding: 20px;
}
}
.avatar {
@ -105,10 +111,22 @@
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 {
font-weight: 600;
}
.text-uppercase {
text-transform: uppercase;
}
.text-xsmall {
font-size: 12px;
}
@ -141,6 +159,10 @@
color: var(--color-heading);
}
.text-color-white {
color: white;
}
.text-letter-spacing-wide {}
.text-letter-spacing-wider {}
@ -148,10 +170,12 @@
.text-letter-spacing-widest {}
.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 {

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

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