From: MatmaRex <matma.rex@gmail.com>
Date: Sat, 26 Jan 2013 16:19:49 +0000 (+0100)
Subject: vector: Move right tabs from behind to below left tabs
X-Git-Tag: 1.31.0-rc.0~19069^2
X-Git-Url: http://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/operations/?a=commitdiff_plain;h=3d2abae2d493eee5ada56e8dad3a90b44d9aefd2;p=lhc%2Fweb%2Fwiklou.git

vector: Move right tabs from behind to below left tabs

On small resolutions, instead of overlapping, the "right" one will be
displayed below the "left" one. It might overlap page's title or
sitenotice, but this is less bad than rendering critical functionality
unreachable.

This also cleans up the CSS slightly, positioning left and right nav using
the same constructs (margins instead of absolute positioning).

Vector extension's ext.vector.collapsibleTabs had to be adjusted to work
with new styles; see change Ie34dce9a9 in Vector.

Bug: 20234
Change-Id: Iedaebefc139ecd7ad48867626b67c52c6d00121d
---

diff --git a/skins/vector/screen-hd.css b/skins/vector/screen-hd.css
index b90fd63bbf..7dbb1ba64d 100644
--- a/skins/vector/screen-hd.css
+++ b/skins/vector/screen-hd.css
@@ -18,7 +18,7 @@ div#footer {
 	margin-right: 1em;
 }
 #left-navigation {
-	left: 11em;
+	margin-left: 11em;
 }
 #p-personal {
 	right: 1em;
diff --git a/skins/vector/screen.css b/skins/vector/screen.css
index 9d2a310ad4..e6dbbce5db 100644
--- a/skins/vector/screen.css
+++ b/skins/vector/screen.css
@@ -100,9 +100,17 @@ div.emptyPortlet {
 }
 /* Navigation Containers */
 #left-navigation {
-	position: absolute;
-	left: 10em;
-	top: 2.5em;
+	float: left;
+	margin-left: 10em;
+	margin-top: 2.5em;
+	/* When right nav would overlap left nav, it's placed below it
+	   (normal CSS floats behavior). This rule ensures that no empty space
+	   is shown between them due to right nav's margin-top. Page layout
+	   is still broken, but at least the nav overlaps only the page title
+	   instead of half the content. */
+	margin-bottom: -2.5em;
+	/* IE 6 double-margin bug fix */
+	display: inline;
 }
 #right-navigation {
 	float: right;
@@ -876,14 +884,14 @@ div.vectorTabs ul {
 /* Animate between standard and high definition layouts */
 
 body.vector-animateLayout div#content,
-body.vector-animateLayout div#footer {
+body.vector-animateLayout div#footer,
+body.vector-animateLayout #left-navigation {
 	-moz-transition: margin-left 250ms, padding 250ms;
 	-webkit-transition: margin-left 250ms, padding 250ms;
 	-o-transition: margin-left 250ms, padding 250ms;
 	transition: margin-left 250ms, padding 250ms;
 }
-body.vector-animateLayout #p-logo,
-body.vector-animateLayout #left-navigation {
+body.vector-animateLayout #p-logo {
 	-moz-transition: left 250ms;
 	-webkit-transition: left 250ms;
 	-o-transition: left 250ms;