patch: New right menu on mobile - JS added

This commit is contained in:
gaelle morin 2021-04-13 16:11:28 +02:00 committed by Jean-Baptiste Pasquier
parent 5e34542762
commit 50f7d49810
3 changed files with 42 additions and 2 deletions

View File

@ -35,6 +35,43 @@ function openRightMenu() {
);
}
const controls = document.querySelectorAll('.jsMobileSidebarControl');
Array.from(controls).forEach(control => {
const button = control.querySelector('.jsMobileRightMenuButton');
const rightMenu = control.querySelector('.jsRightMenu');
button.addEventListener("click", () => {
if (button.classList.contains('icon-close')) {
button.classList.remove('icon-close');
button.classList.add('icon-options-vertical');
console.log(rightMenu);
rightMenu.setAttribute('hidden', '');
}
else {
button.classList.remove('icon-options-vertical');
button.classList.add('icon-close');
rightMenu.removeAttribute('hidden');
}
});
});
/*const buttons = document.querySelectorAll(".jsMobileToggleRightMenu");
Array.from(buttons).forEach(el => el.addEventListener("click", () => {
if (el.classList.contains('icon-close')) {
el.classList.remove('icon-close');
el.classList.add('icon-options-vertical');
const rightMenu = document.querySelectorAll(".jsRightMenu");
rightMenu.classList.add("block");
}
else {
el.classList.remove('icon-options-vertical');
el.classList.add('icon-close');
const rightMenu = document.querySelectorAll(".jsRightMenu");
rightMenu.classList.add("sm-hidden");
};
}));*/
document.addEventListener("DOMContentLoaded", function () {
const componentSet = new Set(window.hubl.components.map(c => c.type));

View File

@ -1,4 +1,4 @@
.with-sidebar.whitespace-normal.bg-color-white.only-on-admin(hidden)
.with-sidebar.jsMobileSidebarControl.whitespace-normal.bg-color-white.only-on-admin(hidden)
.scrollbar-content.views-container.sidebar-is-closed
for component of components
if component.route

View File

@ -1,5 +1,8 @@
div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
div.segment.full.sm-three-quarter
h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
div.segment.lg-hidden.sm-quarter.text-right
div.jsMobileRightMenuButton.icon.icon-close.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal