Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix the mobile menu wrongly expanding the logo #33877

Merged
merged 14 commits into from
Jun 10, 2021
Merged

Fix the mobile menu wrongly expanding the logo #33877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
6d25cf6
Does anyone reads these titles?
dgrammatiko May 10, 2021
3a87b07
To many setters
dgrammatiko May 10, 2021
6c167e2
Respect value on resize
dgrammatiko May 10, 2021
b27ddc5
Kudos to whomever came up with this markup
dgrammatiko May 10, 2021
4493ac0
Hopfully i got it right
dgrammatiko May 10, 2021
37754ac
Nope it was the other way
dgrammatiko May 10, 2021
5125476
singlr line comment
dgrammatiko May 10, 2021
4a3a938
Fix the toggler icon, remove useless code
dgrammatiko May 12, 2021
acce3bd
try harder
dgrammatiko May 12, 2021
f12daae
logo
dgrammatiko May 16, 2021
28de4bb
Merge branch '4.0-dev' of github.com:joomla/joomla-cms into —handle-s…
dgrammatiko May 22, 2021
a5b1776
a
dgrammatiko May 22, 2021
b0d82e0
Fix it
dgrammatiko May 22, 2021
cdfbb5f
Handle all the sidebar-nav instances
dgrammatiko May 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions administrator/templates/atum/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,11 +155,10 @@
<?php if (!$cpanel) : ?>
<?php // Subheader ?>
<?php HTMLHelper::_('bootstrap.collapse', '.toggler-toolbar'); ?>
<button class="navbar-toggler toggler-toolbar toggler-burger collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".subhead" aria-controls="subhead" aria-expanded="false" aria-label="<?php echo Text::_('TPL_ATUM_TOOLBAR'); ?>">
<button class="navbar-toggler toggler-toolbar toggler-burger collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#subhead-container" aria-controls="subhead-container" aria-expanded="false" aria-label="<?php echo Text::_('TPL_ATUM_TOOLBAR'); ?>">
<span class="toggler-toolbar-icon"></span>
</button>
<div id="subhead" class="subhead mb-3">
<div id="container-collapse" class="container-collapse"></div>
<div id="subhead-container" class="subhead mb-3">
<div class="row">
<div class="col-md-12">
<jdoc:include type="modules" name="toolbar" style="none" />
Expand Down
18 changes: 5 additions & 13 deletions build/media_source/mod_menu/js/admin-menu.es6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,19 +50,11 @@ if (sidebar && !sidebar.getAttribute('data-hidden')) {
elem.classList.remove('child-open');
}

if (wrapper.classList.contains('closed')) {
window.dispatchEvent(new CustomEvent('joomla:menu-toggle', {
detail: 'closed',
bubbles: true,
cancelable: true,
}));
} else {
window.dispatchEvent(new CustomEvent('joomla:menu-toggle', {
detail: 'open',
bubbles: true,
cancelable: true,
}));
}
window.dispatchEvent(new CustomEvent('joomla:menu-toggle', {
detail: wrapper.classList.contains('closed') ? 'closed' : 'open',
bubbles: true,
cancelable: true,
}));
});

// Sidebar Nav
Expand Down
29 changes: 23 additions & 6 deletions build/media_source/templates/administrator/atum/js/template.es6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ const mobile = window.matchMedia('(max-width: 992px)');
const small = window.matchMedia('(max-width: 575.98px)');
const tablet = window.matchMedia('(min-width: 576px) and (max-width:991.98px)');
const menu = document.querySelector('.sidebar-menu');
const sidebarNav = document.querySelector('.sidebar-nav');
const subhead = document.querySelector('.subhead');
const sidebarNav = [].slice.call(document.querySelectorAll('.sidebar-nav'));
const subhead = document.querySelector('#subhead-container');
const wrapper = document.querySelector('.wrapper');
const sidebarWrapper = document.querySelector('.sidebar-wrapper');
const logo = document.querySelector('.logo');
Expand Down Expand Up @@ -52,6 +52,11 @@ function changeLogo(change) {
return;
}

if (small.matches) {
logo.classList.add('small');
return;
}

const state = change || getCookie();

if (state === 'closed') {
Expand Down Expand Up @@ -149,11 +154,11 @@ function setMobile() {
}

if (small.matches) {
dgrammatiko marked this conversation as resolved.
Show resolved Hide resolved
if (sidebarNav) sidebarNav.classList.add('collapse');
sidebarNav.map((el) => el.classList.add('collapse'));
if (subhead) subhead.classList.add('collapse');
if (sidebarWrapper) sidebarWrapper.classList.add('collapse');
} else {
if (sidebarNav) sidebarNav.classList.remove('collapse');
sidebarNav.map((el) => el.classList.remove('collapse'));
if (subhead) subhead.classList.remove('collapse');
if (sidebarWrapper) sidebarWrapper.classList.remove('collapse');
}
Expand All @@ -173,7 +178,7 @@ function setDesktop() {
sidebarWrapper.classList.remove('collapse');
}

if (sidebarNav) sidebarNav.classList.remove('collapse');
sidebarNav.map((el) => el.classList.remove('collapse'));
if (subhead) subhead.classList.remove('collapse');

toggleArrowIcon('top');
Expand Down Expand Up @@ -217,11 +222,23 @@ function subheadScrolling() {
headerItemsInDropdown();
reactToResize();
subheadScrolling();
if (mobile.matches) {
Copy link

@eopws eopws May 24, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not using setMobile function call inside this block?

changeLogo('closed');
if (subhead) {
subhead.classList.remove('show');
subhead.classList.add('collapse');
}
}
if (!navigator.cookieEnabled) {
Joomla.renderMessages({ error: [Joomla.Text._('JGLOBAL_WARNCOOKIES')] }, undefined, false, 6000);
}
window.addEventListener('joomla:menu-toggle', (event) => {
headerItemsInDropdown();
document.cookie = `atumSidebarState=${event.detail};`;
changeLogo(event.detail);

if (mobile.matches) {
changeLogo('closed');
} else {
changeLogo(event.detail);
}
});