From ba1ce5078500481611de21108834ac6f7cb64ddb Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 14 Dec 2020 16:21:02 +0100 Subject: [PATCH] file: header.pug --- package-lock.json | 14 ++-- package.json | 2 +- src/index.pug | 128 +++++++++++++++++----------------- src/styles/header/_index.scss | 6 +- src/views/partials/header.pug | 97 +++++++++++++------------- 5 files changed, 121 insertions(+), 126 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6556470..c2357b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { - "@startinblox/hubl-styling-framework": "^1.0.3", + "@startinblox/hubl-styling-framework": "^1.0.4", "fs-extra": "^9.0.1", "normalize.css": "^8.0.1", "parcel-bundler": "^1.12.4", @@ -1442,9 +1442,9 @@ } }, "node_modules/@startinblox/hubl-styling-framework": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.3.tgz", - "integrity": "sha512-AJnCktH3fSLl6sWwA/Txtc7v458XTwEpyXHLmf0DRIS03K9FtBJIZzeQ9xhB8lINLIymU+DYqlL2/bdgJx/Cog==" + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.4.tgz", + "integrity": "sha512-mb8sEikSXrCyivgxt1JBc9mnihubXifZXEcViYhw9BdCJkia/3jB9JtpT/Wv6EHgZZDOYbvloWvGs4ankvztRA==" }, "node_modules/@types/q": { "version": "1.5.4", @@ -10603,9 +10603,9 @@ } }, "@startinblox/hubl-styling-framework": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.3.tgz", - "integrity": "sha512-AJnCktH3fSLl6sWwA/Txtc7v458XTwEpyXHLmf0DRIS03K9FtBJIZzeQ9xhB8lINLIymU+DYqlL2/bdgJx/Cog==" + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.4.tgz", + "integrity": "sha512-mb8sEikSXrCyivgxt1JBc9mnihubXifZXEcViYhw9BdCJkia/3jB9JtpT/Wv6EHgZZDOYbvloWvGs4ankvztRA==" }, "@types/q": { "version": "1.5.4", diff --git a/package.json b/package.json index 20119c3..355a515 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ ] }, "dependencies": { - "@startinblox/hubl-styling-framework": "^1.0.3", + "@startinblox/hubl-styling-framework": "^1.0.4", "fs-extra": "^9.0.1", "normalize.css": "^8.0.1", "parcel-bundler": "^1.12.4", diff --git a/src/index.pug b/src/index.pug index b86f259..9d90ea5 100644 --- a/src/index.pug +++ b/src/index.pug @@ -41,88 +41,88 @@ html(lang="en") body if endpoints.get && endpoints.post - include views/partials/notifications.pug + //- include views/partials/notifications.pug include views/partials/widgets.pug header#header.segment.padding-left-large.padding-right-large.shadow-small include views/partials/header.pug - nav#main__menu.segment.bg-color-heading.lg-quarter.float-left - include views/partials/menu-left.pug + //- nav#main__menu.segment.bg-color-heading.lg-quarter.float-left + //- include views/partials/menu-left.pug - main#content.segment.lg-three-quarter.float-left.notLoggedIn + //- main#content.segment.lg-three-quarter.float-left.notLoggedIn - if endpoints.get.dashboards - #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding - include views/page-dashboard.pug + //- if endpoints.get.dashboards + //- #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding + //- include views/page-dashboard.pug - if publicDirectory && endpoints.get.users - #members(hidden, data-view="members", no-render).no-sidebar.with-padding - include views/page-directory.pug + //- if publicDirectory && endpoints.get.users + //- #members(hidden, data-view="members", no-render).no-sidebar.with-padding + //- include views/page-directory.pug - if endpoints.get.joboffers - #job-offers(hidden, data-view="job-offers", no-render).no-sidebar.with-padding - 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 views/page-job-offers.pug + //- if endpoints.get.joboffers + //- #job-offers(hidden, data-view="job-offers", no-render).no-sidebar.with-padding + //- 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 views/page-job-offers.pug - if endpoints.get.projects - #project(hidden, data-view="project", no-render).segment.lg-full.with-sidebar - hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.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 views/page-project.pug + //- if endpoints.get.projects + //- #project(hidden, data-view="project", no-render).segment.lg-full.with-sidebar + //- hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.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 views/page-project.pug - if endpoints.get.circles - #circle(hidden, data-view="circle").segment.lg-full.with-sidebar - hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.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 views/page-circle.pug + //- if endpoints.get.circles + //- #circle(hidden, data-view="circle").segment.lg-full.with-sidebar + //- hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.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 views/page-circle.pug - if endpoints.get.users - #messages(hidden, data-view="messages", no-render).with-sidebar - hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.contacts") - include views/page-messages.pug + //- if endpoints.get.users + //- #messages(hidden, data-view="messages", no-render).with-sidebar + //- hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.contacts") + //- include views/page-messages.pug - if endpoints.get.polls - #polls(hidden, data-view="polls", no-render).with-sidebar - include views/page-polls.pug + //- if endpoints.get.polls + //- #polls(hidden, data-view="polls", no-render).with-sidebar + //- include views/page-polls.pug - if endpoints.get.events - #events(hidden, data-view="events", no-render) - include views/page-events.pug + //- if endpoints.get.events + //- #events(hidden, data-view="events", no-render) + //- include views/page-events.pug - if endpoints.get.resources - #resources(hidden, data-view="resources", no-render) - include views/page-resources.pug + //- if endpoints.get.resources + //- #resources(hidden, data-view="resources", no-render) + //- include views/page-resources.pug - #admin(hidden, data-view="admin").segment.lg-full.with-sidebar - include views/page-admin.pug + //- #admin(hidden, data-view="admin").segment.lg-full.with-sidebar + //- include views/page-admin.pug - #about(data-view="about").no-sidebar.with-padding - include views/page-about.pug + //- #about(data-view="about").no-sidebar.with-padding + //- include views/page-about.pug - if endpoints.get.skills && endpoints.post.uploads && endpoints.post.users - #profile(hidden, data-view="profile", no-render).no-sidebar - include views/page-profile.pug + //- if endpoints.get.skills && endpoints.post.uploads && endpoints.post.users + //- #profile(hidden, data-view="profile", no-render).no-sidebar + //- include views/page-profile.pug if analytics each provider in analytics diff --git a/src/styles/header/_index.scss b/src/styles/header/_index.scss index d8aba0b..cea8e22 100644 --- a/src/styles/header/_index.scss +++ b/src/styles/header/_index.scss @@ -3,10 +3,8 @@ header { position: fixed; z-index: 999; - .logo { - img { - max-width: 200px; - } + img.logo { + max-width: 200px; } /* Remove the disclosure triangle */ diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug index b14334a..93243d1 100644 --- a/src/views/partials/header.pug +++ b/src/views/partials/header.pug @@ -1,57 +1,54 @@ -.segment.lg-three-quarter.float-left.bg-color-heading - .logo.segment.lg-auto.float-left - solid-link(next='dashboard') - img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '52px'}`) - +.segment.lg-quarter + 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.float-left.bg-color-third - .segment.bg-color-primary - solid-notifications.notLoggedIn( - nested-field="inbox" - bind-user - ) +.segment.lg-quarter + solid-notifications.notLoggedIn( + nested-field="inbox" + bind-user + ) - .segment.lg-auto - details#user-controls.notLoggedIn - summary.segment.padding(tabindex='0' role='button') - solid-display#user-controls__profile.user-thumb( - fields='account.picture, content(name-and-icon(first_name, button))' - class-account.picture='user-thumb-avatar user-thumb-avatar__size' - class-content='user-thumb-content' - class-name-and-icon='user-thumb-content__name-and-icon' - class-first_name='name' - class-button='icon icon-arrow-down' - widget-account.picture='hubl-user-avatar' - bind-user - ) - #user-controls__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') +.segment.lg-quarter + details#user-controls.notLoggedIn + summary.segment.padding(tabindex='0' role='button') + solid-display#user-controls__profile.user-thumb( + fields='account.picture, content(name-and-icon(first_name, button))' + class-account.picture='user-thumb-avatar user-thumb-avatar__size' + class-content='user-thumb-content' + class-name-and-icon='user-thumb-content__name-and-icon' + class-first_name='name' + class-button='icon icon-arrow-down' + widget-account.picture='hubl-user-avatar' + bind-user + ) + #user-controls__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='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.loggedIn.segment.float-right(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn') + 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