From f5779918fcfd3c9d4cce3bc07f5d59d688fcaddf Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Sun, 17 Mar 2013 22:31:28 +0100
Subject: [PATCH] Add optimizations for mobile devices (WIP)

---
 com.woltlab.wcf/template/headInclude.tpl |   3 +-
 wcfsetup/install/files/js/WCF.js         |   2 +
 wcfsetup/install/files/style/button.less |  49 +++++
 wcfsetup/install/files/style/dialog.less |  33 +++
 wcfsetup/install/files/style/form.less   |  19 ++
 wcfsetup/install/files/style/layout.less | 251 +++++++++++++++++++++--
 6 files changed, 335 insertions(+), 22 deletions(-)

diff --git a/com.woltlab.wcf/template/headInclude.tpl b/com.woltlab.wcf/template/headInclude.tpl
index e3aebf0dfa..3909eff089 100644
--- a/com.woltlab.wcf/template/headInclude.tpl
+++ b/com.woltlab.wcf/template/headInclude.tpl
@@ -1,11 +1,12 @@
 <base href="{$baseHref}" />
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
+<meta name="format-detection" content="telephone=no" />
 {implode from=$__wcf->getMetaTagHandler() item=__metaTag glue="\n"}{@$__metaTag}{/implode}
 
 <script type="text/javascript">
 	//<![CDATA[
-	var SID_ARG_2ND = '{@SID_ARG_2ND_NOT_ENCODED}';
+	var SID_ARG_2ND	= '{@SID_ARG_2ND_NOT_ENCODED}';
 	var RELATIVE_WCF_DIR = '{@$__wcf->getPath()}';
 	var SECURITY_TOKEN = '{@SECURITY_TOKEN}';
 	var LANGUAGE_ID = {@$__wcf->getLanguage()->languageID};
diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index e775a6833b..dc723c962c 100755
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -4090,6 +4090,8 @@ WCF.Effect.BalloonTooltip = Class.extend({
 	 * Initializes tooltips.
 	 */
 	init: function() {
+		if (jQuery.browser.mobile) return;
+
 		if (!this._didInit) {
 			// create empty div
 			this._tooltip = $('<div id="balloonTooltip" class="balloonTooltip"><span id="balloonTooltipText"></span><span class="pointer"><span></span></span></div>').appendTo($('body')).hide();
diff --git a/wcfsetup/install/files/style/button.less b/wcfsetup/install/files/style/button.less
index ff06c39893..a5f05998fb 100644
--- a/wcfsetup/install/files/style/button.less
+++ b/wcfsetup/install/files/style/button.less
@@ -154,6 +154,55 @@ button.active:hover {
 	}
 }
 
+@media only screen and (max-device-width: 480px) {
+	.buttonGroup {
+		min-height: 21px;
+		min-width: 21px;
+		position: relative;
+		z-index: 148;
+		
+		&:before {
+			content: "\f03a";
+			font-family: FontAwesome;
+			font-size: 21px;
+			right: 0;
+			position: absolute;
+			top: 0;
+		}
+		
+		> li {
+			display: none;
+			
+			&:not(:first-child) {
+				> a {
+					border-top: 0;
+				}
+			}
+			
+			> .button {
+				border-radius: 0 !important;
+			}
+		}
+		
+		&:hover {
+			> li {
+				display: block;
+				
+				> a {
+					overflow: hidden;
+					text-overflow: ellipsis;
+					width: 124px;
+					white-space: nowrap;
+					
+					> span.invisible {
+						display: inline;
+					}
+				}
+			}
+		}
+	}
+}
+
 /* sidebar buttons */
 .sidebar {
 	button,
diff --git a/wcfsetup/install/files/style/dialog.less b/wcfsetup/install/files/style/dialog.less
index ddd1a0c789..78e0ea4b74 100644
--- a/wcfsetup/install/files/style/dialog.less
+++ b/wcfsetup/install/files/style/dialog.less
@@ -11,6 +11,19 @@
 	.boxShadow(0, 1px, rgba(0, 0, 0, .3), 23px);
 }
 
+@media only screen and (max-device-width: 480px) {
+	.dialogContainer {
+		border: 0;
+		left: 0 !important;
+		max-width: none;
+		min-width: 0;
+		top: 0 !important;
+		width: 100%;
+		
+		.borderRadius(0);
+	}
+}
+
 .dialogTitlebar {
 	background-color: @wcfTabularBoxBackgroundColor;
 	border-bottom: 1px solid rgba(0, 0, 0, .1);
@@ -56,6 +69,12 @@
 	}
 }
 
+@media only screen and (max-device-width: 480px) {
+	.dialogTitlebar {
+		.borderRadius(0);
+	}
+}
+
 .dialogContent {
 	background-color: @wcfContainerBackgroundColor;
 	color: @wcfColor;
@@ -96,6 +115,20 @@
 	}
 }
 
+@media only screen and (max-device-width: 480px) {
+	.dialogContent {
+		max-height: none !important;
+		
+		&:not(.dialogForm) {
+			.borderRadius(0);
+		}
+		
+		.formSubmit {
+			.borderRadius(0);
+		}
+	}
+}
+
 .dialogOverlay {
 	background-color: rgba(0, 0, 0, .5);
 	bottom: 0;
diff --git a/wcfsetup/install/files/style/form.less b/wcfsetup/install/files/style/form.less
index b1e44da600..f97eed23a6 100644
--- a/wcfsetup/install/files/style/form.less
+++ b/wcfsetup/install/files/style/form.less
@@ -126,6 +126,25 @@ dl:not(.plain) {
 	}
 }
 
+@media only screen and (max-device-width: 480px) {
+	dl:not(.plain) {
+		> dt {
+			float: none;
+			margin-bottom: @wcfGapTiny;
+			text-align: left;
+			width: auto !important;
+		}
+		
+		> dd {
+			margin-left: 0 !important;
+		}
+	}
+	
+	fieldset > dl:not(:first-of-type) {
+		margin-top: 14px;
+	}
+}
+
 /* sidebar */
 .sidebar {
 	dl:not(.plain) {
diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 1868562cc3..4d5948499c 100644
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -49,10 +49,10 @@
 	}
 	
 	> div {
+		position: relative;
+		
 		> ul.userPanelItems {
-			float: left;
-			
-			.clearfix();
+			/*.clearfix();*/
 			
 			> li {
 				float: left;
@@ -94,10 +94,10 @@
 		}
 	
 		> .searchBar {
-			float: right;
-			padding: 6px 0 7px;
-			position: relative;
 			background-color: @wcfUserPanelHoverBackgroundColor;
+			position: absolute;
+			right: 0;
+			top: 0;
 			
 			&:before {
 				content: "\f002";
@@ -106,7 +106,7 @@
 				font-size: 14px;
 				left: 7px;
 				position: absolute;
-				top: 10px;
+				top: 12px;
 			}
 			
 			> form {
@@ -116,6 +116,7 @@
 					background-color: transparent;
 					border-width: 0;
 					color: @wcfUserPanelColor;
+					height: 40px;
 					padding: 6px 12px 5px 26px;
 					width: 240px;
 					-webkit-appearance: textfield;
@@ -128,26 +129,73 @@
 				}
 			}
 		}
+		
+		&.layoutFluid > .searchBar {
+			right: 30px;
+		}
 	}
 }
 
 @media only screen and (max-device-width: 480px) {
-	/* hide user panel labels */
-	.userPanel > div {
-		> ul.userPanelItems > li {
-			> a > span:not(.icon) {
-				display: none;
-			}
-			
-			&#pageLanguageContainer > div > div > hgroup {
-				display: none;
-			}
+	.userPanel {
+		height: auto;
+		
+		.icon {
+			font-size: 28px;
+			height: auto;
+			width: auto;
 		}
 		
-		> .searchBar {
-			> form {
-				input[type="search"] {
-					width: auto;
+		> div {
+			> ul.userPanelItems {
+				> li {
+					> a,
+					> div:not(.dropdownMenu) {
+						height: 28px;
+						padding: 12px 11px 8px 11px;
+					}
+					
+					> .framed > img {
+						margin-top: 0;
+					}
+					
+					/* hide user panel labels */
+					> a > span:not(.icon),
+					&#pageLanguageContainer > div > div > hgroup {
+						display: none;
+					}
+				}
+			}
+		
+			> .searchBar {
+				height: 48px;
+				min-width: 40px;
+				right: 0 !important;
+				
+				&:before {
+					font-size: 28px;
+				}
+				
+				> form {
+					display: none;
+					
+					input[type="search"] {
+						height: 48px;
+						padding-left: 40px;
+						width: 100%;
+					}
+				}
+				
+				&:hover {
+					width: 100%;
+					
+					> form {
+						display: block;
+					}
+				}
+				
+				&:before {
+					top: 8px;
 				}
 			}
 		}
@@ -278,6 +326,69 @@
 	}
 }
 
+@media only screen and (max-device-width: 480px) {
+	.mainMenu {
+		min-height: 38px;
+		position: relative;
+		z-index: 150;
+		
+		> ul {
+			border: solid 1px @wcfContainerBorderColor;
+			left: @wcfGapSmall;
+			position: absolute;
+			
+			.borderRadius(5px);
+			
+			> li {
+				display: none;
+				font-size: 120% !important;
+				margin: 0 !important;
+				padding: 0 !important;
+				width: 100%;
+				
+				&.active {
+					display: block;
+					
+					> a {
+						&:before {
+							content: "\f03a";
+							font-family: FontAwesome;
+							font-size: 14px;
+							left: 10px;
+							position: absolute;
+							top: 7px;
+						}
+					}
+				}
+				
+				> a {
+					background-color: transparent !important;
+					border: 0 !important;
+					color: @wcfMainMenuColor !important;
+					font-weight: normal !important;
+					padding: 5px 5px 5px 32px !important;
+					position: relative;
+					text-align: left !important;
+				}
+			}
+			
+			&:hover {
+				> li {
+					display: block;
+					
+					&.active {
+						> a {
+							&:before {
+								content: "\f00c";
+							}
+						}	
+					}
+				}
+			}
+		}
+	}
+}
+
 /* navigation */
 .navigation {
 	padding: 0 7px;
@@ -366,6 +477,72 @@
 	border-top: 1px solid @wcfContainerBorderColor;
 }
 
+@media only screen and (max-device-width: 480px) {
+	.navigationHeader {
+		background-color: transparent;
+		border: 0;
+		min-height: 38px;
+		position: relative;
+		z-index: 149;
+		
+		> ul.navigationMenuItems {
+			background-color: @wcfMainMenuBackgroundColor;
+			border: solid 1px @wcfContainerBorderColor;
+			left: @wcfGapSmall;
+			position: absolute;
+			
+			.borderRadius(5px);
+			
+			> li {
+				display: none;
+				font-size: 120% !important;
+				margin: 0 !important;
+				width: 100%;
+				
+				&:first-child {
+					display: block;
+					
+					> a {
+						&:before {
+							content: "\f03a";
+							font-family: FontAwesome;
+							font-size: 14px;
+							left: 10px;
+							position: absolute;
+							top: 7px;
+						}
+					}
+				}
+				
+				> a {
+					background-color: transparent !important;
+					border: 0 !important;
+					color: @wcfMainMenuColor !important;
+					display: inline-block;
+					font-weight: normal !important;
+					padding: 5px 5px 5px 32px !important;
+					position: relative;
+					text-align: left !important;
+				}
+			}
+			
+			&:hover {
+				> li {
+					display: block;
+					
+					&:first-child {
+						> a {
+							&:before {
+								content: "";
+							}
+						}	
+					}
+				}
+			}
+		}
+	}
+}
+
 /* ### footer ### */
 .footer {
 	padding-bottom: @wcfGapMedium;
@@ -504,6 +681,10 @@
 			margin-right: 0 !important;
 			padding-left: @wcfGapSmall !important;
 			padding-right: @wcfGapSmall !important;
+			
+			> *:first-child {
+				margin-top: 0;
+			}
 		}
 	}
 }
@@ -549,6 +730,12 @@
 	}
 }
 
+@media only screen and (max-device-width: 480px) {
+	.boxHeadline {
+		margin-top: @wcfGapSmall;
+	}
+}
+
 .contentNavigation {
 	display: table;
 	width: 100%;
@@ -584,6 +771,12 @@
 	padding: @wcfGapMedium @wcfGapLarge @wcfGapMedium;
 }
 
+@media only screen and (max-device-width: 480px) {
+	.containerPadding {
+		padding: @wcfGapSmall;
+	}
+}
+
 .containerHeadline {
 	margin-bottom: @wcfGapSmall;
 	
@@ -891,6 +1084,12 @@
 	}
 }
 
+@media only screen and (max-device-width: 480px) {
+	.content > .breadcrumbs {
+		display: none;
+	}
+}
+
 .smallBreadcrumbs {
 	> li {
 		display: inline;
@@ -1438,6 +1637,16 @@ ul.inlineDataList {
 	}
 }
 
+@media only screen and (max-device-width: 480px) {
+	.pageNavigation {
+		> ul > li {
+			&:not(.skip):not(.active) {
+				display: none;
+			}
+		}
+	}
+}
+
 .statusDisplay .pageNavigation {
 	font-size: @wcfSmallFontSize;
 	float: left;
-- 
2.20.1