From b925ad8f386810ce6891d6feb5be81a57a2e3ff2 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Fri, 13 Sep 2013 22:00:34 +0200
Subject: [PATCH] Style optimizations

---
 .../templates/accountManagement.tpl           |  4 +-
 com.woltlab.wcf/templates/emailActivation.tpl |  2 +-
 com.woltlab.wcf/templates/following.tpl       |  2 +-
 com.woltlab.wcf/templates/ignoredUsers.tpl    |  2 +-
 com.woltlab.wcf/templates/login.tpl           |  4 +-
 com.woltlab.wcf/templates/mainMenu.tpl        | 22 ++++++----
 com.woltlab.wcf/templates/membersList.tpl     |  2 +-
 .../templates/notificationList.tpl            |  2 +-
 com.woltlab.wcf/templates/recaptcha.tpl       |  2 +-
 .../templates/registerActivation.tpl          |  2 +-
 .../templates/userInformationButtons.tpl      |  2 +-
 .../install/files/acp/templates/styleList.tpl |  2 +-
 wcfsetup/install/files/style/button.less      | 42 ++++++++++++++-----
 wcfsetup/install/files/style/form.less        |  9 ++++
 wcfsetup/install/files/style/label.less       | 10 ++++-
 wcfsetup/install/files/style/layout.less      | 28 ++++++-------
 16 files changed, 89 insertions(+), 48 deletions(-)

diff --git a/com.woltlab.wcf/templates/accountManagement.tpl b/com.woltlab.wcf/templates/accountManagement.tpl
index ebab5310ac..8056baf774 100644
--- a/com.woltlab.wcf/templates/accountManagement.tpl
+++ b/com.woltlab.wcf/templates/accountManagement.tpl
@@ -69,7 +69,7 @@
 				<dl>
 					<dt></dt>
 					<dd>
-						<ul class="buttonList">
+						<ul class="buttonList smallButtons">
 							<li><a class="button small" href="{link controller='LostPassword'}{/link}"><span>{lang}wcf.user.lostPassword{/lang}</span></a></li>
 						</ul>
 					</dd>
@@ -180,7 +180,7 @@
 					<dl>
 						<dt></dt>
 						<dd>
-							<ul class="buttonList">
+							<ul class="buttonList smallButtons">
 								<li><a class="button small" href="{link controller='EmailActivation'}{/link}"><span>{lang}wcf.user.emailActivation{/lang}</span></a></li>
 							</ul>
 						</dd>
diff --git a/com.woltlab.wcf/templates/emailActivation.tpl b/com.woltlab.wcf/templates/emailActivation.tpl
index e94027f2f6..e0383c1df8 100644
--- a/com.woltlab.wcf/templates/emailActivation.tpl
+++ b/com.woltlab.wcf/templates/emailActivation.tpl
@@ -66,7 +66,7 @@
 			<dl>
 				<dt></dt>
 				<dd>
-					<ul class="buttonList">
+					<ul class="buttonList smallButtons">
 						<li><a class="button small" href="{link controller='EmailNewActivationCode'}{/link}"><span>{lang}wcf.user.newActivationCode{/lang}</span></a></li>
 						{event name='buttons'}
 					</ul>
diff --git a/com.woltlab.wcf/templates/following.tpl b/com.woltlab.wcf/templates/following.tpl
index 1ef1764226..47212431a4 100644
--- a/com.woltlab.wcf/templates/following.tpl
+++ b/com.woltlab.wcf/templates/following.tpl
@@ -51,7 +51,7 @@
 							{include file='userInformationHeadline'}
 							
 							<nav class="jsMobileNavigation buttonGroupNavigation">
-								<ul class="buttonList jsOnly">
+								<ul class="buttonList iconList jsOnly">
 									<li><span class="icon icon16 icon-remove pointer jsTooltip jsDeleteButton" title="{lang}wcf.user.button.unfollow{/lang}" data-object-id="{@$user->followID}"></span></li>
 									{event name='userButtons'}
 								</ul>
diff --git a/com.woltlab.wcf/templates/ignoredUsers.tpl b/com.woltlab.wcf/templates/ignoredUsers.tpl
index e8d186978d..ffd82cb389 100644
--- a/com.woltlab.wcf/templates/ignoredUsers.tpl
+++ b/com.woltlab.wcf/templates/ignoredUsers.tpl
@@ -51,7 +51,7 @@
 							{include file='userInformationHeadline'}
 							
 							<nav class="jsMobileNavigation buttonGroupNavigation">
