From f5ba6d2cf1b4dac12d1476007c3098e4ff71b958 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 13 Jul 2016 17:15:56 +0200
Subject: [PATCH] Fixed mobile navigation button/dropdown

---
 .../install/files/js/WoltLab/WCF/Ui/Mobile.js | 30 +++---
 .../files/style/layout/containerList.scss     | 96 +++++++++++++------
 2 files changed, 85 insertions(+), 41 deletions(-)

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
index 2aeb1e2e28..5863867684 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
@@ -108,26 +108,28 @@ define(
 				if (navigation.classList.contains('jsMobileButtonGroupNavigation')) continue;
 				else navigation.classList.add('jsMobileButtonGroupNavigation');
 				
+				navigation.parentNode.classList.add('hasMobileNavigation');
+				
 				var button = elCreate('a');
-				button.classList.add('dropdownLabel');
+				button.className = 'dropdownLabel';
 				
 				var span = elCreate('span');
-				span.className = 'icon icon24 fa-list';
+				span.className = 'icon icon24 fa-ellipsis-v';
 				button.appendChild(span);
 				
-				(function(button) {
-					button.addEventListener(WCF_CLICK_EVENT, function(ev) {
-						var next = button.nextElementSibling;
-						if (next !== null) {
-							next.classList.toggle('open');
-							
-							ev.stopPropagation();
-							return false;
-						}
+				var list = elBySel('.buttonList', navigation);
+				list.addEventListener(WCF_CLICK_EVENT, function(event) {
+					event.stopPropagation();
+				});
+				
+				(function(navigation, button) {
+					button.addEventListener(WCF_CLICK_EVENT, function(event) {
+						event.preventDefault();
+						event.stopPropagation();
 						
-						return true;
+						navigation.classList.toggle('open');
 					});
-				})(button);
+				})(navigation, button);
 				
 				navigation.insertBefore(button, navigation.firstChild);
 			}
@@ -153,7 +155,7 @@ define(
 		},
 		
 		_closeAllMenus: function() {
-			elBySelAll('.jsMobileButtonGroupNavigation > ul.open, .boxMenu.open', null, function (menu) {
+			elBySelAll('.jsMobileButtonGroupNavigation.open, .boxMenu.open', null, function (menu) {
 				menu.classList.remove('open');
 			});
 		}
diff --git a/wcfsetup/install/files/style/layout/containerList.scss b/wcfsetup/install/files/style/layout/containerList.scss
index cf343a2be3..afbbc8a815 100644
--- a/wcfsetup/install/files/style/layout/containerList.scss
+++ b/wcfsetup/install/files/style/layout/containerList.scss
@@ -45,48 +45,90 @@
 		}
 	}
 	
-	.buttonGroupNavigation {
-		opacity: 0;
-		position: absolute;
-		right: 20px;
-		top: 18px;
-		transition: opacity .12s;
+	@include screen-md-down {
+		.hasMobileNavigation > .containerHeadline > h3 {
+			padding-right: 30px;
+		}
 		
-		> ul {
-			background-color: $wcfContentBackground;
-			border: 1px solid rgba(0, 0, 0, .15);
-			border-radius: 6px;
+		.buttonGroupNavigation {
+			position: absolute;
+			right: 0;
+			top: 14px;
 			
-			> li {
-				margin-right: 0;
+			&.open {
+				left: 0;
 				
-				&:not(:last-child) {
-					border-right: 1px solid rgba(0, 0, 0, .15);
+				> .buttonList {
+					display: block;
+					visibility: visible;
 				}
+			}
+			
+			> .dropdownLabel {
+				left: calc(100% - 24px);
+				position: relative;
+			}
+			
+			> .buttonList {
+				@extend .dropdownMenu;
 				
-				> a {
-					display: inline-block;
-					padding: 3px 5px;
-					
-					> .icon {
-						color: rgba(0, 0, 0, .5);
+				position: static !important;
+				top: 0;
+				
+				> li {
+					.invisible {
+						display: inline;
+						padding-left: 5px;
 					}
 				}
+			}
+		}
+	}
+	
+	@include screen-lg {
+		.buttonGroupNavigation {
+			opacity: 0;
+			position: absolute;
+			right: 20px;
+			top: 18px;
+			transition: opacity .12s;
+			
+			> ul {
+				background-color: $wcfContentBackground;
+				border: 1px solid rgba(0, 0, 0, .15);
+				border-radius: 6px;
 				
-				&.active,
-				&:hover {
+				> li {
+					margin-right: 0;
+					
+					&:not(:last-child) {
+						border-right: 1px solid rgba(0, 0, 0, .15);
+					}
+					
 					> a {
+						display: inline-block;
+						padding: 3px 5px;
+						
 						> .icon {
-							color: $wcfContentText;
+							color: rgba(0, 0, 0, .5);
+						}
+					}
+					
+					&.active,
+					&:hover {
+						> a {
+							> .icon {
+								color: $wcfContentText;
+							}
 						}
 					}
 				}
 			}
 		}
-	}
-	
-	&:hover .buttonGroupNavigation {
-		opacity: 1;
+		
+		&:hover .buttonGroupNavigation {
+			opacity: 1;
+		}
 	}
 }
 
-- 
2.20.1