From 5ab3cf021a46fa8564c4fbd2afc36780f940f643 Mon Sep 17 00:00:00 2001 From: Aline Keller Date: Thu, 3 Aug 2023 16:22:16 +0200 Subject: [PATCH] User navigation (#668) * Create 'nav user' component * Add login link variant * Add nav user to the header and lab homepage template --- .../components/atoms/dropdown/dropdown.scss | 25 ++++ .../components/atoms/nav-lang/nav-lang.scss | 6 +- .../nav-toggle-mobile/nav-toggle-mobile.scss | 10 +- .../atoms/nav-user/nav-user-login.twig | 6 + .../components/atoms/nav-user/nav-user.scss | 133 ++++++++++++++++++ .../components/atoms/nav-user/nav-user.twig | 16 +++ assets/components/atoms/nav-user/nav-user.yml | 10 ++ assets/components/entrypoint.scss | 1 + .../organisms/header/header-light.twig | 13 +- .../components/organisms/header/header.scss | 4 +- .../components/organisms/header/header.twig | 4 + .../association-homepage.twig | 2 +- .../pages/lab-homepage/lab-homepage.twig | 4 + 13 files changed, 224 insertions(+), 10 deletions(-) create mode 100644 assets/components/atoms/nav-user/nav-user-login.twig create mode 100644 assets/components/atoms/nav-user/nav-user.scss create mode 100644 assets/components/atoms/nav-user/nav-user.twig create mode 100644 assets/components/atoms/nav-user/nav-user.yml diff --git a/assets/components/atoms/dropdown/dropdown.scss b/assets/components/atoms/dropdown/dropdown.scss index 0815964be..14789e1c3 100644 --- a/assets/components/atoms/dropdown/dropdown.scss +++ b/assets/components/atoms/dropdown/dropdown.scss @@ -7,4 +7,29 @@ background: $primary; color: $white !important; } + + .icon { + margin-right: 0.25rem; + vertical-align: middle; + } + + .icon + * { + vertical-align: middle; + } +} + +li.dropdown-item:before { + content: none; } + +.dropdown { + .dropdown-toggle:after { + transition: all 0.3s ease-in-out; + } + + &.show { + .dropdown-toggle:after { + transform: rotate(180deg); + } + } +} \ No newline at end of file diff --git a/assets/components/atoms/nav-lang/nav-lang.scss b/assets/components/atoms/nav-lang/nav-lang.scss index 4586a59d0..f6acc86f4 100644 --- a/assets/components/atoms/nav-lang/nav-lang.scss +++ b/assets/components/atoms/nav-lang/nav-lang.scss @@ -220,12 +220,12 @@ .dropdown-toggle, .dropdown-item { width: auto; - height: 2.125rem; - padding: ($spacer * 0.4) ($spacer * 1.5) ($spacer * 0.4) ($spacer * 0.5); + height: 2.5rem; + padding: ($spacer * 0.5) ($spacer * 1.5) ($spacer * 0.5) ($spacer * 0.625); } .icon { - transform: translateY($spacer * 0.1); + display: none; } } } diff --git a/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.scss b/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.scss index 63f27dba9..ea13029be 100644 --- a/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.scss +++ b/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.scss @@ -5,12 +5,16 @@ flex-flow: row nowrap; align-items: baseline; margin: 0; - padding: (.8 * $spacer) (.9 * $spacer); + padding: (.8125 * $spacer) (.875 * $spacer); font-size: 1 * $font-size-base; font-weight: bold !important; - + @include media-breakpoint-up(sm) { - padding: (.625 * $spacer) (.9 * $spacer); + padding: (.5 * $spacer) (.9375 * $spacer); + } + + @include media-breakpoint-up(md) { + padding: (.625 * $spacer) (.9375 * $spacer); } .label { diff --git a/assets/components/atoms/nav-user/nav-user-login.twig b/assets/components/atoms/nav-user/nav-user-login.twig new file mode 100644 index 000000000..546eb824b --- /dev/null +++ b/assets/components/atoms/nav-user/nav-user-login.twig @@ -0,0 +1,6 @@ +
+ +
\ No newline at end of file diff --git a/assets/components/atoms/nav-user/nav-user.scss b/assets/components/atoms/nav-user/nav-user.scss new file mode 100644 index 000000000..d40223554 --- /dev/null +++ b/assets/components/atoms/nav-user/nav-user.scss @@ -0,0 +1,133 @@ +.user-dropdown .btn { + display: flex; + align-items: center; + padding: $btn-padding-y-sm $btn-padding-x-sm; + border: 0; + + .user-avatar { + --avatar-size: 2.5rem; + flex-basis: var(--avatar-size); + width: var(--avatar-size); + + @include media-breakpoint-up(sm) { + --avatar-size: 2.625rem; + } + + @include media-breakpoint-up(md) { + --avatar-size: 2.875rem; + } + } + + p { + margin: 0 0.5rem 0 1rem; + } +} + +.header .nav-user { + margin-left: auto; + + + & + .nav-lang { + margin-left: 0 !important; + } +} + +.nav-user.user-login { + position: relative; + padding-left: 1.5rem; + + .icon { + position: absolute; + top: 4px; + left: 0; + margin-right: 0.25rem; + } +} + + +@include media-breakpoint-down(lg) { + .header .nav-user { + margin-left: 1rem; + margin-right: 1rem; + } +} + +@include media-breakpoint-down(sm) { + + .header .nav-user-login { + padding: 0; + + .user-login-link { + padding: 0.5em; + } + + .label { + @include sr-only; + } + .icon { + position: static; + width: 1.25rem; + height: 1.25rem; + margin: 0; + } + } + + .header .nav-user { + margin-left: 0.5rem; + margin-right: 0.5rem; + + & + .nav-lang-short > ul { + padding-left: 0 !important; + } + + .btn { + padding: $btn-padding-y-sm; + } + + &:not(.show) { + .btn { + border-radius: 50%; + + &:after { + content: none; + } + } + .user-name { + @include sr-only; + } + } + + &.show { + position: fixed; + top: 0.625rem; + right: 0.75rem; + left: 0.75rem; + //width: calc(100vw - 1.8rem); + margin: 0; + background: white; + z-index: 1199; + + .btn { + width: 100%; + padding-left: $btn-padding-y; + padding-right: $btn-padding-y; + border: 2px solid $gray-600; + border-bottom: 0; + border-radius: 2px 2px 0 0; + + &:after { + margin-left: auto; + } + } + + .dropdown-menu { + top: -2px !important; + left: 0 !important; + width: 100%; + border: 2px solid $gray-600; + border-top: 0; + border-radius: 0 0 2px 2px; + } + } + } +} \ No newline at end of file diff --git a/assets/components/atoms/nav-user/nav-user.twig b/assets/components/atoms/nav-user/nav-user.twig new file mode 100644 index 000000000..ff6080ace --- /dev/null +++ b/assets/components/atoms/nav-user/nav-user.twig @@ -0,0 +1,16 @@ +
+ + +
\ No newline at end of file diff --git a/assets/components/atoms/nav-user/nav-user.yml b/assets/components/atoms/nav-user/nav-user.yml new file mode 100644 index 000000000..dda969b15 --- /dev/null +++ b/assets/components/atoms/nav-user/nav-user.yml @@ -0,0 +1,10 @@ +title: Nav user +name: nav-user +notes: | + * If included in the header, the user dropdown and login link should be placed between the search form and language selector. + * If you choose to place it elsewhere, you may need to adjust the Boostratp margin classes on the `.nav-user` element. + * An example of user menu integration can be found on the [Laboratory Homepage](#/pages/lab-homepage) template page. +variants: + - name: login + title: Login link + notes: \ No newline at end of file diff --git a/assets/components/entrypoint.scss b/assets/components/entrypoint.scss index 2489e4ae6..252c5a566 100644 --- a/assets/components/entrypoint.scss +++ b/assets/components/entrypoint.scss @@ -45,6 +45,7 @@ @import 'atoms/figure/figure'; @import 'atoms/loader/loader'; @import 'atoms/favicon/favicon'; +@import 'atoms/nav-user/nav-user'; // molecules: @import 'molecules/search/search'; diff --git a/assets/components/organisms/header/header-light.twig b/assets/components/organisms/header/header-light.twig index 05462bc97..1c184334e 100644 --- a/assets/components/organisms/header/header-light.twig +++ b/assets/components/organisms/header/header-light.twig @@ -1,5 +1,8 @@ {% if language is not defined %}{% set language = 'fr' %}{% endif %} +{% if long_nav_lang is not defined %}{% set long_nav_lang = false %}{% endif %} +{% if nav_user is not defined %}{% set nav_user = false %}{% endif %} {% set site_title = site_title|default('sub site name') %} +