From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 3 Jun 2020 18:16:39 +0000 (+0200)
Subject: Collapsible sidebar for larger devices (screen-md-down)
X-Git-Tag: 5.3.0_Alpha_1~239^2
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=78ea816cc546a884509121de5d226d446a660c59;p=GitHub%2FWoltLab%2FWCF.git

Collapsible sidebar for larger devices (screen-md-down)

Closes #3348
---

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
index 340ec76684..a26f6a424d 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
@@ -21,12 +21,12 @@ define(
 	var _knownMessages = new List();
 	var _main = null;
 	var _messages = elByClass('message');
+	var _mobileSidebarEnabled = false;
 	var _options = {};
 	var _pageMenuMain = null;
 	var _pageMenuUser = null;
 	var _messageGroups = null;
 	var _sidebars = [];
-	var _sidebarXsEnabled = false;
 	
 	/**
 	 * @exports	WoltLabSuite/Core/Ui/Mobile
@@ -71,10 +71,10 @@ define(
 				setup: this.enableShadow.bind(this)
 			});
 			
-			UiScreen.on('screen-xs', {
-				match: this._enableSidebarXS.bind(this),
-				unmatch: this._disableSidebarXS.bind(this),
-				setup: this._setupSidebarXS.bind(this)
+			UiScreen.on('screen-md-down', {
+				match: this._enableMobileSidebar.bind(this),
+				unmatch: this._disableMobileSidebar.bind(this),
+				setup: this._setupMobileSidebar.bind(this)
 			});
 			
 			// On the large tablets (e.g. iPad Pro) the navigation is not usable, because there is not the mobile
@@ -310,22 +310,22 @@ define(
 			}
 		},
 		
-		_enableSidebarXS: function() {
-			_sidebarXsEnabled = true;
+		_enableMobileSidebar: function() {
+			_mobileSidebarEnabled = true;
 		},
 		
-		_disableSidebarXS: function() {
-			_sidebarXsEnabled = false;
+		_disableMobileSidebar: function() {
+			_mobileSidebarEnabled = false;
 			
 			_sidebars.forEach(function (sidebar) {
 				sidebar.classList.remove('open');
 			});
 		},
 		
-		_setupSidebarXS: function() {
+		_setupMobileSidebar: function() {
 			_sidebars.forEach(function (sidebar) {
 				sidebar.addEventListener('mousedown', function(event) {
-					if (_sidebarXsEnabled && event.target === sidebar) {
+					if (_mobileSidebarEnabled && event.target === sidebar) {
 						event.preventDefault();
 						
 						sidebar.classList.toggle('open');
@@ -333,7 +333,7 @@ define(
 				});
 			});
 			
-			_sidebarXsEnabled = true;
+			_mobileSidebarEnabled = true;
 		},
 		
 		_toggleMobileNavigation: function (message, quickOptions, navigation) {
diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index 2f2bd39fcb..f4c365305a 100644
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -598,7 +598,8 @@
 	padding-right: 10px;
 }
 
-@include screen-xs {
+/* collapsible sidebar for mobile devices */
+@include screen-md-down {
 	.main > .layoutBoundary {
 		display: flex;
 		flex-wrap: wrap;