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

feature: right menu + styling fixes

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier 2021-01-22 14:50:03 +01:00
parent 65738f75b0
commit 9a463c87e7
8 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.pug
View File

@ -47,7 +47,7 @@ html(lang="en")
header#header.segment.sm-full.lg-full.padding-left-large.padding-right-large.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection.bg-color-white header#header.segment.sm-full.lg-full.padding-left-large.padding-right-large.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection.bg-color-white
include views/partials/header.pug include views/partials/header.pug
nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter.jsLeftMenu nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter.text-disable-selection.jsLeftMenu
include views/partials/menu-left.pug include views/partials/menu-left.pug
main#content.segment.lg-three-quarter.sm-full.text-top main#content.segment.lg-three-quarter.sm-full.text-top

11
src/scripts/navigate-event.js
View File

@ -15,6 +15,10 @@ function closeUserControls() {
Array.from(document.querySelectorAll(".views-container")).forEach(vC => Array.from(document.querySelectorAll(".views-container")).forEach(vC =>
vC.classList.toggle("sidebar-is-closed") vC.classList.toggle("sidebar-is-closed")
); );
Array.from(document.querySelectorAll(".jsOffsiteToggle")).forEach(el => {
el.querySelector('.text-right').setAttribute('hidden', '');
el.querySelector('.text-left').removeAttribute('hidden');
});
Array.from(rightMenu).forEach(el => el.removeAttribute("open")); Array.from(rightMenu).forEach(el => el.removeAttribute("open"));
} }
} }
@ -22,6 +26,10 @@ function closeUserControls() {
function openRightMenu() { function openRightMenu() {
let rightMenu = document.querySelectorAll(".jsRightMenu"); let rightMenu = document.querySelectorAll(".jsRightMenu");
Array.from(rightMenu).forEach(el => el.setAttribute("open", "")); Array.from(rightMenu).forEach(el => el.setAttribute("open", ""));
Array.from(document.querySelectorAll(".jsOffsiteToggle")).forEach(el => {
el.querySelector('.text-left').setAttribute('hidden', '');
el.querySelector('.text-right').removeAttribute('hidden');
});
Array.from(document.querySelectorAll(".views-container")).forEach(vC => Array.from(document.querySelectorAll(".views-container")).forEach(vC =>
vC.classList.toggle("sidebar-is-closed") vC.classList.toggle("sidebar-is-closed")
); );
@ -72,8 +80,7 @@ document.addEventListener("DOMContentLoaded", function() {
closeLeftMenu(); closeLeftMenu();
} }
if ( if (
!event.target.className.includes("jsMobileSidebarOpenButton") && !event.target.closest(".jsOffsiteToggle")
!event.target.className.includes("jsOffsiteToggle")
) { ) {
closeRightMenu(); closeRightMenu();
} }

3
src/styles/content/_index.scss
View File

@ -75,6 +75,9 @@ main {
color: white; color: white;
background: var(--color-heading); background: var(--color-heading);
} }
solid-link:not([active]):hover {
background: #e4e4e4;
}
} }
&.jsRightMenu:not([open]) { &.jsRightMenu:not([open]) {

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

@ -53,7 +53,7 @@ header {
margin-left: -9px; margin-left: -9px;
} }
&:hover { &:hover, &:focus {
background: white; background: white;
} }

8
src/views/page-admin.pug
View File

@ -19,11 +19,13 @@
include partials/admin/page-admin-communities.pug include partials/admin/page-admin-communities.pug
#admin-users-create(hidden, data-view="admin-users-create", no-render) #admin-users-create(hidden, data-view="admin-users-create", no-render)
include partials/admin/page-admin-users-create.pug include partials/admin/page-admin-users-create.pug
nav.jsRightMenu.sidebar.whitespace-normal(role='navigation') nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
.segment.whitespace-normal.text-color-heading.text-bold .segment.whitespace-normal.text-color-heading.text-bold
ul ul
li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle li.segment.lg-full.sm-full.padding-small.text-normal.jsOffsiteToggle
span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
span.text-right(hidden, style='float:right;')
span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall
a(data-trans='admin.menuRight.fold') a(data-trans='admin.menuRight.fold')
if (endpoints.users || (endpoints.get && endpoints.get.users)) if (endpoints.users || (endpoints.get && endpoints.get.users))
solid-link.segment.lg-full.sm-full(next='admin-communities') solid-link.segment.lg-full.sm-full(next='admin-communities')

8
src/views/page-circle.pug
View File

@ -11,11 +11,13 @@
#circle-polls(hidden, data-view="circle-polls") #circle-polls(hidden, data-view="circle-polls")
include partials/circle/page-circle-polls.pug include partials/circle/page-circle-polls.pug
nav.jsRightMenu.sidebar.whitespace-normal(role='navigation') nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='circle-chat') solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='circle-chat')
ul ul
li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle li.segment.lg-full.sm-full.padding-small.text-normal.jsOffsiteToggle
span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
span.text-right(hidden, style='float:right;')
span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall
a(data-trans='circle.menuRight.fold') a(data-trans='circle.menuRight.fold')
solid-route.segment.lg-full.sm-full(name='circle-chat') solid-route.segment.lg-full.sm-full(name='circle-chat')
li.segment.lg-full.sm-full.padding-medium li.segment.lg-full.sm-full.padding-medium

8
src/views/page-project.pug
View File

@ -7,11 +7,13 @@
#project-picture(hidden, data-view="project-picture") #project-picture(hidden, data-view="project-picture")
include partials/project/page-project-picture.pug include partials/project/page-project-picture.pug
nav.jsRightMenu.sidebar.whitespace-normal(role='navigation') nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='project-chat') solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='project-chat')
ul ul
li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle li.segment.lg-full.sm-full.padding-small.text-normal.jsOffsiteToggle
span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
span.text-right(hidden, style='float:right;')
span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall
a(data-trans='project.menuRight.fold') a(data-trans='project.menuRight.fold')
solid-route.segment.lg-full.sm-full(name='project-chat') solid-route.segment.lg-full.sm-full(name='project-chat')
li.segment.lg-full.sm-full.padding-medium li.segment.lg-full.sm-full.padding-medium

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

@ -61,7 +61,7 @@ div
li.border-bottom.border-color-grey li.border-bottom.border-color-grey
solid-link.segment.padding-small.text-hover(next='about' data-trans='header.about') solid-link.segment.padding-small.text-hover(next='about' data-trans='header.about')
li 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.segment.padding-small.text-hover.text-semibold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
button.segment.lg-hidden.icon-menu#toggleMainMenu button.segment.lg-hidden.icon-menu#toggleMainMenu