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 b90fd63..7dbb1ba 100644 (file)
--- 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 9d2a310..e6dbbce 100644 (file)
--- 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;