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
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
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 =>
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"));
}
}
@ -22,6 +26,10 @@ function closeUserControls() {
function openRightMenu() {
let rightMenu = document.querySelectorAll(".jsRightMenu");
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 =>
vC.classList.toggle("sidebar-is-closed")
);
@ -72,8 +80,7 @@ document.addEventListener("DOMContentLoaded", function() {
closeLeftMenu();
}
if (
!event.target.className.includes("jsMobileSidebarOpenButton") &&
!event.target.className.includes("jsOffsiteToggle")
!event.target.closest(".jsOffsiteToggle")
) {
closeRightMenu();
}

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

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

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

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

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

@ -19,12 +19,14 @@
include partials/admin/page-admin-communities.pug
#admin-users-create(hidden, data-view="admin-users-create", no-render)
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
ul
li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle
span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
a(data-trans='admin.menuRight.fold')
li.segment.lg-full.sm-full.padding-small.text-normal.jsOffsiteToggle
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')
if (endpoints.users || (endpoints.get && endpoints.get.users))
solid-link.segment.lg-full.sm-full(next='admin-communities')
li.segment.lg-full.sm-full.padding-medium

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

@ -11,12 +11,14 @@
#circle-polls(hidden, data-view="circle-polls")
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')
ul
li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle
span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
a(data-trans='circle.menuRight.fold')
li.segment.lg-full.sm-full.padding-small.text-normal.jsOffsiteToggle
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')
solid-route.segment.lg-full.sm-full(name='circle-chat')
li.segment.lg-full.sm-full.padding-medium
span.icon.ci-chat.icon-xlarge.margin-right-medium

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

@ -7,12 +7,14 @@
#project-picture(hidden, data-view="project-picture")
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')
ul
li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle
span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
a(data-trans='project.menuRight.fold')
li.segment.lg-full.sm-full.padding-small.text-normal.jsOffsiteToggle
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')
solid-route.segment.lg-full.sm-full(name='project-chat')
li.segment.lg-full.sm-full.padding-medium
span.icon.ci-chat.icon-xlarge.margin-right-medium

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

@ -61,7 +61,7 @@ div
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.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