feature: header - new classes
This commit is contained in:
gaelle morin
parent
881412e638
commit
14dd36a619
|
|
@ -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"}`
|
||||
|
|
|
|||
161
src/index.pug
161
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}`
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue