From: Luzifr <szekely@woltlab.com>
Date: Wed, 30 Nov 2011 18:12:42 +0000 (+0100)
Subject: Floated sidebar
X-Git-Tag: 2.0.0_Beta_1~1555
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=8583060718bf621607ade0a9f4a588ecfbd465de;p=GitHub%2FWoltLab%2FWCF.git

Floated sidebar

Floated sidebar ready.
ToDo: Collapsing does not yet work correctly! Work in progress!
---

diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index ab099f8665..33e4978775 100644
--- a/wcfsetup/install/files/acp/style/style.css
+++ b/wcfsetup/install/files/acp/style/style.css
@@ -703,7 +703,15 @@ nav.footerNavigation ul li a:hover {
 /* ############## Main ############## */
 
 div.main {
+	background-color: #d8e7f5;
 	margin: 0 23px;
+	position: relative;
+	
+	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+	-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+	-ms-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+	-o-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+	box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
 }
 
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
@@ -728,23 +736,49 @@ div.main {
 
 section.content {
 	background-color: rgba(255, 255, 255, 1);
-	display: table-cell;
 	position: relative;
-	width: 100%;
+	min-height: 100px;
 	z-index: 100;
-	vertical-align: top;
+	
+	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	-ms-box-shadow: 0 0 50pxrgba(0, 0, 0, .1);
+	/* ToDo: Opera doesn't like that so much! Bug-report sent to Opera 
+	-o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	box-shadow: 0 0 5px rgba(0, 0, 0, .1);*/
+	
+	-webkit-transition: margin .5s ease;
+	-moz-transition: margin .5s ease;
+	-ms-transition: margin .5s ease;
+	-o-transition: margin .5s ease;
+	transition: margin .5s ease;
+}
+
+section.content:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
+.left section.content {
+	border-left: 1px solid #bcd;
+	margin-left: 249px;
+}
+
+.right section.content {
+	border-right: 1px solid #bcd;
+	margin-right: 249px;
 }
 
+/* ToDo: The sidebar should be removed completely, when there is no content, as on the login-page and similar! Then this declaration would work as expected. */
 div.main > div section:only-child {
-	display: block !important;
-	width: auto;
+	margin: 0 !important;
 }
 
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
 	
 	section.content {
 		padding: 5px 40px 20px;
-		min-height: 100px; /* ToDo: Does not work! */
 	}
 	
 }	
@@ -753,7 +787,6 @@ div.main > div section:only-child {
 	
 	section.content {
 		padding: 5px 15px 20px;
-		min-height: auto;
 	}
 	
 }	
@@ -782,19 +815,83 @@ section.content .content {
 /* Globals */
 
 aside.sidebar {
-	border-right: 1px solid #bcd;
-	background-color: #d8e7f5;
-	margin: 0 !important;
-	padding: 0 !important;
-	display: table-cell;
+	margin-bottom: -10px;
+	display: block;
 	position: relative;
-	vertical-align: top;
+	width: 250px;
+	overflow: hidden;
+	z-index: 110;
+	
+	-webkit-transition: width .5s ease;
+	-moz-transition: width .5s ease;
+	-ms-transition: width .5s ease;
+	-o-transition: width .5s ease;
+	transition: width .5s ease;
+}
+
+/* Toggle for sidebar orientation (options: left|right|top|bottom) */
+
+.left aside.sidebar {
+	float: left;
+}
+
+.right aside.sidebar {
+	float: right;
+}
+
+
+
+/* ToDo: Collapsible Sidebar */
+
+/* Collapsed */
+
+aside.collapsedSidebar {
+	width: 1px;
+}
+
+aside.sidebar.collapsedSidebar + section.content {
+	border: 0;
+	margin: 0;
+}
+
+aside.sidebar .collapsibleSidebarButton {
+	cursor: pointer;
+	border: 1px solid #f60;
+	background-color: red;
+	background-image: url('../../icon/arrowLeft1.svg');
+	background-size: 10px;
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 50%;
+	left: 200px;
+	margin-right: -5px;
+	width: 50px;
+	height: 50px;
+	z-index: 1500;
+	opacity: 1;
+}
+
+#tplLogin aside.sidebar .collapsibleSidebarButton {
+	/* ToDo: This should not be necessary! Is there no way to 
+	remove the sidebar by script on pages like log-in? If we 
+	find a way to achieve this, this declaration can be deleted. */
+	display: none;
+}
+
+aside.sidebar.collapsedSidebar .collapsibleSidebarButton {
+	/*border-right: 1px solid transparent;
+	border-left: 1px solid transparent;*/
+	background-image: url('../../icon/arrowRight1.svg');
+}
+
+aside.sidebar .collapsibleSidebarButton:hover {
+	color: #999;
+	opacity: 1;
+}
+
+aside.sidebar.collapsedSidebar .collapsibleSidebarButton:hover {
 	
-	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-	-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-	-ms-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-	-o-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-	box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
 }
 
 
@@ -803,7 +900,6 @@ aside.sidebar {
 
 nav.sidebarMenu {
 	white-space: nowrap;
-	padding-bottom: 20px;
 }
 
 nav.sidebarMenu > div {
@@ -878,6 +974,7 @@ nav.sidebarMenu > div ul li.activeMenuItem {
 	background-color: #fff;
 	margin-right: -1px;
 	overflow: hidden;
+	z-index: 110;
 	
 	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
 	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
@@ -891,69 +988,6 @@ nav.sidebarMenu > div ul li.activeMenuItem a {
 	color: #369;
 }
 
-/* ToDo: Collapsible Sidebar Button */
-
-aside.sidebar .collapsibleSidebarButton {
-	border-right: 1px solid transparent;
-	border-left: 1px solid transparent;
-	background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
-	background-size: 10px;
-	background-position: center 1%, center center, center 99%;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: -17px;
-	bottom: 0;
-	width: 15px;
-	height: 100%;
-	z-index: 500;
-	opacity: .3;
-	
-	-webkit-transition: opacity .2s linear;
-	-moz-transition: opacity .2s linear;
-	-ms-transition: opacity .2s linear;
-	-o-transition: opacity .2s linear;
-	transition: opacity .2s linear;
-}
-
-#tplLogin aside.sidebar .collapsibleSidebarButton {
-	/* ToDo: This should not be necessary! Is there no way to 
-	remove the sidebar by script on pages like log-in? If we 
-	find a way to achieve this, this declaration can be deleted. */
-	display: none;
-}
-
-aside.sidebar.collapsedSidebar .collapsibleSidebarButton {
-	/*border-right: 1px solid transparent;
-	border-left: 1px solid transparent;*/
-	background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
-	background-position: center 1%, center center, center 99%;
-}
-
-aside.sidebar .collapsibleSidebarButton:hover {
-	color: #999;
-	cursor: pointer;	
-	border-right-color: rgba(0, 0, 0, .15);
-	border-left-color: rgba(0, 0, 0, .15);
-	background-color: rgba(0, 0, 0, .015);
-	opacity: 1;
-}
-
-aside.sidebar.collapsedSidebar .collapsibleSidebarButton:hover {
-	border-right-color: rgba(0, 0, 0, .15);
-	border-left-color: transparent;
-}
-
-aside.sidebar.collapsedSidebar {
-	width: 0;
-}
-
-aside.sidebar.collapsedSidebar nav {
-	overflow: hidden;
-	width: 0;
-	display: none;
-}
-
 
 
 /* ############## Page Footer ############## */
@@ -1188,13 +1222,6 @@ li > .badgeButton {
 
 .mainHeading {
 	margin-top: 25px;
-	position: relative;
-}
-
-.mainHeading:after {
-	content: '';
-	display: block;
-	clear: both;
 }
 
 .mainHeading:not(:first-of-type) {
@@ -1974,12 +2001,6 @@ input[type='button'],
 	position: relative;
 }
 
-.tabMenu:after {
-	content: '';
-	display: block;
-	clear: both;
-}
-
 /* Tabs */
 
 .tabMenu li {
@@ -2630,12 +2651,6 @@ tr .columnURL {
 	background-image: none !important;
 }
 
-.pageNavigation ul li:after {
-	content: '';
-	display: block;
-	clear: both;
-}
-
 .pageNavigation ul li img {
 	height: 16px;
 	width: 16px;
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index f08191ae3b..30ff66da17 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -142,10 +142,10 @@
 	<!-- /HEADER -->
 	
 	<!-- MAIN -->
-	<div id="main" class="main left">
+	<div id="main" class="main left"><!-- ToDo: We now use a floating sidebar. Thus we need some trigger for its orientation, which has to reside at least one level above the sidebar. This trigger should be set either to "left" or "right", although "top" or "bottom" would also be nice (not for the ACP but maybe in other applications like the gallery or so). Also for 2 sidebars we can mix the trigger values, support is already here!!! -->
 		<div>
 			<!-- SIDEBAR -->
-			<aside class="sidebar">
+			<aside class="sidebar"><!-- ToDo: Please remove the sidebar completely if there is no content in it! The remaining empty sidebar frame causes many display problems and makes proper styling nearly impossible! A simple "if"-construct should be possible i think? -->
 				<!-- sidebar menu -->
 				<nav id="sidebarMenu" class="sidebarMenu">
 					{* work-around for unknown core-object during WCFSetup *}