-								<ul class="buttonList jsOnly">
+								<ul class="buttonList iconList jsOnly">
 									<li><span class="icon icon16 icon-remove pointer jsTooltip jsDeleteButton" title="{lang}wcf.user.button.unignore{/lang}" data-object-id="{@$user->ignoreID}"></span></li>
 									{event name='userButtons'}
 								</ul>
diff --git a/com.woltlab.wcf/templates/login.tpl b/com.woltlab.wcf/templates/login.tpl
index fa7729221c..eb51d0154a 100644
--- a/com.woltlab.wcf/templates/login.tpl
+++ b/com.woltlab.wcf/templates/login.tpl
@@ -99,7 +99,7 @@
 			<dl>
 				<dt></dt>
 				<dd>
-					<ul class="buttonList">
+					<ul class="buttonList smallButtons">
 						<li><a class="button small" href="{link controller='LostPassword'}{/link}"><span>{lang}wcf.user.lostPassword{/lang}</span></a></li>
 						{if !REGISTER_DISABLED && REGISTER_ACTIVATION_METHOD == 1}<li><a class="button small" href="{link controller='RegisterActivation'}{/link}"><span>{lang}wcf.user.registerActivation{/lang}</span></a></li>{/if}
 						{event name='buttons'}
@@ -115,7 +115,7 @@
 				<dl>
 					<dt></dt>
 					<dd>
-						<ul class="buttonList">
+						<ul class="buttonList smallButtons">
 							{content}
 								{if GITHUB_PUBLIC_KEY !== '' && GITHUB_PRIVATE_KEY !== ''}
 									<li id="githubAuth" class="3rdPartyAuth">
diff --git a/com.woltlab.wcf/templates/mainMenu.tpl b/com.woltlab.wcf/templates/mainMenu.tpl
index 86680de958..820d103656 100644
--- a/com.woltlab.wcf/templates/mainMenu.tpl
+++ b/com.woltlab.wcf/templates/mainMenu.tpl
@@ -1,11 +1,19 @@
 {if $__wcf->getPageMenu()->getMenuItems('header')|count > 0}
 	<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">{*
-				*}{foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}{*
-					*}<li{if $__wcf->getPageMenu()->getActiveMenuItem(1) == $subMenuItem->menuItem} class="active"{/if}><a href="{$subMenuItem->getProcessor()->getLink()}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>{*
-				*}{/foreach}{*
-		*}{event name='items'}</ul>{/if}</li>{/foreach}</ul>
+		<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">
+							{foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}
+								<li{if $__wcf->getPageMenu()->getActiveMenuItem(1) == $subMenuItem->menuItem} class="active"{/if}><a href="{$subMenuItem->getProcessor()->getLink()}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>
+							{/foreach}
+							{event name='items'}
+						</ul>
+					{/if}
+				</li>
+			{/foreach}
+		</ul>
 	</nav>
 {/if}
diff --git a/com.woltlab.wcf/templates/membersList.tpl b/com.woltlab.wcf/templates/membersList.tpl
index 7cf5537776..ceed61997d 100644
--- a/com.woltlab.wcf/templates/membersList.tpl
+++ b/com.woltlab.wcf/templates/membersList.tpl
@@ -58,7 +58,7 @@
 	<fieldset>
 		<legend>{lang}wcf.user.members.sort.letters{/lang}</legend>
 				
-		<ul class="buttonList letters">
+		<ul class="buttonList smallButtons letters">
 			{foreach from=$letters item=__letter}
 				<li><a href="{if $searchID}{link controller='MembersList' id=$searchID}sortField={$sortField}&sortOrder={$sortOrder}&letter={$__letter|rawurlencode}{/link}{else}{link controller='MembersList'}sortField={$sortField}&sortOrder={$sortOrder}&letter={$__letter|rawurlencode}{/link}{/if}" class="button small{if $letter == $__letter} active{/if}">{$__letter}</a></li>
 			{/foreach}
diff --git a/com.woltlab.wcf/templates/notificationList.tpl b/com.woltlab.wcf/templates/notificationList.tpl
index 65426425a3..ba147cfd13 100644
--- a/com.woltlab.wcf/templates/notificationList.tpl
+++ b/com.woltlab.wcf/templates/notificationList.tpl
@@ -72,7 +72,7 @@
 							<p>{@$notification[event]->getMessage()}</p>
 							
 							<nav class="jsMobileNavigation buttonGroupNavigation">
