diff --git a/src/header.pug b/src/header.pug
index 49b663df8e90837503f8dbf900edf4fecf770d3a..8c0f8c48f534f54db70f3b940a2926061cc0ed7c 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 a891ad420962e5bbac4ccb0b774b986827799458..73520b219496c550bcb340d6050f0a136d3c3a2d 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.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.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
+ 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
+ #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}`
- )
+ #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 eca9ca661a15f7d7b0de00c7ef90b5fd3753d31b..fd7326b28379a7dff61ac1673835a94d64c70b51 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 f67e73b020f347aa0c9b3d93076d672efe791d4d..d2d4b7da00fe4b914ad76762678e2c97dc3d79af 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;