TheDJ has submitted this change and it was merged.
Change subject: vector: Move right tabs from behind to below left tabs
......................................................................
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
---
M skins/vector/screen-hd.css
M skins/vector/screen.css
2 files changed, 15 insertions(+), 7 deletions(-)
Approvals:
TheDJ: Looks good to me, approved
jenkins-bot: Verified
diff --git a/skins/vector/screen-hd.css b/skins/vector/screen-hd.css
index b90fd63..7dbb1ba 100644
--- a/skins/vector/screen-hd.css
+++ b/skins/vector/screen-hd.css
@@ -18,7 +18,7 @@
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
--- a/skins/vector/screen.css
+++ b/skins/vector/screen.css
@@ -100,9 +100,17 @@
}
/* 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 @@
/* 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;
--
To view, visit https://gerrit.wikimedia.org/r/45944
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Iedaebefc139ecd7ad48867626b67c52c6d00121d
Gerrit-PatchSet: 11
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Matmarex <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: Matmarex <[email protected]>
Gerrit-Reviewer: Pginer <[email protected]>
Gerrit-Reviewer: TheDJ <[email protected]>
Gerrit-Reviewer: Trevor Parscal <[email protected]>
Gerrit-Reviewer: Waldir <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
