From 9d83093165f7287c8d46532c8f19bb44da2be591 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Wed, 3 Jun 2020 17:36:01 +0200 Subject: [PATCH] update: left-menu and header : ellipsis and alignment --- src/header.pug | 8 ++++++++ src/styles/base/header.scss | 20 +++++++++++++++----- src/styles/base/menu-left.scss | 2 +- 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/header.pug b/src/header.pug index 507ea68..a9f89ea 100644 --- a/src/header.pug +++ b/src/header.pug @@ -21,6 +21,14 @@ details#user-controls.notLoggedIn #user-controls__panel nav(role="user's functionalities menu") ul + li + sib-display#user-controls__profile( + fields='first_name, account.picture' + class-first_name='flex' + class-account.picture='avatar' + widget-account.picture='hubl-user-avatar' + bind-user + ) if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users)) li sib-link(next='profile') Mon profil diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index c2f706f..c793d44 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -1,6 +1,6 @@ #header { - max-height: 51px; - height: 51px; + max-height: 50px; + height: 50px; display: flex; align-items: center; background-color: var(--color-header-background); @@ -76,7 +76,11 @@ sib-notifications { .sib-notifications__button { @include icon('bell'); - font-size: 3rem; + font-size: 2.5rem; + + @include breakpoint(lg) { + font-size: 3rem; + } &::before { margin-left: 0; @@ -87,9 +91,14 @@ sib-notifications { } .sib-notifications__counter { - left: 2.1rem; + left: 2rem; position: absolute; - top: -3px; + top: 1px; + + @include breakpoint(lg) { + left: 2.1rem; + top: -3px; + } } } @@ -234,6 +243,7 @@ sib-notifications { } .mobile-menu-icon { + display: none; @include breakpoint(sm) { diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index b2c4bbc..aed0a7c 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -116,7 +116,7 @@ .project-name { display: block; - width: 100%; + width: calc(80vw - 50px); @include breakpoint(lg) { width: 150px;