feat(mobile): collapsible advanced section in global menu

This commit is contained in:
Elian Doran 2025-02-08 09:55:38 +02:00
parent ab7fc8871a
commit 914a731094
No known key found for this signature in database
3 changed files with 12 additions and 17 deletions

View File

@ -88,16 +88,6 @@ const TPL = `
font-size: 120%;
margin-right: 6px;
}
body.mobile .global-menu .dropdown-submenu .dropdown-menu {
display: block;
font-size: 90%;
position: relative;
left: 0;
top: 5px;
--dropdown-shadow-opacity: 0;
--submenu-opening-delay: 0;
}
</style>
<button type="button" data-bs-toggle="dropdown" aria-haspopup="true"
@ -344,6 +334,15 @@ export default class GlobalMenuWidget extends BasicWidget {
this.dropdown.toggle();
});
if (utils.isMobile()) {
this.$widget.on("click", ".dropdown-submenu .dropdown-toggle", (e) => {
const $submenu = $(e.target).closest(".dropdown-item");
$submenu.toggleClass("submenu-open");
$submenu.find("ul.dropdown-menu").toggleClass("show");
e.stopPropagation();
return;
});
}
this.$widget.on("click", ".dropdown-submenu", (e) => {
if ($(e.target).children(".dropdown-menu").length === 1 || $(e.target).hasClass("dropdown-toggle")) {
e.stopPropagation();

View File

@ -357,8 +357,8 @@ body.desktop .dropdown-menu {
visibility: hidden;
}
.dropdown-menu:not(#context-menu-container) .dropdown-item,
#context-menu-container .dropdown-item > span {
body.desktop .dropdown-menu:not(#context-menu-container) .dropdown-item,
body.desktop #context-menu-container .dropdown-item > span {
display: flex;
align-items: center;
}
@ -1302,7 +1302,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
background-color: var(--left-pane-background-color);
}
body.mobile #launcher-pane .dropdown-menu.show {
body.mobile #launcher-pane .dropdown.global-menu > .dropdown-menu.show {
position: fixed !important;
bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size)) !important;
top: unset !important;

View File

@ -1020,10 +1020,6 @@ body.mobile .dropdown-item:not(:last-of-type) {
margin-bottom: 0.5em;
}
body.mobile #launcher-pane .dropdown-submenu > .dropdown-toggle {
display: none;
}
body.mobile .dropdown-submenu:hover {
background: transparent !important;
}