From c103457d6d1e99249f47baa3a450d8a1f09ccfb0 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Tue, 17 Nov 2020 19:00:35 +0100 Subject: [PATCH] feature: left-menu: new classes --- src/header.pug | 2 +- src/index.pug | 4 +-- src/menu-left.pug | 66 ++++++++++++++++------------------ src/styles/base/main.scss | 30 ++++++++++++++-- src/styles/base/menu-left.scss | 43 +++++++++++++--------- 5 files changed, 86 insertions(+), 59 deletions(-) diff --git a/src/header.pug b/src/header.pug index d4d9e11..9ea0b6f 100644 --- a/src/header.pug +++ b/src/header.pug @@ -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 diff --git a/src/index.pug b/src/index.pug index 73520b2..5986beb 100644 --- a/src/index.pug +++ b/src/index.pug @@ -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 diff --git a/src/menu-left.pug b/src/menu-left.pug index b3a7518..cd7f18f 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -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 diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index c5a9362..d6c29ce 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -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 { diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index a952da0..06eb705 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -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; } } }