From 88c8e86882214499f4edf991b7fa8686fb85c6a3 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Sun, 5 May 2013 02:05:41 +0200
Subject: [PATCH] Fixed issues in mobile version

---
 com.woltlab.wcf/template/headInclude.tpl |  1 +
 com.woltlab.wcf/template/mainMenu.tpl    |  3 +--
 wcfsetup/install/files/js/WCF.js         | 21 ++++++++++++++++
 wcfsetup/install/files/style/dialog.less |  4 ++-
 wcfsetup/install/files/style/layout.less | 31 ++++++++++++++----------
 5 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/com.woltlab.wcf/template/headInclude.tpl b/com.woltlab.wcf/template/headInclude.tpl
index 4ff6c2e2bc..584c42d2b2 100644
--- a/com.woltlab.wcf/template/headInclude.tpl
+++ b/com.woltlab.wcf/template/headInclude.tpl
@@ -109,6 +109,7 @@
 		WCF.System.PageNavigation.init('.pageNavigation');
 		WCF.Date.Picker.init();
 		WCF.System.JumpToAnchor.execute();
+		WCF.System.MobileNavigation.init();
 		
 		{event name='javascriptInit'}
 		
diff --git a/com.woltlab.wcf/template/mainMenu.tpl b/com.woltlab.wcf/template/mainMenu.tpl
index 64e611f672..86680de958 100644
--- a/com.woltlab.wcf/template/mainMenu.tpl
+++ b/com.woltlab.wcf/template/mainMenu.tpl
@@ -1,6 +1,5 @@
 {if $__wcf->getPageMenu()->getMenuItems('header')|count > 0}
-	<nav id="mainMenu" class="mainMenu">
-		<span class="invisible">{lang}wcf.page.mainMenu{/lang}</span>
+	<nav id="mainMenu" class="mainMenu jsMobileNavigation" data-button-label="{lang}wcf.page.mainMenu{/lang}">
 		<ul>{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}<li{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem} class="active"{/if}>{*
 			*}<a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a>{*
 		*}{if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0 && $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem}<ul class="invisible">{*
diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index c74923d217..42c00c876e 100755
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -5390,6 +5390,27 @@ WCF.Search.User = WCF.Search.Base.extend({
  */
 WCF.System = { };
 
+/**
+ * Enables mobile navigation.
+ */
+WCF.System.MobileNavigation = {
+	init: function() {
+		this._convertNavigation();
+		
+		WCF.DOMNodeInsertedHandler.addCallback('WCF.System.MobileNavigation', function() {
+			WCF.System.MobileNavigation._convertNavigation();
+		});
+	},
+	
+	_convertNavigation: function() {
+		$('nav.jsMobileNavigation').removeClass('jsMobileNavigation').each(function(index, navigation) {
+			var $navigation = $(navigation);
+			$('<a class="invisible" tabindex="9999999" />').click(function() {}).prependTo($navigation);
+			$('<a class="invisible" tabindex="9999999"><span class="icon icon16 icon-list" />' + ($navigation.data('buttonLabel') !== undefined ? (' ' + $navigation.data('buttonLabel')) : '') + '</a>').click(function() {}).prependTo($navigation);
+		});
+	}
+};
+
 /**
  * Fixes scroll offset on page load.
  */
diff --git a/wcfsetup/install/files/style/dialog.less b/wcfsetup/install/files/style/dialog.less
index 4e05c749c0..f83e35842a 100644
--- a/wcfsetup/install/files/style/dialog.less
+++ b/wcfsetup/install/files/style/dialog.less
@@ -17,9 +17,10 @@
 		left: 0 !important;
 		max-width: none;
 		min-width: 0;
+		position: absolute;
 		top: 0 !important;
 		width: 100%;
-		
+
 		.borderRadius(0);
 	}
 }
@@ -118,6 +119,7 @@
 @media only screen and (max-width: 800px) {
 	.dialogContent {
 		max-height: none !important;
+		max-width: none !important;
 		
 		&:not(.dialogForm) {
 			.borderRadius(0);
diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index e0bae90158..a73530b87f 100644
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -359,22 +359,27 @@
 	.mainMenu {
 		position: relative;
 		
-		&:hover > ul {
-			display: block;
-		}
-		
-		> .invisible {
+		> a:first-child {
 			.button;
 			margin-left: @wcfGapSmall;
-			padding-left: 28px;
 			
-			&:before {
-				content: "\f03a";
-				font-family: FontAwesome;
-				font-size: 14px;
-				left: 9px;
+			+ a {
+				height: 100%;
+				left: 0;
 				position: absolute;
-				top: 6px;
+				top: 0;
+				width: 100%;
+				z-index:100;
+			}
+			
+			&:focus {
+				+ a {
+					display: block;
+				}
+				
+				~ ul {
+					display: block;
+				}
 			}
 		}
 		
@@ -412,7 +417,7 @@
 
 @media only screen and (min-width: 641px) and (max-width: 800px) {
 	.mainMenu {
-		> .invisible {
+		> a:first-child {
 			margin-left: @wcfGapMedium;
 		}
 	}
-- 
2.20.1