-								<ul class="buttonList jsOnly">
+								<ul class="buttonList iconList jsOnly">
 									<li><a class="jsMarkAsConfirmed jsTooltip" title="{lang}wcf.user.notification.markAsConfirmed{/lang}"><span class="icon icon16 icon-remove"></span></a></li>
 								</ul>
 							</nav>
diff --git a/com.woltlab.wcf/templates/recaptcha.tpl b/com.woltlab.wcf/templates/recaptcha.tpl
index 10474f46bc..22ef413416 100644
--- a/com.woltlab.wcf/templates/recaptcha.tpl
+++ b/com.woltlab.wcf/templates/recaptcha.tpl
@@ -28,7 +28,7 @@
 		{event name='fields'}
 		
 		<dd class="jsOnly">
-			<ul class="buttonList">
+			<ul class="buttonList smallButtons">
 				<li><a href="javascript:Recaptcha.reload()" class="button small"><span class="icon icon16 icon-repeat"></span> <span>{lang}wcf.recaptcha.reload{/lang}</span></a></li>
 				<li class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')" class="button small"><span class="icon icon16 icon-volume-up"></span> <span>{lang}wcf.recaptcha.audio{/lang}</span></a></li>
 				<li class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')" class="button small"><span class="icon icon16 icon-eye-open"></span> <span>{lang}wcf.recaptcha.image{/lang}</span></a></li>
diff --git a/com.woltlab.wcf/templates/registerActivation.tpl b/com.woltlab.wcf/templates/registerActivation.tpl
index d041940fa9..e6e62ba98c 100644
--- a/com.woltlab.wcf/templates/registerActivation.tpl
+++ b/com.woltlab.wcf/templates/registerActivation.tpl
@@ -67,7 +67,7 @@
 			<dl>
 				<dt></dt>
 				<dd>
-					<ul class="buttonList">
+					<ul class="buttonList smallButtons">
 						<li><a class="button small" href="{link controller='RegisterNewActivationCode'}{/link}"><span>{lang}wcf.user.newActivationCode{/lang}</span></a></li>
 						{event name='buttons'}
 					</ul>
diff --git a/com.woltlab.wcf/templates/userInformationButtons.tpl b/com.woltlab.wcf/templates/userInformationButtons.tpl
index 59ef99f620..6f72153d9a 100644
--- a/com.woltlab.wcf/templates/userInformationButtons.tpl
+++ b/com.woltlab.wcf/templates/userInformationButtons.tpl
@@ -1,6 +1,6 @@
 {hascontent}
 	<nav class="jsMobileNavigation buttonGroupNavigation">
-		<ul class="buttonList">
+		<ul class="buttonList iconList">
 			{content}
 				{if $user->homepage && $user->homepage != 'http://'}
 					<li><a class="jsTooltip" href="{$user->homepage}" title="{lang}wcf.user.option.homepage{/lang}"{if EXTERNAL_LINK_REL_NOFOLLOW} rel="nofollow"{/if}{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}><span class="icon icon16 icon-home"></span> <span class="invisible">{lang}wcf.user.option.homepage{/lang}</span></a></li>
diff --git a/wcfsetup/install/files/acp/templates/styleList.tpl b/wcfsetup/install/files/acp/templates/styleList.tpl
index 14ab433b21..0d2e5225bb 100644
--- a/wcfsetup/install/files/acp/templates/styleList.tpl
+++ b/wcfsetup/install/files/acp/templates/styleList.tpl
@@ -51,7 +51,7 @@
 							<dd>{if $style->authorURL}<a href="{@$__wcf->getPath()}acp/dereferrer.php?url={$style->authorURL}">{$style->authorName}</a>{else}{$style->authorName}{/if}</dd>
 						</dl>
 						<nav class="jsMobileNavigation buttonGroupNavigation">
-							<ul class="buttonList" data-style-id="{@$style->styleID}">
+							<ul class="buttonList iconList" 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>
 								
diff --git a/wcfsetup/install/files/style/button.less b/wcfsetup/install/files/style/button.less
index 0526def12c..1094dacb82 100644
--- a/wcfsetup/install/files/style/button.less
+++ b/wcfsetup/install/files/style/button.less
@@ -9,7 +9,7 @@ input[type='button'],
 	border-width: 1px;
 	cursor: pointer;
 	display: inline-block;
