diff --git a/src/scripts/navigate-event.js b/src/scripts/navigate-event.js index 739df7a..9fb041a 100644 --- a/src/scripts/navigate-event.js +++ b/src/scripts/navigate-event.js @@ -19,13 +19,27 @@ function closeRightMenu() { 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"); + el.classList.add('sm-hidden'); + Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => { + ac.classList.remove('icon-close'); + ac.classList.add('icon-options-vertical'); + }); + }); } } function openRightMenu() { let rightMenu = document.querySelectorAll(".jsRightMenu"); - Array.from(rightMenu).forEach(el => el.setAttribute("open", "")); + Array.from(rightMenu).forEach(el => { + el.setAttribute("open", ""); + el.classList.remove('sm-hidden'); + Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => { + ac.classList.remove('icon-options-vertical'); + ac.classList.add('icon-close'); + }); + }); Array.from(document.querySelectorAll(".jsOffsiteToggle")).forEach(el => { el.querySelector('.text-left').setAttribute('hidden', ''); el.querySelector('.text-right').removeAttribute('hidden'); @@ -35,48 +49,31 @@ function openRightMenu() { ); } -const adminControl = document.querySelector('.jsMobileSidebarAdminControl'); -const buttons = adminControl.querySelectorAll('.jsMobileRightMenuButton'); -const rightMenu = adminControl.querySelector('.jsRightMenu'); - -Array.from(buttons).forEach(button => - button.addEventListener("click", () => { - if (button.classList.contains('icon-close')) { - button.classList.remove('icon-close'); - button.classList.add('icon-options-vertical'); - rightMenu.classList.add('sm-hidden'); - } - else { - button.classList.remove('icon-options-vertical'); - button.classList.add('icon-close'); - rightMenu.classList.remove('sm-hidden'); - }; - }) -) - -const contentControls = Array.from(document.querySelectorAll('.jsMobileContentSidebarControl')); - -contentControls.forEach( - contentControl => { - const contentSidebar = contentControl.querySelector('.jsRightMenu'); - const contentButtons = contentControl.querySelectorAll('.jsMobileRightMenuButton'); - - Array.from(contentButtons).forEach(contentButton => - contentButton.addEventListener('click', () => { - if (contentButton.classList.contains('icon-close')) { - contentButton.classList.remove('icon-close'); - contentButton.classList.add('icon-options-vertical'); - contentSidebar.classList.add('sm-hidden'); - } - else { - contentButton.classList.remove('icon-options-vertical'); - contentButton.classList.add('icon-close'); - contentSidebar.classList.remove('sm-hidden'); - }; - }) - ) +function closeRightMobileMenu() { + let rightMenu = document.querySelectorAll(".jsRightMenu"); + if (Array.from(rightMenu).filter(el => el.hasAttribute("mobile-open")).length > 0) { + Array.from(rightMenu).forEach(el => { + el.removeAttribute("mobile-open"); + el.classList.add('sm-hidden'); + Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => { + ac.classList.remove('icon-close'); + ac.classList.add('icon-options-vertical'); + }); + }); } -); +} + +function openRightMobileMenu() { + let rightMenu = document.querySelectorAll(".jsRightMenu"); + Array.from(rightMenu).forEach(el => { + el.setAttribute("mobile-open", ""); + el.classList.remove('sm-hidden'); + Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => { + ac.classList.remove('icon-options-vertical'); + ac.classList.add('icon-close'); + }); + }); +} document.addEventListener("DOMContentLoaded", function () { const componentSet = new Set(window.hubl.components.map(c => c.type)); @@ -155,9 +152,11 @@ document.addEventListener("DOMContentLoaded", function () { closeLeftMenu(); } if ( - !event.target.closest(".jsOffsiteToggle") + !event.target.closest(".jsOffsiteToggle") && + !event.target.classList.contains('jsMobileRightMenuButton') ) { closeRightMenu(); + closeRightMobileMenu(); } }); @@ -168,6 +167,7 @@ document.addEventListener("DOMContentLoaded", function () { closeUserControls(); closeLeftMenu(); closeRightMenu(); + closeRightMobileMenu(); } }; @@ -195,10 +195,15 @@ document.addEventListener("DOMContentLoaded", function () { }); }); - Array.from(document.querySelectorAll(".jsMobileSidebarOpenButton")).forEach( + + Array.from(document.querySelectorAll(".jsMobileRightMenuButton")).forEach( el => { el.addEventListener("click", () => { - openRightMenu(); + if (el.closest('.jsMobileContentSidebarControl').querySelector('nav.jsRightMenu').hasAttribute("mobile-open")) { + closeRightMobileMenu(); + } else { + openRightMobileMenu(); + } }); } ); diff --git a/src/styles/content/_index.scss b/src/styles/content/_index.scss index 8ca009f..782105b 100644 --- a/src/styles/content/_index.scss +++ b/src/styles/content/_index.scss @@ -108,6 +108,10 @@ main { right: 0; } } + + .jsMobileRightMenuButton { + float: right; + } } /* Add scrollbar to the left menu and to the content */ diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug index f7adb47..6e715bf 100644 --- a/src/views/page-admin.pug +++ b/src/views/page-admin.pug @@ -1,4 +1,4 @@ -.with-sidebar.jsMobileSidebarAdminControl.whitespace-normal.bg-color-white.only-on-admin(hidden) +.with-sidebar.jsMobileContentSidebarControl.whitespace-normal.bg-color-white.only-on-admin(hidden) .scrollbar-content.views-container.sidebar-is-closed for component of components if component.route diff --git a/src/views/partials/admin/page-admin-chat-create.pug b/src/views/partials/admin/page-admin-chat-create.pug index b59d8a1..a2a70bb 100644 --- a/src/views/partials/admin/page-admin-chat-create.pug +++ b/src/views/partials/admin/page-admin-chat-create.pug @@ -13,12 +13,6 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac div div - div#loader-users-create.loader.loader-top - div - div - div - div - div.segment.margin-bottom-medium div.segment solid-display.text-color-heading.text-semibold.text-xlarge.text-letter-spacing-large( @@ -29,6 +23,12 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac loader-id='loader-users-title' ) + div#loader-users-create.loader.loader-top + div + div + div + div + solid-form.form#selected-community( bind-resources nested-field='members'