From: Marcel Werk <burntime@woltlab.com>
Date: Thu, 29 Mar 2012 19:42:03 +0000 (+0200)
Subject: Sidebar overhaul
X-Git-Tag: 2.0.0_Beta_1~1181
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=ed4915166af5166c8be1986d4ad4af9b10086ba0;p=GitHub%2FWoltLab%2FWCF.git

Sidebar overhaul
---

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 416a366554..912c1fc740 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -168,31 +168,35 @@
 				<aside class="sidebar">
 					<!-- sidebar menu -->
 					<nav id="sidebarContent" class="sidebarContent">
-						{content}
-							{* work-around for unknown core-object during WCFSetup *}
-							{if PACKAGE_ID}
-								{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=parentMenuItem}
-									<div id="{$parentMenuItem->menuItem}-container" style="display: none;" class="menuGroup collapsibleMenus" data-parent-menu-item="{$parentMenuItem->menuItem}">
-										{foreach from=$__wcf->getACPMenu()->getMenuItems($parentMenuItem->menuItem) item=menuItem}
-											<h1 class="menuHeader" data-menu-item="{$menuItem->menuItem}">{lang}{@$menuItem->menuItem}{/lang}</h1>
-											<div class="menuGroupItems">
-												<ul id="{$menuItem->menuItem}">
-													{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItem->menuItem) item=menuItemCategory}
-														{if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
-															{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
-																<li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{lang}{$subMenuItem->menuItem}{/lang}</a></li>
-															{/foreach}
-														{else}
-															<li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{lang}{$menuItemCategory->menuItem}{/lang}</a></li>
-														{/if}
-													{/foreach}
-												</ul>
-											</div>
-										{/foreach}
-									</div>
-								{/foreach}
-							{/if}
-						{/content}
+						<ul>
+							<li>
+							{content}
+								{* work-around for unknown core-object during WCFSetup *}
+								{if PACKAGE_ID}
+									{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=parentMenuItem}
+										<div id="{$parentMenuItem->menuItem}-container" style="display: none;" class="menuGroup collapsibleMenus" data-parent-menu-item="{$parentMenuItem->menuItem}">
+											{foreach from=$__wcf->getACPMenu()->getMenuItems($parentMenuItem->menuItem) item=menuItem}
+												<h1 class="menuHeader" data-menu-item="{$menuItem->menuItem}">{lang}{@$menuItem->menuItem}{/lang}</h1>
+												<div class="menuGroupItems">
+													<ul id="{$menuItem->menuItem}">
+														{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItem->menuItem) item=menuItemCategory}
+															{if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
+																{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
+																	<li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{lang}{$subMenuItem->menuItem}{/lang}</a></li>
+																{/foreach}
+															{else}
+																<li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{lang}{$menuItemCategory->menuItem}{/lang}</a></li>
+															{/if}
+														{/foreach}
+													</ul>
+												</div>
+											{/foreach}
+										</div>
+									{/foreach}
+								{/if}
+							{/content}
+							</li>
+						</ul>
 					</nav>
 					<!-- /sidebar menu -->
 				</aside>
diff --git a/wcfsetup/install/files/style/bootstrap.less b/wcfsetup/install/files/style/bootstrap.less
index 90c1a2e841..a1e1fe61ae 100644
--- a/wcfsetup/install/files/style/bootstrap.less
+++ b/wcfsetup/install/files/style/bootstrap.less
@@ -27,6 +27,7 @@
 @import "comments.less";
 @import "user.less";
 @import "like.less";
+@import "sidebar.less";
 
 @import "message.less";
 @import "dialog.less";
diff --git a/wcfsetup/install/files/style/forms.less b/wcfsetup/install/files/style/forms.less
index db7d19be87..783d3f33af 100644
--- a/wcfsetup/install/files/style/forms.less
+++ b/wcfsetup/install/files/style/forms.less
@@ -32,20 +32,6 @@ fieldset legend ~ p {
 	margin-bottom: @wcfGapMedium;
 }
 
-/* Special Sidebar */
-
-.sidebar fieldset {
-	background-color: transparent;
-	border-width: 0;
-}
-
-.sidebar fieldset legend {
-	padding: 0;
-	text-transform: uppercase;
-		
-	.textShadow(@wcfHighlightBackgroundColor);
-}
-
 /* ############## Labeled Content ############## */
 
 /* Simple */
diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 07f43d5672..f1540d1010 100644
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -162,6 +162,10 @@ img {
 			color: @wcfDimmedColor;
 			padding-top: 5px;
 		}
+		
+		> h3 {
+			color: @wcfDimmedColor;
+		}
 	}
 }
 
@@ -214,6 +218,16 @@ dl.dataList {
 	}
 }
 
+ul.dataList {
+	li {
+		display: inline-block;
+		
+		&:not(:last-child):after {
+			content: ",";
+		}
+	}
+}
+
 .framed {
 	img  {
 		background-color: @wcfContentBackgroundColor;
diff --git a/wcfsetup/install/files/style/navigation.less b/wcfsetup/install/files/style/navigation.less
index 968067bbfa..c5716eb687 100644
--- a/wcfsetup/install/files/style/navigation.less
+++ b/wcfsetup/install/files/style/navigation.less
@@ -202,65 +202,4 @@
 			display: inline;
 		}
 	}
