autonomic-cooperative
/
hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature: header - last styling + alignment with flexbox

This commit is contained in:
gaelle morin 2020-12-16 15:01:05 +01:00
parent 4e7c234a0c
commit 8b5fc2543d
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
4 changed files with 157 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/dependencies.pug
View File

@ -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

2
src/index.pug
View File

@ -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

153
src/styles/header/_index.scss
View File

@ -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;
}
}
}
}

104
src/views/partials/header.pug
View File

@ -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"}`
)