-	margin: 0 2px;
+	margin: 0 4px;
 	padding: 5px 13px;
 	position: relative;
 }
@@ -115,15 +115,44 @@ button.active:hover {
 	}
 }
 
+/* small buttons */
+button.small,
+.button.small {
+	border-radius: @wcfSmallButtonBorderRadius;
+	font-size: @wcfSmallFontSize;
+	min-height: 13px;
+	padding: 5px 11px;
+	margin: 0 2px;
+}
+
 /* button list */
 .buttonList {
+	font-size: 0;
+	
 	> li {
 		display: inline-block;
+		font-size: 1rem;
 		
-		> .button {
+		&:not(:last-child) {
+			margin-right: 8px;
+		}
+		
+		.button {
 			margin: 0;
 		}
 	}
+	
+	&.smallButtons {
+		> li:not(:last-child) {
+			margin-right: 4px;
+		}
+	}
+	
+	&.iconList {
+		> li:not(:last-child) {
+			margin-right: 2px;
+		}
+	}
 }
 
 /* button group */
@@ -240,15 +269,6 @@ button.active:hover {
 	}
 }
 
-/* small buttons */
-button.small,
-.button.small {
-	border-radius: @wcfSmallButtonBorderRadius;
-	font-size: @wcfSmallFontSize;
-	min-height: 13px;
-	padding: 5px 11px;
-}
-
 /* button icons */
 .button > .icon {
 	margin: -1px -5px;
diff --git a/wcfsetup/install/files/style/form.less b/wcfsetup/install/files/style/form.less
index ae81f63f74..30dd2f294c 100644
--- a/wcfsetup/install/files/style/form.less
+++ b/wcfsetup/install/files/style/form.less
@@ -180,8 +180,17 @@ dl:not(.plain) {
 
 /* submit buttons */
 .formSubmit {
+	font-size: 0;
 	margin-top: @wcfGapMedium;
 	text-align: center;
+	
+	button,
+	input[type='reset'],
+	input[type='submit'],
+	input[type='button'],
+	.button {
+		font-size: 1rem;
+	}
 }
 
 
diff --git a/wcfsetup/install/files/style/label.less b/wcfsetup/install/files/style/label.less
index bfc79ff470..6311b0db88 100644
--- a/wcfsetup/install/files/style/label.less
+++ b/wcfsetup/install/files/style/label.less
@@ -1,7 +1,15 @@
 /* #### Labels #### */
 /* label list */
+.labelList {
+	font-size: 0;
+}
+
 .labelList, .labelList > li {
-	display: inline-block; 
+	display: inline-block;
+}
+
+.labelList > li:not(:last-child) {
+	margin-right: 4px;
 }
 
 /* ACP label list */
diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index cb095a711e..03446cba24 100644
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -322,6 +322,8 @@
 /* main menu */
 @media screen and (min-width: 801px), print {
 	.mainMenu {
+		font-size: 0;
+		
 		> ul {
 			background-color: @wcfMainMenuBackgroundColor;
 			display: inline-block;
@@ -452,6 +454,7 @@
 	
 	> ul {
 		display: inline-block;
+		font-size: 0;
 		
 		&.navigationItems, &.navigationIcons {
 			float: right;
@@ -467,7 +470,7 @@
 				
 				> a {
 					display: inline-block;
-					padding: 3px;
+					padding: 4px 3px 3px;
 				}
 			}
 		}
@@ -484,11 +487,11 @@
 		
 		&.navigationItems, &.navigationMenuItems {
 			> li {
-				margin: 4px 7px 1px;
+				font-size: 1rem;
+				margin: 4px 7px 2px;
 				
 				> a {
 					color: @wcfLinkColor;
-					padding: 2px 0;
 					
 					&:hover {
 						color: @wcfLinkHoverColor;
@@ -845,21 +848,14 @@
 		margin-top: @wcfGapMedium;
 	}
 	
-	nav ul {
-		text-align: left;
+	> nav.pageNavigation > ul {
+		float: left;
 	}
 	
-	nav > ul {
-		float: left;
-		
-		&:not(.pageNavigation) {
-			float: right;
-			text-align: right;
-		}
-		
-		li {
-			display: inline;
-		}
+	> nav:not(.pageNavigation) > ul {
+		margin-right: 2px;
+		float: right;
+		.buttonList;
 	}
 }
 
-- 
2.20.1