From 35c146795013b7025255b57f0ea2f017b2b62f61 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Tue, 28 May 2013 15:02:09 +0200
Subject: [PATCH] Sidebar optimization

---
 wcfsetup/install/files/js/WCF.js         |   1 +
 wcfsetup/install/files/style/layout.less | 121 ++++++++++++-----------
 2 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index f6883db3ca..fa7f88e95a 100755
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -4420,6 +4420,7 @@ WCF.Collapsible.Sidebar = Class.extend({
 		
 		// add toggle button
 		this._button = $('<a class="collapsibleButton jsTooltip" title="' + WCF.Language.get('wcf.global.button.collapsible') + '" />').prependTo(this._sidebar);
+		this._button.wrap('<span />');
 		this._button.click($.proxy(this._click, this));
 		this._buttonHeight = this._button.outerHeight();
 		
diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index c354e1dd1f..27156eb76d 100644
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -571,43 +571,60 @@
 #main {
 	z-index: 110;
 	
+	box-sizing:border-box;
+	-moz-box-sizing: border-box; /* Firefox */
+	display: table;
+	width: 100%;
+	table-layout: fixed;
+	
 	> div {
-		background-color: @wcfSidebarBackgroundColor;
+		display: table-row;
 		
+		> .sidebar,
+		> .content {
+			display: table-cell;
+			vertical-align: top;
+		}
+				
 		> .sidebar {
-			position: relative;
+			background-color: @wcfSidebarBackgroundColor;
 			width: 300px;
 			z-index: 120;
 			
 			.transition(width, .2s, ease);
 			
-			> .collapsibleButton {
-				background-color: @wcfSidebarBackgroundColor;
-				border-radius: 6px 0 0 6px;
-				display: block;
-				height: 24px;
-				left: -20px;
-				position: absolute;
-				text-decoration: none;
-				top: 0;
-				width: 24px;
+			> span {
+				position: relative;
 				
-				&:before {
-					content: "\f054";
-					font-family: FontAwesome;
-					font-size: 14px;
+				> .collapsibleButton {
+					background-color: @wcfSidebarBackgroundColor;
+					border-radius: 6px 0 0 6px;
+					display: block;
+					height: 24px;
+					left: -20px;
 					position: absolute;
-					left: 6px;
-					top: 4px;
+					text-decoration: none;
+					top: 0;
+					width: 24px;
 					
-					.textShadow(@wcfSidebarBackgroundColor);
+					&:before {
+						content: "\f054";
+						font-family: FontAwesome;
+						font-size: 14px;
+						position: absolute;
+						left: 6px;
+						top: 4px;
+						
+						.textShadow(@wcfSidebarBackgroundColor);
+					}
 				}
-				
-				.transition(left, .2s, ease);
 			}
 			
 			> div {
 				overflow: hidden;
+				width: 300px;
+				
+				.transition(width, .2s, ease);
 			}
 		}
 		
@@ -616,8 +633,6 @@
 			min-height: 100px;
 			padding: @wcfGapSmall @wcfGapLarge * 2 - @wcfGapTiny @wcfGapLarge;
 			z-index: 130;
-			
-			.transition(margin, .2s, ease);
 		}
 	}
 	
@@ -627,55 +642,50 @@
 		}
 	}
 	
-	&.sidebarOrientationLeft {
-		.content {
-			margin-left: 300px;
-		}
-		
-		.sidebar {
-			float: left;
-		}
-	}
-	
 	&.sidebarOrientationRight {
-		&.sidebarCollapsed > div {
+		direction: rtl;
+		
+		> div {
+			> .sidebar,
 			> .content {
-				margin-right: 20px;
+				direction: ltr;
 			}
-			
+		}
+		
+		&.sidebarCollapsed > div {
 			> .sidebar {
-				width: 0;
+				width: 20px;
 				
-				> .collapsibleButton {
-					left: -40px;
-					
+				> span > .collapsibleButton {
 					&:before {
 						content: "\f053";
 					}
 				}
+				
+				> div {
+					width: 0;
+				}
 			}
 		}
-
-		.content {
-			margin-right: 300px;
-		}
-		
-		.sidebar {
-			float: right;
-		}
-	}
-	
-	.content {
-		.clearfix;
 	}
 }
 
 @media only screen and (max-width: 800px) {
 	/* hide sidebar */
 	#main {
+		display: block;
 		position: relative;
 		margin-top: 7px;
 		
+		> div {
+			display: block;
+		
+			> .sidebar,
+			> .content {
+				display: block;
+			}
+		}
+		
 		&.sidebarOrientationRight {
 			.sidebar {
 				display: none;
@@ -684,8 +694,8 @@
 		
 		&.sidebarOrientationLeft {
 			.sidebar {
-				float: none;
-				padding-top: 0;
+				background-color: transparent;
+				padding: 0;
 				position: absolute;
 				right: 0px;
 				top: 14px;
@@ -711,6 +721,7 @@
 						background-color: @wcfSidebarBackgroundColor;
 						margin-top: 28px;
 						padding-top: 14px;
+						width: 100%;
 					}
 				}
 				
@@ -1912,7 +1923,7 @@ ul.inlineDataList {
 }
 
 .sidebar {
-	padding-top: @wcfGapLarge;
+	padding: @wcfGapLarge 0 @wcfGapSmall;
 	
 	fieldset {
 		padding: @wcfGapSmall @wcfGapMedium @wcfGapMedium;
-- 
2.20.1