Merge "Print styles in Vector are no longer feature flagged"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
1582f981ec
|
|
@ -44,9 +44,6 @@ class SkinVector extends SkinTemplate {
|
||||||
/** @inheritDoc */
|
/** @inheritDoc */
|
||||||
public function getPageClasses( $title ) {
|
public function getPageClasses( $title ) {
|
||||||
$className = parent::getPageClasses( $title );
|
$className = parent::getPageClasses( $title );
|
||||||
if ( $this->vectorConfig->get( 'VectorExperimentalPrintStyles' ) ) {
|
|
||||||
$className .= ' vector-experimental-print-styles';
|
|
||||||
}
|
|
||||||
$className .= ' vector-nav-directionality';
|
$className .= ' vector-nav-directionality';
|
||||||
return $className;
|
return $className;
|
||||||
}
|
}
|
||||||
|
|
@ -74,14 +71,6 @@ class SkinVector extends SkinTemplate {
|
||||||
$this->enableResponsiveMode();
|
$this->enableResponsiveMode();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Print styles are feature flagged.
|
|
||||||
// This flag can be removed when T169732 is resolved.
|
|
||||||
if ( $this->vectorConfig->get( 'VectorExperimentalPrintStyles' ) ) {
|
|
||||||
// Note, when deploying (T169732) we'll want to fold the stylesheet into
|
|
||||||
// skins.vector.styles and remove this module altogether.
|
|
||||||
$out->addModuleStyles( 'skins.vector.styles.experimental.print' );
|
|
||||||
}
|
|
||||||
|
|
||||||
$out->addModules( 'skins.vector.js' );
|
$out->addModules( 'skins.vector.js' );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
309
print.less
309
print.less
|
|
@ -4,24 +4,22 @@
|
||||||
// We have to render the wordmark image before the print dialog is invoked, otherwise the image
|
// We have to render the wordmark image before the print dialog is invoked, otherwise the image
|
||||||
// won't render in the printed file. Use a little hack to render the image outside the viewport
|
// won't render in the printed file. Use a little hack to render the image outside the viewport
|
||||||
// and bring it in the viewport in print view.
|
// and bring it in the viewport in print view.
|
||||||
.vector-experimental-print-styles {
|
.firstHeading {
|
||||||
.firstHeading {
|
// We could also use a CSS background to display the logo.
|
||||||
// We could also use a CSS background to display the logo.
|
// The problem is that the logo won't be printed unless the user prints the background too.
|
||||||
// The problem is that the logo won't be printed unless the user prints the background too.
|
// Note. This specification does not fully define the interaction of :before and :after with
|
||||||
// Note. This specification does not fully define the interaction of :before and :after with
|
// replaced elements (such as IMG in HTML). This will be defined in more detail in a future
|
||||||
// replaced elements (such as IMG in HTML). This will be defined in more detail in a future
|
// specification. See https://www.w3.org/TR/CSS2/generate.html#before-after-content
|
||||||
// specification. See https://www.w3.org/TR/CSS2/generate.html#before-after-content
|
& when( @printLogo = 1 ) {
|
||||||
& when( @printLogo = 1 ) {
|
&:before {
|
||||||
&:before {
|
content: @printLogoUrl;
|
||||||
content: @printLogoUrl;
|
display: block;
|
||||||
display: block;
|
height: ~'@{printLogoHeight}px';
|
||||||
height: ~'@{printLogoHeight}px';
|
left: -9999px;
|
||||||
left: -9999px;
|
line-height: 0; // line-height is needed for correctly displaying the size of the content box.
|
||||||
line-height: 0; // line-height is needed for correctly displaying the size of the content box.
|
margin-bottom: 20px;
|
||||||
margin-bottom: 20px;
|
position: absolute;
|
||||||
position: absolute;
|
width: ~'@{printLogoWidth}px';
|
||||||
width: ~'@{printLogoWidth}px';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -32,7 +30,7 @@
|
||||||
In future (when deploying these styles) we may want to refactor skins.vector.styles
|
In future (when deploying these styles) we may want to refactor skins.vector.styles
|
||||||
to apply certain styles in print as well as screen mode. */
|
to apply certain styles in print as well as screen mode. */
|
||||||
#toc,
|
#toc,
|
||||||
body.vector-experimental-print-styles {
|
body {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-family: @font-family-serif;
|
font-family: @font-family-serif;
|
||||||
}
|
}
|
||||||
|
|
@ -53,162 +51,159 @@
|
||||||
font-family: @font-family-sans-serif;
|
font-family: @font-family-sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vector-experimental-print-styles {
|
// Normalize Blue links in the article
|
||||||
|
a {
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.firstHeading {
|
||||||
|
font-size: 25pt;
|
||||||
|
line-height: 28pt;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
|
||||||
|
// Bring back the wordmark to the viewport (see above how it's rendered outside the viewport).
|
||||||
|
& when( @printLogo = 1 ) {
|
||||||
|
&:before {
|
||||||
|
left: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Headings
|
||||||
|
.firstHeading,
|
||||||
|
h2 {
|
||||||
|
// To avoid the bottom border of section headings with floated elements
|
||||||
|
overflow: hidden;
|
||||||
|
border-bottom: 2px solid @pureBlack;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin: 30px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 18pt;
|
||||||
|
line-height: 24pt;
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 13pt;
|
||||||
|
line-height: 20pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-size: 10pt;
|
||||||
|
line-height: 15pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 10pt;
|
||||||
|
line-height: 16pt;
|
||||||
|
margin-top: 5px;
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
// T175008
|
||||||
|
// When a paragraph is surrounded by floating elements from both
|
||||||
|
// sides, we want to make sure that there is at least some space
|
||||||
|
// before showing the text. Otherwise, small lengths of text may show
|
||||||
|
// between the surrounding elements, making the reading experience less
|
||||||
|
// enjoyable. If there is not enough space the following code will push
|
||||||
|
// the paragraph contents until after the floating element(s).
|
||||||
|
@paragraphMinWidth: 120pt;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
width: @paragraphMinWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
border-left: 2px solid @pureBlack;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
margin: 10px 0 0 1.6em;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 2px 0;
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Using #toc rather than .toc to override default print style
|
||||||
|
#toc {
|
||||||
|
page-break-before: avoid;
|
||||||
|
page-break-after: avoid;
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
display: table;
|
||||||
|
|
||||||
// Normalize Blue links in the article
|
|
||||||
a {
|
a {
|
||||||
border-bottom: 1px solid #aaa;
|
border: 0;
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.firstHeading {
|
> ul {
|
||||||
font-size: 25pt;
|
|
||||||
line-height: 28pt;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
|
|
||||||
// Bring back the wordmark to the viewport (see above how it's rendered outside the viewport).
|
> li {
|
||||||
& when( @printLogo = 1 ) {
|
margin-bottom: 4px;
|
||||||
&:before {
|
font-weight: bold;
|
||||||
left: auto;
|
|
||||||
position: relative;
|
> ul {
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Headings
|
ul {
|
||||||
.firstHeading,
|
margin: 0;
|
||||||
h2 {
|
list-style: none;
|
||||||
// To avoid the bottom border of section headings with floated elements
|
|
||||||
overflow: hidden;
|
|
||||||
border-bottom: 2px solid @pureBlack;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3,
|
ul {
|
||||||
h4,
|
padding-left: 30px;
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
margin: 30px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2,
|
li {
|
||||||
h3,
|
padding-left: 30px;
|
||||||
h4,
|
}
|
||||||
h5,
|
.tocnumber {
|
||||||
h6 {
|
min-width: 30px;
|
||||||
padding: 0;
|
}
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 18pt;
|
|
||||||
line-height: 24pt;
|
|
||||||
margin-bottom: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 13pt;
|
|
||||||
line-height: 20pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-size: 10pt;
|
|
||||||
line-height: 15pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 10pt;
|
|
||||||
line-height: 16pt;
|
|
||||||
margin-top: 5px;
|
|
||||||
text-align: justify;
|
|
||||||
|
|
||||||
// T175008
|
|
||||||
// When a paragraph is surrounded by floating elements from both
|
|
||||||
// sides, we want to make sure that there is at least some space
|
|
||||||
// before showing the text. Otherwise, small lengths of text may show
|
|
||||||
// between the surrounding elements, making the reading experience less
|
|
||||||
// enjoyable. If there is not enough space the following code will push
|
|
||||||
// the paragraph contents until after the floating element(s).
|
|
||||||
@paragraphMinWidth: 120pt;
|
|
||||||
&:before {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
width: @paragraphMinWidth;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
li.toclevel-1 {
|
||||||
border-left: 2px solid @pureBlack;
|
> a {
|
||||||
padding-left: 20px;
|
font-weight: bold;
|
||||||
}
|
|
||||||
|
|
||||||
ol,
|
|
||||||
ul {
|
|
||||||
margin: 10px 0 0 1.6em;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
padding: 2px 0;
|
|
||||||
font-size: 10pt;
|
font-size: 10pt;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Using #toc rather than .toc to override default print style
|
.tocnumber {
|
||||||
#toc {
|
padding-right: 0;
|
||||||
page-break-before: avoid;
|
text-align: right;
|
||||||
page-break-after: avoid;
|
margin-right: 30px;
|
||||||
background: none;
|
display: inline-block;
|
||||||
border: 0;
|
|
||||||
display: table;
|
|
||||||
|
|
||||||
a {
|
|
||||||
border: 0;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
> ul {
|
|
||||||
|
|
||||||
> li {
|
|
||||||
margin-bottom: 4px;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
> ul {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin: 0;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
padding-left: 30px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
.tocnumber {
|
|
||||||
min-width: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li.toclevel-1 {
|
|
||||||
> a {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 10pt;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tocnumber {
|
|
||||||
padding-right: 0;
|
|
||||||
text-align: right;
|
|
||||||
margin-right: 30px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
15
skin.json
15
skin.json
|
|
@ -38,6 +38,7 @@
|
||||||
"@note": "When modifying skins.vector.styles definition, make sure the installer still works",
|
"@note": "When modifying skins.vector.styles definition, make sure the installer still works",
|
||||||
"ResourceModules": {
|
"ResourceModules": {
|
||||||
"skins.vector.styles": {
|
"skins.vector.styles": {
|
||||||
|
"class": "Vector\\ResourceLoaderLessModule",
|
||||||
"targets": [ "desktop", "mobile" ],
|
"targets": [ "desktop", "mobile" ],
|
||||||
"position": "top",
|
"position": "top",
|
||||||
"styles": {
|
"styles": {
|
||||||
|
|
@ -46,17 +47,11 @@
|
||||||
},
|
},
|
||||||
"screen-hd.less": {
|
"screen-hd.less": {
|
||||||
"media": "screen and (min-width: 982px)"
|
"media": "screen and (min-width: 982px)"
|
||||||
}
|
},
|
||||||
|
"print.less": {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"skins.vector.styles.experimental.print": {
|
|
||||||
"class": "Vector\\ResourceLoaderLessModule",
|
|
||||||
"targets": [ "desktop", "mobile" ],
|
|
||||||
"position": "top",
|
|
||||||
"styles": [
|
|
||||||
"print.less"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"skins.vector.styles.responsive": {
|
"skins.vector.styles.responsive": {
|
||||||
"targets": [ "desktop", "mobile" ],
|
"targets": [ "desktop", "mobile" ],
|
||||||
"position": "top",
|
"position": "top",
|
||||||
|
|
@ -110,8 +105,6 @@
|
||||||
"config": {
|
"config": {
|
||||||
"VectorUseSimpleSearch": true,
|
"VectorUseSimpleSearch": true,
|
||||||
"VectorUseIconWatch": true,
|
"VectorUseIconWatch": true,
|
||||||
"@VectorExperimentalPrintStyles": "Temporary config variable to feature flag new print styles (T154965)",
|
|
||||||
"VectorExperimentalPrintStyles": false,
|
|
||||||
"VectorResponsive": false,
|
"VectorResponsive": false,
|
||||||
"VectorPrintLogo": false
|
"VectorPrintLogo": false
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue