From: Luzifr <szekely@woltlab.com>
Date: Thu, 10 Nov 2011 18:31:10 +0000 (+0100)
Subject: Some changes to the collapsible sidebar
X-Git-Tag: 2.0.0_Beta_1~1607^2~2^2~1
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=154ecf6918b489ba1322c1216320a90fd143af9d;p=GitHub%2FWoltLab%2FWCF.git

Some changes to the collapsible sidebar

There seems to be no way to animate the toggle, so i removed it for
now. Maybe someone finds a clean and simple solution.
---

diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index abfa2e5b8b..9239267b6d 100644
--- a/wcfsetup/install/files/acp/style/style.css
+++ b/wcfsetup/install/files/acp/style/style.css
@@ -3697,18 +3697,23 @@ div#profileButtonContainer button:hover {
 
 
 
-/* TODO: This is just a prototype for collapsible sidebars */
+/* ToDo: Collapsible Sidebar Button */
+
 .collapsibleSidebarButton {
-	background-color: rgb(216, 231, 245);
-	border: 1px solid rgb(192, 192, 192);
-	border-left-width: 0;
-	border-radius: 0 3px 3px 0;
+	border-right: 1px solid transparent;
+	border-left: 1px solid transparent;
+	background-image: url('../../icon/handle1.svg');
+	background-size: 48px;
+	background-position: left center;
+	background-repeat: no-repeat;
 	padding: 3px;
-	opacity: 0.6;
 	position: absolute;
+	top: 0;
 	right: -15px;
-	top: 46%;
-	z-index: 101;
+	bottom: 0;
+	width: 7px;
+	z-index: 500;
+	opacity: .6;
 	
 	-webkit-transition: opacity .2s linear;
 	-moz-transition: opacity .2s linear;
@@ -3719,22 +3724,22 @@ div#profileButtonContainer button:hover {
 
 .collapsibleSidebarButton:hover {
 	cursor: pointer;
-	opacity: 1.0;
+	color: #999;	
+	border-right-color: #ccc;
+	border-left-color: #ccc;
+	background-color: rgba(0, 0, 0, .015);
+	opacity: 1;
 }
 
-.collapsibleSidebar {
-	-webkit-transition: width .5s linear;
-	-moz-transition: width .5s linear;
-	-ms-transition: width .5s linear;
-	-o-transition: width .5s linear;
-	transition: width .5s linear;
-	
-	width: 100%;
+.collapsedSidebar {
+	overflow: hidden;
+	width: 0;
 }
 
-.collapsibleSidebar.collapsedSidebar {
+.collapsedSidebar nav {
 	overflow: hidden;
-	width: 0%;
+	width: 0;
+	display: none;
 }
 
 
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index e7859cc266..ba49b791b4 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -64,7 +64,8 @@
 				'wcf.global.thousandsSeparator': '{capture assign=thousandsSeparator}{lang}wcf.global.thousandsSeparator{/lang}{/capture}{@$thousandsSeparator|encodeJS}',
 				'wcf.global.decimalPoint': '{capture assign=decimalPoint}{lang}wcf.global.decimalPoint{/lang}{/capture}{$decimalPoint|encodeJS}',
 				'wcf.global.page.next': '{capture assign=pageNext}{lang}wcf.global.page.next{/lang}{/capture}{@$pageNext|encodeJS}',
-				'wcf.global.page.previous': '{capture assign=pagePrevious}{lang}wcf.global.page.previous{/lang}{/capture}{@$pagePrevious|encodeJS}'
+				'wcf.global.page.previous': '{capture assign=pagePrevious}{lang}wcf.global.page.previous{/lang}{/capture}{@$pagePrevious|encodeJS}',
+				'wcf.global.button.collapsible': '{lang}wcf.global.button.collapsible{/lang}'
 			});
 			new WCF.Date.Time();
 			new WCF.Effect.SmoothScroll();
diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 8a3449fafb..a412b70c76 100644
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -3015,7 +3015,7 @@ $.widget('ui.wcfSidebar', {
 		this.element.wrap('<div class="collapsibleSidebar"></div>');
 		
 		// create toggle button
-		this._button = $('<span class="collapsibleSidebarButton">&laquo;</div>').appendTo(this.element.parent('div'));
+		this._button = $('<span class="collapsibleSidebarButton" title="' + WCF.Language.get('wcf.global.button.collapsible') + '"></span>').appendTo(this.element.parent('div'));
 
 		// bind event
 		this._button.click($.proxy(this._toggle, this));