Fix reversed nav elements when viewing cached HTML

Follow-up to 5d0a07bf9d.
See T48947#3641618 for a detailed explanation of the
problem this is fixing. Essentially, our CSS has to be
compatible with both new and old HTML to avoid problems
with cached pages on Wikimedia wikis. To do this, we
add a CSS class to the body and make the new CSS only
apply on pages that have this class. This patch should
be reverted when the caches expire.

Bug: T48947
Change-Id: Icf26e6690b59f470765b2634534d18d2df25ee2a
This commit is contained in:
Bartosz Dziewoński 2017-09-28 04:23:01 +02:00
parent 0d9e8ba154
commit e951a09913
3 changed files with 38 additions and 0 deletions

View file

@ -47,6 +47,7 @@ class SkinVector extends SkinTemplate {
if ( $this->vectorConfig->get( 'VectorExperimentalPrintStyles' ) ) {
$className .= ' vector-experimental-print-styles';
}
$className .= ' vector-nav-directionality';
return $className;
}

View file

@ -19,11 +19,16 @@
li {
line-height: 1.125em;
/* @noflip */
float: left;
margin-left: 0.75em;
margin-top: 0.5em;
font-size: @menu-personal-font-size;
white-space: nowrap;
.vector-nav-directionality & {
float: left;
}
}
}

View file

@ -9,6 +9,7 @@ div.vectorTabs h3 {
/* Namespaces and Views */
div.vectorTabs {
/* @noflip */
float: left;
height: 2.5em;
.background-image('images/tab-break.png');
@ -16,7 +17,12 @@ div.vectorTabs {
background-repeat: no-repeat;
padding-left: 1px;
.vector-nav-directionality & {
float: left;
}
ul {
/* @noflip */
float: left;
height: 100%;
list-style-type: none;
@ -27,7 +33,12 @@ div.vectorTabs {
background-position: right bottom;
background-repeat: no-repeat;
.vector-nav-directionality & {
float: left;
}
li {
/* @noflip */
float: left;
line-height: 1.125em;
/* For IE6, overridden later to display:block by modern browsers */
@ -40,6 +51,10 @@ div.vectorTabs {
background-position: bottom left;
background-repeat: repeat-x;
white-space: nowrap;
.vector-nav-directionality & {
float: left;
}
}
/* IGNORED BY IE6 which doesn't support child selector */
@ -104,19 +119,31 @@ div.vectorTabs {
/* Ignored by IE6 which doesn't support child selector */
> a {
/* @noflip */
float: left;
display: block;
.vector-nav-directionality & {
float: left;
}
}
}
}
/* Variants and Actions */
div.vectorMenu {
/* @noflip */
direction: ltr;
/* @noflip */
float: left;
cursor: pointer;
position: relative;
line-height: 1.125em;
.vector-nav-directionality & {
direction: ltr;
float: left;
}
}
body.rtl div.vectorMenu {
@ -125,6 +152,7 @@ body.rtl div.vectorMenu {
}
div#mw-head div.vectorMenu h3 {
/* @noflip */
float: left;
.background-image('images/tab-break.png');
background-repeat: no-repeat;
@ -135,6 +163,10 @@ div#mw-head div.vectorMenu h3 {
// border. It is necessary for the dropdown (div.vectorMenu div.menu) to align well.
padding-right: 1px;
margin-right: -1px;
.vector-nav-directionality & {
float: left;
}
}
div.vectorMenu h3 span {