From 14dd36a6193e54579d5dd71032c16e94de3f32e5 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Mon, 16 Nov 2020 18:48:42 +0100 Subject: [PATCH] feature: header - new classes --- src/header.pug | 65 +++++++++++++-- src/index.pug | 161 ++++++++++++++++++------------------ src/styles/base/header.scss | 22 +++-- src/styles/base/main.scss | 121 ++++++++++++++++++++++++++- 4 files changed, 266 insertions(+), 103 deletions(-) diff --git a/src/header.pug b/src/header.pug index 49b663d..8c0f8c4 100644 --- a/src/header.pug +++ b/src/header.pug @@ -1,14 +1,65 @@ -.header-left +.segment.lg-three-quarter.float-left + .logo + solid-link(next='dashboard') + img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`) + + span.tag.beta.reversed.color-primary(data-trans='header.beta') + +.segment.lg-quarter.float-right + .segment.lg-auto.float-left + solid-notifications.notLoggedIn( + nested-field="inbox" + bind-user + ) + + .segment.lg-auto.float-right + details#user-controls.notLoggedIn + summary(tabindex='0' role='button') + solid-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 + ) + #user-controls__panel + nav(role="user's functionalities menu") + ul + if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users)) + li + solid-link(next='profile' data-trans='header.myProfile') + li + solid-link(next='admin' data-trans='header.admin') + li + solid-link(next='about' data-trans='header.about') + button(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut') + + button.loggedIn.segment.float-right(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn') + + button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu + + sib-auth(style='display:none!important') + sib-auth-provider( + data-authority=`${authority}` + data-id=`${authorityName || "authority"}` + data-client-name=`${clientName || "Hubl"}` + ) + + + + + +//-.header-left .logo solid-link(next='dashboard') img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`) span.beta-tag(data-trans='header.beta') -solid-notifications.notLoggedIn( +//-solid-notifications.notLoggedIn( nested-field="inbox" bind-user -) +//-) //- Templates for notifications from circles and from other users include views/notifications/message-circle.pug @@ -16,7 +67,7 @@ include views/notifications/message-private.pug include templates/hubl-user-avatar.pug -details#user-controls.notLoggedIn +//-details#user-controls.notLoggedIn summary(tabindex='0' role='button') solid-display#user-controls__profile( fields='first_name, account.picture' @@ -37,11 +88,11 @@ details#user-controls.notLoggedIn solid-link(next='about' data-trans='header.about') button(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut') -button.loggedIn(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn') +//-button.loggedIn(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn') -button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu +//-button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu -sib-auth(style='display:none!important') +//-sib-auth(style='display:none!important') sib-auth-provider( data-authority=`${authority}` data-id=`${authorityName || "authority"}` diff --git a/src/index.pug b/src/index.pug index a891ad4..73520b2 100644 --- a/src/index.pug +++ b/src/index.pug @@ -16,92 +16,93 @@ html(lang="en") body - .wrapper + //- header#header.header.is-spaced(role='banner') + include header.pug - header#header.header.is-spaced(role='banner') - include header.pug + header#header.segment.shadow + include header.pug - nav#main__menu.left-menu.jsLeftMenu - include menu-left.pug + nav#main__menu.left-menu.jsLeftMenu + include menu-left.pug - main#viewport.content.notLoggedIn + main#viewport.content.notLoggedIn - if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) - #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding - include page-dashboard.pug + if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) + #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding + include page-dashboard.pug - if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) - #members(hidden, data-view="members").no-sidebar.with-padding - include page-directory.pug + if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) + #members(hidden, data-view="members").no-sidebar.with-padding + include page-directory.pug - if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) - #job-offers(hidden, data-view="job-offers").no-sidebar.with-padding - if (endpoints.post && endpoints.post.joboffers) && (endpoints.get && endpoints.get.joboffers) - hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`) - hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`) - hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`) - hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) - hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) - hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) - hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) - hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) - hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`) - include page-job-offers.pug + if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) + #job-offers(hidden, data-view="job-offers").no-sidebar.with-padding + if (endpoints.post && endpoints.post.joboffers) && (endpoints.get && endpoints.get.joboffers) + hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`) + hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`) + hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`) + hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) + hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) + hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) + hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) + hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) + hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`) + include page-job-offers.pug - if endpoints.projects || (endpoints.get && endpoints.get.projects) - #project(hidden, data-view="project").with-sidebar - if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects) - hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${endpoints.get.projects}`) - hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`) - hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`) - hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`) - hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`) - hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`) - hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`) - include page-project.pug + if endpoints.projects || (endpoints.get && endpoints.get.projects) + #project(hidden, data-view="project").with-sidebar + if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects) + hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${endpoints.get.projects}`) + hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`) + hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`) + include page-project.pug - if endpoints.circles || (endpoints.get && endpoints.get.circles) - #circle(hidden, data-view="circle").with-sidebar - if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles) - hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${endpoints.get.circles}`) - hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`) - hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}`) - hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}joinable/`) - hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`) - hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`) - hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`) - include page-circle.pug - if endpoints.users || (endpoints.get && endpoints.get.users) - #messages(hidden, data-view="messages").with-sidebar - include page-messages.pug - - if endpoints.polls || (endpoints.get && endpoints.get.polls) - #polls(hidden, data-view="polls").with-sidebar - include page-polls.pug - - if endpoints.events || (endpoints.get && endpoints.get.events) - #events(hidden, data-view="events") - include page-events.pug - - if endpoints.resources || (endpoints.get && endpoints.get.resources) - #resources(hidden, data-view="resources") - include page-resources.pug - - #admin(hidden, data-view="admin").with-sidebar - include page-admin.pug - - #about(data-view="about").no-sidebar.with-padding - include page-about.pug + if endpoints.circles || (endpoints.get && endpoints.get.circles) + #circle(hidden, data-view="circle").with-sidebar + if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles) + hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${endpoints.get.circles}`) + hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`) + hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}`) + hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}joinable/`) + hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`) + hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`) + hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`) + include page-circle.pug + if endpoints.users || (endpoints.get && endpoints.get.users) + #messages(hidden, data-view="messages").with-sidebar + include page-messages.pug - if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users)) - #profile(hidden, data-view="profile").no-sidebar - include page-profile.pug - - if analytics - each provider in analytics - if provider.type && provider.url && provider.url - solid-analytics( - type=`${provider.type}` - url=`${provider.url}` - id=`${provider.id}` - ) + if endpoints.polls || (endpoints.get && endpoints.get.polls) + #polls(hidden, data-view="polls").with-sidebar + include page-polls.pug + + if endpoints.events || (endpoints.get && endpoints.get.events) + #events(hidden, data-view="events") + include page-events.pug + + if endpoints.resources || (endpoints.get && endpoints.get.resources) + #resources(hidden, data-view="resources") + include page-resources.pug + + #admin(hidden, data-view="admin").with-sidebar + include page-admin.pug + + #about(data-view="about").no-sidebar.with-padding + include page-about.pug + + if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users)) + #profile(hidden, data-view="profile").no-sidebar + include page-profile.pug + + if analytics + each provider in analytics + if provider.type && provider.url && provider.url + solid-analytics( + type=`${provider.type}` + url=`${provider.url}` + id=`${provider.id}` + ) diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index eca9ca6..fd7326b 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -1,4 +1,11 @@ #header { + height: 72px; + z-index: 999; + /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);*/ /*mockup value*/ + padding: 0 25px; +} + +/*#header { max-height: 50px; height: 50px; display: flex; @@ -60,10 +67,10 @@ @include breakpoint(lg) { margin-left: 0; } - } + }*/ /* Fix: to remove the place taken by these elements */ - solid-widget[name='hubl-user-avatar'] { + /*solid-widget[name='hubl-user-avatar'] { display: contents; } @@ -71,17 +78,12 @@ solid-notifications-template[data-rdf-type='foaf:user'] { position: absolute; } -} +}*/ /* General styling for both notification and user's panel */ details { - margin-right: 0; position: relative; - @include breakpoint(lg) { - margin-right: 2.5rem; - } - summary { &::-moz-list-bullet { @@ -297,10 +299,6 @@ solid-notifications { summary { cursor: pointer; display: block; /* To remove the disclosure triangle on Firefox v.>=69 */ - - @include breakpoint(lg) { - padding: 18px; - } &:focus { background-color: transparent; diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index f67e73b..d2d4b7d 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -22,6 +22,119 @@ } } +.segment { + background: white; + position: relative; + + .content-vertically-centered { + position: absolute; + top: 50%; + transform: translateY(-50%); + } + &.lg-{ + &hidden { + display: none; + } + &quarter { + width: 25%; + } + &third { + width: 33.333%; + } + &half { + width: 50%; + } + &two-third { + width: 66.666%; + } + &three-quarter { + width: 75%; + } + &full { + width: 100%; + } + &auto { + width: auto; + } + } + &.float-left { + float: left; + } + &.float-right { + float: right; + } +} + +.shadow { + box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); +} + +.logo { + height: 34px; + width: 220px; + display: inline-block; + + >solid-link { + cursor: pointer; + background: none; + display: inline-block; + padding: 0; + border: none; + + >img { + max-height: 100%; + max-width: 100%; + } + } +} + +.tag { + height: 17px; + font-size: 12px; + letter-spacing: 0.24px; + line-height: 17px; + border: 1px solid var(--color-primary); + border-radius: 3px; + padding: 4px 11px; + + &.beta { + font-size: 14px; + font-weight: 600; + } + &.color-primary { + background: white; + border: 1px solid var(--color-primary); + color: var(--color-primary); + } + &.color-secondary { + background: white; + border: 1px solid var(--color-secondary); + color: var(--color-secondary); + } + &.color-third { + background: white; + border: 1px solid var(--color-third); + color: var(--color-third); + } + &.reversed { + &.color-primary { + background: var(--color-primary); + border: 1px solid var(--color-primary); + color: white; + } + &.color-secondary { + background: var(--color-secondary); + border: 1px solid var(--color-secondary); + color: white; + } + &.color-third { + background: var(--color-third); + border: 1px solid var(--color-third); + color: white; + } + } +} + /* Fix for solid-dashboard fixture */ solid-dashboard section { padding: 1rem !important; @@ -35,7 +148,7 @@ solid-dashboard section { } } -.wrapper { +/*.wrapper { display: grid; grid-template-areas: "header" @@ -47,11 +160,11 @@ solid-dashboard section { "header header" "leftmenu content"; } -} +}*/ -.header { +/*.header { grid-area: header; -} +}*/ .left-menu { grid-area: leftmenu;