From 8373a42d042d91b57f26f2128195fdf1aed00c86 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Fri, 15 Jan 2021 14:00:06 +0100 Subject: [PATCH] feature: mobile header wip --- src/index.pug | 4 +-- src/styles/header/_index.scss | 14 +++++++++ src/styles/left-nav/_index.scss | 25 ++++++++++++++- src/views/partials/header.pug | 56 +++++++++++++++++++++++++++++++-- 4 files changed, 94 insertions(+), 5 deletions(-) diff --git a/src/index.pug b/src/index.pug index ef9bf8b..3b79c15 100644 --- a/src/index.pug +++ b/src/index.pug @@ -44,10 +44,10 @@ html(lang="en") //- include views/partials/notifications.pug include views/partials/widgets.pug - header#header.segment.lg-full.padding-left-large.padding-right-large.shadow-small.text-disable-selection + header#header.segment.sm-full.lg-full.padding-left-large.padding-right-large.shadow-small.text-disable-selection include views/partials/header.pug - nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter + nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter.jsLeftMenu include views/partials/menu-left.pug main#content.segment.lg-three-quarter.text-top.notLoggedIn diff --git a/src/styles/header/_index.scss b/src/styles/header/_index.scss index 1dcd6ef..6e0fc79 100644 --- a/src/styles/header/_index.scss +++ b/src/styles/header/_index.scss @@ -22,11 +22,21 @@ header { } } + .icon-menu { + font-size: 24px; + } + .tag { align-self: flex-start; padding: 4px 15px; margin-top: 16px; margin-left: 60px; + + @media (max-width: 640px) { + align-self: center; + margin-top: 0; + margin-left: 15px; + } } solid-notifications { @@ -247,6 +257,10 @@ header { } details { + .icon-arrow-down { + + } + &[open] { summary { background-color: var(--color-heading); diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index 066477f..f4078dc 100644 --- a/src/styles/left-nav/_index.scss +++ b/src/styles/left-nav/_index.scss @@ -1,4 +1,4 @@ -nav { +nav#main__menu { height: calc(100vh - 72px); .unread { @@ -78,5 +78,28 @@ nav { padding-left: 20px; width: 87%; } + + &.jsLeftMenu { + display: none; + + @media(min-width: 1024px) { + display: block; + } + } + + &.jsLeftMenu[open] { + display: block; + bottom: 0; + box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); + width: 80vw; + position: fixed; + right: 0; + top: 0; + z-index: 1000; + + @media(min-width: 1024px) { + display: none; + } + } } diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug index eaf2c83..948c4a4 100644 --- a/src/views/partials/header.pug +++ b/src/views/partials/header.pug @@ -1,8 +1,9 @@ div - solid-link(next='dashboard') + solid-link.segment.sm-hidden(next='dashboard') img.logo(src=`${clientLogo || '/images/logo.webp'}`) + button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu span.tag.reversed.text-semibold(data-trans='header.beta') @@ -22,7 +23,7 @@ div type="text" ) - details.segment.notLoggedIn + details.segment.sm-hidden.notLoggedIn summary.text-right solid-display.labelled-avatar( fields='segment1(account.picture), segment2(first_name), segment3(button)' @@ -70,3 +71,54 @@ div data-client-name=`${clientName || "Hubl"}` ) + + + + + details.segment.lg-hidden.notLoggedIn + summary.text-right + solid-display.labelled-avatar( + fields='segment1(account.picture), segment3(button)' + class-segment1='segment' + class-segment3='segment' + class-account.picture="avatar" + class-button='icon icon-arrow-down' + widget-account.picture='hubl-user-avatar' + bind-user + ) + div.panel + nav.bg-color-white.text-semibold.text-color-heading + ul + if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users)) + li.border-bottom.border-color-grey + solid-link.segment.padding-small.text-hover(next='profile' data-trans='header.myProfile') + li.segment.padding-small.border-bottom.border-color-grey + div(data-trans='header.admin') + ul.text-normal + if (endpoints.users || (endpoints.get && endpoints.get.users)) + solid-route.text-hover(name='admin-communities') + li.segment.padding-top-small + a.icon.icon-people.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.community') + if endpoints.circles || (endpoints.get && endpoints.get.circles) + solid-route.text-hover(name='admin-circles') + li.segment.padding-top-small + a.icon.icon-globe.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.circles') + if endpoints.projects || (endpoints.get && endpoints.get.projects) + solid-route.text-hover(name='admin-projects') + li.segment.padding-top-small + a.icon.icon-folder-alt.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.projects') + li.border-bottom.border-color-grey + solid-link.segment.padding-small.text-hover(next='about' data-trans='header.about') + li + button.segment.padding-small.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut') + + button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu + + sib-auth(style='display:none!important', auto-login) + sib-auth-provider( + data-authority=`${authority}` + data-id=`${authorityName || "authority"}` + data-client-name=`${clientName || "Hubl"}` + ) + +