-}
-
-.sidebarContent {
-	a:hover {
-		text-decoration: none;
-	}
-	
-	> div {
-		overflow: hidden;
-		position: relative;
-		
-		&.collapsibleMenus > h1 {
-			background-image: url(../icon/arrowRight.svg);
-			background-position: 15px center;
-			background-repeat: no-repeat;
-			background-size: 16px;
-			
-			&.active {
-				background-image: url(../icon/arrowDown.svg);
-			}
-		}
-		
-		&:not(.collapsibleMenus) > h1 {
-			padding-right: @wcfGapLarge;
-		}
-		
-		> h1 {
-			color: @wcfLinkColor;
-			cursor: pointer;
-			font-size: 130%;
-			font-weight: bold;
-			padding: @wcfGapSmall @wcfGapMedium @wcfGapSmall (@wcfGapLarge + 16px + @wcfGapTiny);	// icon size + gap
-			
-			.textShadow(@wcfHighlightBackgroundColor);
-		}
-		
-		ul > li {
-			font-size: 110%;
-			
-			&.active {
-				background-color: @wcfContentBackgroundColor;
-				margin-right: -1px;
-				overflow: hidden;
-				
-				.boxShadow(0, 0, rgba(0, 0, 0, .1));
-				
-				a {
-					font-weight: bold;
-				}
-			}
-			
-			> a,
-			> div {
-				color: @wcfLinkColor;
-				display: block;
-				padding: @wcfGapTiny @wcfGapMedium @wcfGapSmall (@wcfGapLarge + 16px + @wcfGapTiny);
-				
-				.textShadow(@wcfHighlightBackgroundColor);
-			}
-		}
-	}
 }
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/sidebar.less b/wcfsetup/install/files/style/sidebar.less
new file mode 100644
index 0000000000..f474403232
--- /dev/null
+++ b/wcfsetup/install/files/style/sidebar.less
@@ -0,0 +1,148 @@
+.sidebarContent {
+	padding-top: @wcfGapLarge;
+	
+	> ul {
+		> li {
+			margin-bottom: @wcfGapMedium;
+			
+			&:not(:last-child) {
+				border-bottom: 1px solid darken(@wcfHighlightBackgroundColor, 8%);
+			}
+			
+			&.sidebarContainer {
+				padding: 0 @wcfGapMedium @wcfGapMedium;
+				
+				.button.more {
+					margin: 5px 0 0;
+					float: right;
+				}
+				
+				&:after {
+					content: "";
+					height: 0;
+					display: block;
+					clear: both;
+				}
+			}
+			
+			.sidebarContainerHeadline {
+				margin-bottom: @wcfGapSmall;
+				
+				> h1 {
+					text-transform: uppercase;
+					
+					.textShadow(@wcfHighlightBackgroundColor);
+					
+					.badge {
+						float: right;
+					}
+				}
+			}
+			
+			dl.dataList {
+				margin-bottom: -4px;
+				
+				dd {
+					margin-bottom: 4px;
+				}
+				
+				dt {
+					font-size: 85%;
+					color: @wcfLinkColor;
+				}
+			}
+			
+			/* forms */
+			fieldset {
+				background-color: transparent;
+				border-width: 0;
+				margin: 0;
+				padding: @wcfGapSmall 0 0;
+				
+				legend {
+					padding: 0;
+					text-transform: uppercase;
+						
+					.textShadow(@wcfHighlightBackgroundColor);
+				}
+			}
+		}
+	}
+	
+	/* menu groups */
+	.menuGroup {
+		overflow: hidden;
+		position: relative;
+		
+		> h1 {
+			margin-bottom: @wcfGapMedium;
+			padding: 0 @wcfGapMedium;
+			
+			.textShadow(@wcfHighlightBackgroundColor);
+		}
+		
+		.menuGroupItems {
+			margin-bottom: @wcfGapSmall;
+			margin-top: -@wcfGapSmall;
+		}
+		
+		a:hover {
+			text-decoration: none;
+		}
+		
+		ul > li {
+			&.active {
+				background-color: @wcfContentBackgroundColor;
+				margin-right: -1px;
+				overflow: hidden;
+				
+				.boxShadow(0, 0, rgba(0, 0, 0, .1));
+				
+				a {
+					font-weight: bold;
+				}
+			}
+			
+			> a,
+			> div {
+				color: @wcfLinkColor;
+				display: block;
+				padding: @wcfGapTiny @wcfGapMedium @wcfGapSmall @wcfGapLarge;
+			}
+		}
+		
+		&.collapsibleMenus {
+			> h1 {
+				background-image: url(../icon/arrowRight.svg);
+				background-position: 15px center;
+				background-repeat: no-repeat;
+				background-size: 16px;
+				color: @wcfLinkColor;
+				cursor: pointer;
+				font-weight: bold;
+				font-size: 130%;
+				padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
+				
+				&.active {
+					background-image: url(../icon/arrowDown.svg);
+				}
+			}
+			
+			ul > li {
+				font-size: 110%;
+				
+				> a,
+				> div {
+					padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
+					.textShadow(@wcfHighlightBackgroundColor);
+				}
+			}
+		}
+		
+		&:not(.collapsibleMenus) {
+			> h1 {
+				text-transform: uppercase;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/user.less b/wcfsetup/install/files/style/user.less
index 9013688e76..7a47d693ed 100644
--- a/wcfsetup/install/files/style/user.less
+++ b/wcfsetup/install/files/style/user.less
@@ -1,3 +1,32 @@
+/* ##### User Sidebar #### */
+.sidebarContent {
+	.userAvatar {
+		text-align: center;
+		overflow: hidden;
+	}
+}
+
+/* todo: framed icon list */
+.framedIconList {
+	li {
+		float: left;
+		margin: 0 4px 4px 0;
+		
+		.framed {
+			display: inline-block;
+		}
+	}
+	
+	&:after {
+		content: "";
+		height: 0;
+		display: block;
+		clear: both;
+	}
+}
+
+
+/* ##### User List #### */
 .simpleUserList {
 	h2, p, dl {
 		font-size: 85%;