From: Luzifr <szekely@woltlab.com>
Date: Thu, 21 Jul 2011 13:11:43 +0000 (+0200)
Subject: More refinements to the ACP style
X-Git-Tag: 2.0.0_Beta_1~1964^2~5
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=c2e565c6d8b7abac8fcf7670ec00990e00acffaa;p=GitHub%2FWoltLab%2FWCF.git

More refinements to the ACP style

- added some more dummy icons
- following the sketch with some more det
ails
- changing some HTML elements
- added some more comments
---

diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index e8c2e79383..88224518e8 100644
--- a/wcfsetup/install/files/acp/js/WCF.ACP.js
+++ b/wcfsetup/install/files/acp/js/WCF.ACP.js
@@ -24,7 +24,7 @@ WCF.ACP.Menu.prototype = {
 	 * @param	array		activeMenuItems
 	 */
 	init: function(activeMenuItems) {
-		this._headerNavigation = $('nav#mainMenu');
+		this._headerNavigation = $('menu#mainMenu');
 		this._sidebarNavigation = $('nav#sidebarMenu');
 		
 		this._prepareElements(activeMenuItems);
diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index 2ee39895c9..8abdb1cb54 100644
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -7,6 +7,10 @@
 
 /* -- -- -- -- -- Miscellaneous -- -- -- -- -- */
 
+* {
+	text-overflow: ellipsis;
+}
+
 body {
 	font-family: 'Trebuchet MS', Arial, sans-serif;
 	font-size: .8em;
@@ -64,46 +68,47 @@ header div#logo a {
 	text-align: right;
 }
 
-/* -- -- -- -- -- Tabs -- -- -- -- --  */
+/* -- -- -- -- -- Main Menu -- -- -- -- --  */
 
-nav#mainMenu {
-	margin: 0 10px -7px;
+menu.mainMenu {
+	margin: 0 7px -7px;
 	background-color: rgba(0, 0, 0, .5);
-	border-radius: 7px 7px 0 0;
+	border-radius: 5px 5px 0 0;
 	display: inline-block;
 }
 
-nav#mainMenu:after {
+menu.mainMenu:after {
 	content: "";
 	display: block;
 	clear: both;
 }
 
-nav#mainMenu li {
-	font-size: 110%;
+menu.mainMenu li {
+	font-size: 105%;
 	font-weight: normal;
 	color: #ccc;
-	
+	text-shadow: 0 -1px 0 #000;
 	cursor: pointer;
 	display: inline-block;
 	margin: 5px -5px 0;
-	padding: 5px 20px;
+	padding: 3px 20px 11px;
 	float: left;
 	position: relative;
 	z-index: 1;
 }
 
-nav#mainMenu li:after {
+menu.mainMenu li:after {
 	content: "";
 	display: block;
 	clear: both;
 }
 
-nav#mainMenu li:hover {
+menu.mainMenu li:hover {
 	color: #fff;
 }
 
-nav#mainMenu li.activeMenuItem {
+menu.mainMenu li.activeMenuItem {
+	font-size: 110%;
 	font-weight: bold;
 	color: #369;
 	text-shadow: 0 1px 0 #fff;
@@ -114,37 +119,36 @@ nav#mainMenu li.activeMenuItem {
 	background-image: -o-linear-gradient(#fff, #e7f2fd);
 	background-image: linear-gradient(#fff, #e7f2fd);
 	
-	border-radius: 7px 7px 0 0;
+	border-radius: 5px 5px 0 0;
 	margin: 0;
-	padding: 15px 20px 10px;
-	padding-top: 15px;
+	padding: 10px 20px 13px;
 	position: relative;
-	top: -5px;
+	top: -3px;
 	z-index: 10;
 }
 
-/* -- -- -- -- -- Sub Bar -- -- -- -- --  */
+/* -- -- -- -- -- Header Navigation -- -- -- -- --  */
 
-menu.subbar {
+nav.headerNavigation {
 	display: block;
 	background-color: #e7f2fd;
 	border-bottom: 1px solid #bcd;
-	border-radius: 5px 5px 0 0;
+	border-radius: 3px 3px 0 0;
 	padding: 3px 7px;
 	position: relative;
 }
 
-menu.subbar:after {
+nav.headerNavigation:after {
 	content: "";
 	display: block;
 	clear: both;
 }
 
-menu.subbar ul {
+nav.headerNavigation ul {
 	display: block;
 }
 
-menu.subbar ul li {
+nav.headerNavigation ul li {
 	float: right;
 }
 
@@ -157,7 +161,7 @@ div.main {
 	table-layout: fixed;
 }
 
-div.mainInner {
+div.main > div {
 	display: table-row;
 }
 
@@ -173,7 +177,7 @@ div#content {
 	
 	display: table-cell;
 	padding: 21px;
-	width: auto;
+	width: 100%;
 }
 
 /* -- -- -- -- -- Sidebar -- -- -- -- -- */
@@ -186,6 +190,10 @@ aside.sidebar {
 
 /* -- -- -- -- -- Sidebar Menu -- -- -- -- -- */
 
+nav.sidebarMenu {
+	white-space: nowrap;
+}
+
 nav.sidebarMenu div.menuContainer {
 	background-color: #d8e7f5;
 	position: relative;
@@ -205,15 +213,14 @@ nav.sidebarMenu div.menuContainer a:hover {
 
 nav.sidebarMenu div.menuContainer h1 {
 	background-image: url("../../icon/arrowRightS.png");
-	background-position: 7px center;
+	background-position: 15px center;
 	background-repeat: no-repeat;
 	color: #369;
 	cursor: pointer;
 	font-size: 130%;
 	font-weight: bold;
-	margin-top: 7px;
-	padding: 7px;
-	padding-left: 30px;
+	margin-top: 5px;
+	padding: 7px 7px 7px 35px;
 	position: relative;
 }
 
@@ -222,7 +229,8 @@ nav.sidebarMenu div.menuContainer h1.activeMenuItem {
 }
 
 nav.sidebarMenu div.menuContainer ul li {
-	padding: 7px 7px 7px 31px;
+	font-size: 110%;
+	padding: 7px 15px 7px 35px;
 }
 
 nav.sidebarMenu div.menuContainer ul li.activeMenuItem {
@@ -252,7 +260,7 @@ footer:after {
 footer > div {
 	background-color: #e7f2fd;
 	border-top: 1px solid #bcd;
-	border-radius: 0 0 5px 5px;
+	border-radius: 0 0 3px 3px;
 	clear: both;
 	padding: 3px 7px;
 }
@@ -356,6 +364,8 @@ div.ui-widget-overlay {
 	top: 0;
 }
 
+/* -- -- -- -- -- Headlines -- -- -- -- -- */
+
 div.mainHeadline {
 	height: 48px;
 	margin-bottom: 7px;
@@ -391,6 +401,8 @@ h3.subHeadline {
 	padding: 7px;
 }
 
+/* -- -- -- -- -- Fieldsets -- -- -- -- -- */
+
 fieldset {
 	border: 1px solid #ccc;
 	border-radius: 10px;
@@ -415,6 +427,8 @@ fieldset > ul li {
 	list-style-type: circle;
 }
 
+/* -- -- -- -- -- Forms -- -- -- -- -- */
+
 div.formElement {
 	clear: both;
 	margin-bottom: 14px;
@@ -444,6 +458,9 @@ div.formGroupField div.formField label {
 	display: block;
 }
 
+
+
+
 .border {
 	border: 1px solid #ccc;
 	border-radius: 5px;
@@ -468,6 +485,8 @@ div.formGroupField div.formField label {
 	border-width: 0 !important;
 }
 
+/* -- -- -- -- -- Tables -- -- -- -- -- */
+
 table {
 	border-radius: 0 0 5px 5px;
 	width: 100% !important;
@@ -557,6 +576,8 @@ tr.container-2 td {
 	background-color: #eee;
 }
 
+/* -- -- -- -- -- Page Navigation -- -- -- -- -- */
+
 .pageNavigation ul li {
 	display: inline-block;
 }
@@ -586,6 +607,8 @@ tr.container-2 td {
 	vertical-align: middle;
 }
 
+/* -- -- -- -- -- Large Buttons -- -- -- -- -- */
+
 div.largeButtons {
 	text-align: right;
 }
@@ -636,6 +659,10 @@ input[type='submit'] {
 	cursor: pointer;
 }
 
+
+
+
+
 div#packageInstallationDialogContainer {
 	background-color: #fefefe;
 	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee));
@@ -705,12 +732,14 @@ fieldset legend ~ p {
 	margin-bottom: 14px;
 }
 
+/* -- -- -- -- -- Tabbed Content -- -- -- -- -- */
+
 dl {
 	clear: both;
 	margin-bottom: 7px;
 }
 
-dt /* is op */ {
+dt { /* is op */
 	float: left;
 	text-align: right;
 	width: 230px;
@@ -730,7 +759,11 @@ dl.disabled dt {
 	color: #777;
 }
 
-/* Taken from jQuery UI @ themes/base/jquery.ui.tabs.css */
+
+
+
+/* -- -- -- -- -- Taken from jQuery UI @ themes/base/jquery.ui.tabs.css -- -- -- -- -- */
+
 .ui-tabs {
 	position: relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
 	padding: 3px;
diff --git a/wcfsetup/install/files/acp/templates/footer.tpl b/wcfsetup/install/files/acp/templates/footer.tpl
index 39017ac934..7f5d956721 100644
--- a/wcfsetup/install/files/acp/templates/footer.tpl
+++ b/wcfsetup/install/files/acp/templates/footer.tpl
@@ -14,6 +14,7 @@
 		</div>
 		<p class="copyright"><a href="http://www.woltlab.com" title="www.woltlab.com">Copyright &copy; 2001-2011 WoltLab&reg; GmbH</a></p>
 	</footer>
+	<!-- /FOOTER -->
 	<a id="bottom"></a>
 </body>
 </html>
\ No newline at end of file
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 42ef5e2b6c..31218c6569 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -62,12 +62,14 @@
 		//]]>
 	</script>
 </head>
+
 <body id="tpl{$templateName|ucfirst}">
+	<!-- HEADER -->
 	<a id="top"></a>
 	<header>
 		
-		<!-- top nav -->
-		<!-- /top nav -->
+		<!-- top panel -->
+		<!-- /top panel -->
 		
 		<!-- logo -->
 		<div id="logo">
@@ -79,7 +81,7 @@
 		<!-- /logo -->
 		
 		<!-- top nav -->
-		<nav id="mainMenu">
+		<menu id="mainMenu" class="mainMenu">
 			{* work-around for unknown core-object during WCFSetup *}
 			{if PACKAGE_ID}
 				<ul>
@@ -88,23 +90,22 @@
 					{/foreach}
 				</ul>
 			{/if}
-		</nav>
+		</menu>
 		<!-- /top nav -->
 		
 		<!-- sub bar -->
-		
-		<menu class="subbar">
+		<nav class="headerNavigation">
 			<ul>
 				<li id="toBottomLink" class="toBottomLink"><a href="#bottom" title="{lang}wcf.global.scrollDown{/lang}"><img src="{@RELATIVE_WCF_DIR}icon/downS.png" alt="{lang}wcf.global.scrollDown{/lang}" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
 			</ul>
-		</menu>
-		
+		</nav>
 		<!-- /sub bar -->
 	</header>
+	<!-- /HEADER -->
 	
 	<!-- CONTENT -->
 	<div id="main" class="main">
-		<div class="mainInner">
+		<div>
 			<aside class="sidebar">
 				<!-- sub nav -->
 				<nav id="sidebarMenu" class="sidebarMenu">
@@ -114,7 +115,7 @@
 							<div class="menuContainer" data-parentMenuItem="{$parentMenuItem->menuItem}" id="{$parentMenuItem->menuItem}-container" style="display: none;">
 								{foreach from=$__wcf->getACPMenu()->getMenuItems($parentMenuItem->menuItem) item=menuItem}
 									<h1 data-menuItem="{$menuItem->menuItem}" class="menuHeader">{lang}{@$menuItem->menuItem}{/lang}</h1>
-									<div>
+									<div class="sidebarMenuGroup">
 										<ul id="{$menuItem->menuItem}">
 											{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItem->menuItem) item=menuItemCategory}
 												{if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
diff --git a/wcfsetup/install/files/icon/deleteS.png b/wcfsetup/install/files/icon/deleteS.png
old mode 100644
new mode 100755
index 839b811866..7016ef5377
Binary files a/wcfsetup/install/files/icon/deleteS.png and b/wcfsetup/install/files/icon/deleteS.png differ
diff --git a/wcfsetup/install/files/icon/downS.png b/wcfsetup/install/files/icon/downS.png
new file mode 100644
index 0000000000..8b68b9c056
Binary files /dev/null and b/wcfsetup/install/files/icon/downS.png differ
diff --git a/wcfsetup/install/files/icon/upS.png b/wcfsetup/install/files/icon/upS.png
new file mode 100644
index 0000000000..5d7d2a69f5
Binary files /dev/null and b/wcfsetup/install/files/icon/upS.png differ