diff --git a/src/dependencies.pug b/src/dependencies.pug index 62481a0..6f1c183 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -26,7 +26,7 @@ if endpoints.get //- script(type="module" src="/lib/solid-job-board/dist/index.js" defer) if endpoints.get.uploads && endpoints.get.skills && endpoints.get.users - script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@1.3" defer) + //-script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@1.3" defer) //- script(type="module" src="/lib/solid-directory/dist/index.js" defer) if endpoints.get.dashboards diff --git a/src/index.pug b/src/index.pug index 983461e..0732c95 100644 --- a/src/index.pug +++ b/src/index.pug @@ -44,7 +44,7 @@ html(lang="en") //- include views/partials/notifications.pug include views/partials/widgets.pug - header#header.segment.padding-left-large.padding-right-large.shadow-small.text-disable-selection + header#header.segment.lg-full.padding-left-large.padding-right-large.shadow-small.text-disable-selection include views/partials/header.pug //- nav#main__menu.segment.bg-color-heading.lg-quarter.float-left diff --git a/src/styles/header/_index.scss b/src/styles/header/_index.scss index 2c48210..4d35f9c 100644 --- a/src/styles/header/_index.scss +++ b/src/styles/header/_index.scss @@ -3,78 +3,72 @@ header { position: fixed; z-index: 999; - .v-aligned::before { - content: ""; - display: inline-block; - vertical-align: middle; - height: 100%; - } + solid-link { + align-self: center; - img.logo { - max-width: 200px; - } - - /* Remove the disclosure triangle */ - details { - &[open] { - summary { - background-color: var(--color-heading); - color: #fff; - .text-color-heading { - color: #fff; - } - } - } - summary { - display: block; - cursor: pointer; - padding-right: 15px; - padding-left: 15px; - &::marker { - display: none; - } + img.logo { + max-width: 200px; + max-height: 34px; + vertical-align: middle; } } - /* End */ + + .tag { + align-self: flex-start; + padding: 4px 15px; + margin-top: 16px; + margin-left: 60px; + } + + >div { + display: flex; + } + + div.test { + display: flex; + margin-left: auto; + } solid-notifications { color: var(--color-heading); + align-self: center; @media(min-width: 640px) { - padding: 0; + margin-right: 23px; } .solid-notifications__container { position: relative; - .solid-notifications__button { - font-size: 2.5rem; + &[open] summary { + background-color: white; + color: var(--color-heading); + } - @media(min-width: 1024px) { - font-size: 3rem; - } + .solid-notifications__button { + font-size: 24px; &::before { margin-left: 0; } + &:hover { + background: white; + } + img { display: none; } .solid-notifications__counter { - left: 2rem; + left: 21px; position: absolute; top: 1px; - @media(min-width: 1024px) { - left: 2.1rem; - top: -3px; - } - span { background-color: var(--color-primary); color: white; + font-size: 11px; } } } @@ -91,8 +85,8 @@ header { display: block; position: absolute; left: auto; - right: -2.1em; - top: 5em; + right: -2.2em; + top: 4em; transform: initial; width: 0; z-index: 4; @@ -129,7 +123,7 @@ header { position: absolute; left: auto; right: -2.3em; - top: 3.95em; + top: 2.95em; width: 347px; } @@ -168,7 +162,7 @@ header { } .solid-notification { - padding: 1.2rem 0 1.5rem; + padding: 16px 0 5px; &[data-read] { opacity: 0.5; @@ -180,8 +174,8 @@ header { display: flex; height: 35px; justify-content: center; - margin-left: 1.6rem; - margin-right: 1.4rem; + margin-left: 16px; + margin-right: 14px; overflow: hidden; position: relative; vertical-align: middle; @@ -206,7 +200,7 @@ header { .solid-notification__title { color: var(--color-heading); - font-size: 1.3rem; + font-size: 13px; font-weight: 600; .solid-notification__title__side { @@ -225,8 +219,8 @@ header { .solid-notification__summary { color: #636363; - font-size: 1.2rem; - line-height: 1.7rem; + font-size: 12px; + line-height: 17px; margin-top: 4px; @media(min-width: 640px) { @@ -251,4 +245,61 @@ header { } } } + + details { + &[open] { + summary { + background-color: var(--color-heading); + color: #fff; + .text-color-heading { + color: #fff; + } + } + } + summary { + display: block; /* To remove the disclosure triangle on Firefox v.>=69 */ + cursor: pointer; + padding-right: 15px; + padding-left: 15px; + height: 72px; + + /* To remove the disclosure triangle on Chrome (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget) */ + &::marker, + &::-webkit-details-marker { + display: none; + } + /* End */ + >.labelled-avatar { + padding-top: 11px; + } + } + } + + .panel { + height: 0; + position: absolute; + right: 0; + z-index: 1; + /* Quick fix for mobile version */ + width: 100%; + top: 72px; + + >nav { + box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16); + height: auto; + width: 100%; + + solid-route, + solid-link, + button { + display: block; + } + + li, + button { + width: 100%; + text-align: left; + } + } + } } diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug index 026043c..27a820a 100644 --- a/src/views/partials/header.pug +++ b/src/views/partials/header.pug @@ -1,61 +1,63 @@ -.segment.lg-quarter + +div + solid-link(next='dashboard') img.logo(src=`${clientLogo || '/images/logo.png'}`) -.segment.lg-quarter - span.tag.reversed.color-primary.text-semibold(data-trans='header.beta') -.segment.lg-quarter - solid-notifications.notLoggedIn( - nested-field="inbox" - bind-user - ) + span.tag.reversed.text-semibold(data-trans='header.beta') -details.segment.notLoggedIn - summary.text-right(style='height:72px;padding-top:11px;') - solid-display.labelled-avatar( - fields='segment1(account.picture), segment2(first_name), segment3(button)' - class-segment1='segment' - class-segment2='segment margin-left-small' - class-segment3='segment margin-left-xxsmall' - class-account.picture="avatar" - class-first_name="text-small text-semibold text-color-heading" - class-button='icon icon-arrow-down' - widget-account.picture='hubl-user-avatar' + div.test + solid-notifications.segment.notLoggedIn( + nested-field="inbox" bind-user ) - div - nav.bg-color-white.text-semibold.text-color-heading(style="position:absolute") - 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 + details.segment.notLoggedIn + summary.text-right + solid-display.labelled-avatar( + fields='segment1(account.picture), segment2(first_name), segment3(button)' + class-segment1='segment' + class-segment2='segment margin-left-small' + class-segment3='segment margin-left-xxsmall' + class-account.picture="avatar" + class-first_name="text-semibold text-color-heading" + 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') - sib-auth(style='display:none!important', auto-login) - sib-auth-provider( - data-authority=`${authority}` - data-id=`${authorityName || "authority"}` - data-client-name=`${clientName || "Hubl"}` - ) + 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"}` + )