From a5a6d29d4cffcfe13e9fe00744f437cd53b536c9 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Sun, 5 May 2013 23:04:40 +0200
Subject: [PATCH] Fixed issues in mobile version

---
 .../install/files/acp/templates/styleList.tpl | 26 ++++----
 wcfsetup/install/files/style/button.less      | 65 ++++++++++++-------
 wcfsetup/install/files/style/layout.less      | 31 ++++++---
 3 files changed, 76 insertions(+), 46 deletions(-)

diff --git a/wcfsetup/install/files/acp/templates/styleList.tpl b/wcfsetup/install/files/acp/templates/styleList.tpl
index 9c374dd93a..d37f89b1ea 100644
--- a/wcfsetup/install/files/acp/templates/styleList.tpl
+++ b/wcfsetup/install/files/acp/templates/styleList.tpl
@@ -38,18 +38,20 @@
 							<h3><a href="{link controller='StyleEdit' id=$style->styleID}{/link}">{$style->styleName}</a></h3>
 							{if $style->styleDescription}<small>{lang}{@$style->styleDescription}{/lang}</small>{/if}
 						</div>
-						<ul class="buttonList" data-style-id="{@$style->styleID}">
-							<li><a href="{link controller='StyleEdit' id=$style->styleID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a></li>
-							<li><a href="{link controller='StyleExport' id=$style->styleID}{/link}" title="{lang}wcf.acp.style.exportStyle{/lang}" class="jsTooltip"><span class="icon icon16 icon-download-alt"></span></a></li>
-							
-							{if !$style->isDefault}
-								<li><span class="icon icon16 icon-{if $style->isDisabled}off{else}circle-blank{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $style->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$style->styleID}"></span></li>
-								<li><a title="{lang}wcf.acp.style.button.setAsDefault{/lang}" class="jsSetAsDefault jsTooltip"><span class="icon icon16 icon-check"></span></a></li>
-								<li><a title="{lang}wcf.global.button.delete{/lang}" class="jsDelete jsTooltip" data-confirm-message="{lang}wcf.acp.style.delete.confirmMessage{/lang}"><span class="icon icon16 icon-remove"></span></a></li>
-							{/if}
-							
-							{event name='itemButtons'}
-						</ul>
+						<nav class="jsMobileNavigation buttonGroupNavigation">
+							<ul class="buttonList" data-style-id="{@$style->styleID}">
+								<li><a href="{link controller='StyleEdit' id=$style->styleID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a></li>
+								<li><a href="{link controller='StyleExport' id=$style->styleID}{/link}" title="{lang}wcf.acp.style.exportStyle{/lang}" class="jsTooltip"><span class="icon icon16 icon-download-alt"></span></a></li>
+								
+								{if !$style->isDefault}
+									<li><span class="icon icon16 icon-{if $style->isDisabled}off{else}circle-blank{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $style->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$style->styleID}"></span></li>
+									<li><a title="{lang}wcf.acp.style.button.setAsDefault{/lang}" class="jsSetAsDefault jsTooltip"><span class="icon icon16 icon-check"></span></a></li>
+									<li><a title="{lang}wcf.global.button.delete{/lang}" class="jsDelete jsTooltip" data-confirm-message="{lang}wcf.acp.style.delete.confirmMessage{/lang}"><span class="icon icon16 icon-remove"></span></a></li>
+								{/if}
+								
+								{event name='itemButtons'}
+							</ul>
+						</nav>
 						<dl class="plain inlineDataList">
 							<dt>{lang}wcf.acp.style.users{/lang}</dt>
 							<dd>{#$style->users}</dd>
diff --git a/wcfsetup/install/files/style/button.less b/wcfsetup/install/files/style/button.less
index 9beb31b093..807dd97bc2 100644
--- a/wcfsetup/install/files/style/button.less
+++ b/wcfsetup/install/files/style/button.less
@@ -155,40 +155,57 @@ button.active:hover {
 }
 
 @media only screen and (max-width: 800px) {
-	.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;
+	nav.buttonGroupNavigation {
+		> a:first-child {
+			display: inline-block;
+			outline: 0;
 			
-			&:not(:first-child) {
-				> a {
-					border-top: 0;
-				}
+			> span.icon {
+				font-size: 21px;
+				height: 24px;
+				width: 24px;
 			}
 			
-			> .button {
-				border-radius: 0 !important;
+			+ a {
+				height: 100%;
+				left: 0;
+				position: absolute;
+				top: 0;
+				width: 100%;
+				z-index:100;
+			}
+			
+			&:focus {
+				+ a {
+					display: block;
+				}
+				
+				~ ul {
+					display: block;
+				}
 			}
 		}
 		
-		&:hover {
+		> ul {
+			display: none;
+			opacity: 1;
+			position: absolute;
+			right: 0;
+			z-index: 350;
+			
+			&:hover {
+				display: block;
+			}
+			
 			> li {
 				display: block;
+				float: none;
+				opacity: 1 !important;
 				
 				> a {
+					.button;
+					
+					border-radius: 0 !important;
 					overflow: hidden;
 					text-overflow: ellipsis;
 					width: 124px;
diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index e8494b6a81..f9387cafa9 100644
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -362,6 +362,7 @@
 		> a:first-child {
 			.button;
 			margin-left: @wcfGapSmall;
+			outline: 0;
 			
 			+ a {
 				height: 100%;
@@ -388,6 +389,10 @@
 			font-size: 120%;
 			left: @wcfGapSmall;
 			
+			&:hover {
+				display: block;
+			}
+			
 			> li.active {
 				> ul.invisible {
 					display: block;
@@ -897,7 +902,7 @@
 			background-color: @wcfContainerHoverBackgroundColor;
 			
 			> div > div {
-				> .buttonList {
+				> .buttonGroupNavigation > .buttonList {
 					opacity: 1;
 				}
 				
@@ -910,13 +915,16 @@
 		> div > div {
 			position: relative;
 			
-			> .buttonList {
-				opacity: 0;
+			> .buttonGroupNavigation {
 				position: absolute;
 				right: 0;
 				top: 0;
 				
-				.transition(opacity, .1s);
+				> .buttonList {
+					opacity: 0;
+					
+					.transition(opacity, .1s);
+				}
 			}
 			
 			> .containerHeadline > .containerContentType {
@@ -954,10 +962,6 @@
 			.containerContentType {
 				display: none;
 			}
-			
-			> div > div > .buttonList {
-				display: none;
-			}
 		}
 		
 		&.infoBoxList {
@@ -1221,12 +1225,19 @@
 			}
 		}
 		
-		+ .boxHeadline {
-			margin-top: 0;
+		&:not(:first-child) {
+			display: none;
 		}
 	}
 }
 
+@media only screen and (min-width: 641px) and (max-width: 800px) {
+	.content > .breadcrumbs {
+		margin-left: @wcfGapMedium;
+		margin-right: @wcfGapMedium;
+	}
+}
+
 .smallBreadcrumbs {
 	> li {
 		display: inline;
-- 
2.20.1