Improved UI/UX for mobile box menus

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
index 969442696d1a33d00431da59f9fca8a6a9815803..2aeb1e2e2846c796c09e4239524105cb77122c7b 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
@@ -138,13 +138,24 @@ define(
                                _pageMenuMain = new UiPageMenuMain();
                                _pageMenuUser = new UiPageMenuUser();
                        }
+                       
+                       elBySelAll('.boxMenu', null, function(boxMenu) {
+                               boxMenu.addEventListener(WCF_CLICK_EVENT, function(event) {
+                                       event.stopPropagation();
+                                       
+                                       if (event.target === boxMenu) {
+                                               event.preventDefault();
+                                               
+                                               boxMenu.classList.add('open');
+                                       }
+                               });
+                       });
                },
                
                _closeAllMenus: function() {
-                       var openMenus = elBySelAll('.jsMobileButtonGroupNavigation > ul.open');
-                       for (var i = 0, length = openMenus.length; i < length; i++) {
-                               openMenus[i].classList.remove('open');
-                       }
+                       elBySelAll('.jsMobileButtonGroupNavigation > ul.open, .boxMenu.open', null, function (menu) {
+                               menu.classList.remove('open');
+                       });
                }
        };
 });

diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index 7736bee57e2fd0063fdbeda80add0d5636f4095f..869e12119ca798b18118c0cd5905111289b13473 100644 (file)
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -402,6 +402,21 @@
                        .boxMenuDepth2 .boxMenuLink {
                                padding-left: 60px;
                        }
+                       
+                       @include screen-md-down {
+                               > .active {
+                                       pointer-events: none;
+                                       
+                                       > a::after {
+                                               content: $fa-var-caret-down;
+                                               font-family: FontAwesome;
+                                       }
+                               }
+                               
+                               &:not(.open) > :not(.active) {
+                                       display: none;
+                               }
+                       }
                }
        }