From d9a5604ac29c0f97b5680e70eb6c18984e8f6a58 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 13 Jul 2016 13:54:05 +0200
Subject: [PATCH] Improved UI/UX for mobile box menus

---
 .../install/files/js/WoltLab/WCF/Ui/Mobile.js | 19 +++++++++++++++----
 wcfsetup/install/files/style/layout/box.scss  | 15 +++++++++++++++
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
index 969442696d..2aeb1e2e28 100644
--- 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 7736bee57e..869e12119c 100644
--- 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;
+				}
+			}
 		}
 	}
 	
-- 
2.20.1