Print styles in Vector are no longer feature flagged
Remove feature flagging of print styles Changes: * Merge experimental module into skins.vector.styles * Update skins.vector.styles RL class to support LESS variable * Remove feature flag class in HTML and LESS (update indents in LESS file) Bug: T178028 Change-Id: I8d5c59c5c9f415ffbd7fa41a512cbea87887e9e7
This commit is contained in:
jdlrobson
parent
1ed289f520
commit
c863b94302
|
|
@ -44,9 +44,6 @@ class SkinVector extends SkinTemplate {
|
|||
/** @inheritDoc */
|
||||
public function getPageClasses( $title ) {
|
||||
$className = parent::getPageClasses( $title );
|
||||
if ( $this->vectorConfig->get( 'VectorExperimentalPrintStyles' ) ) {
|
||||
$className .= ' vector-experimental-print-styles';
|
||||
}
|
||||
$className .= ' vector-nav-directionality';
|
||||
return $className;
|
||||
}
|
||||
|
|
@ -74,14 +71,6 @@ class SkinVector extends SkinTemplate {
|
|||
$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' );
|
||||
}
|
||||
|
||||
|
|
|
|||
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
|
||||
// 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.
|
||||
.vector-experimental-print-styles {
|
||||
.firstHeading {
|
||||
// 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.
|
||||
// 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
|
||||
// specification. See https://www.w3.org/TR/CSS2/generate.html#before-after-content
|
||||
& when( @printLogo = 1 ) {
|
||||
&:before {
|
||||
content: @printLogoUrl;
|
||||
display: block;
|
||||
height: ~'@{printLogoHeight}px';
|
||||
left: -9999px;
|
||||
line-height: 0; // line-height is needed for correctly displaying the size of the content box.
|
||||
margin-bottom: 20px;
|
||||
position: absolute;
|
||||
width: ~'@{printLogoWidth}px';
|
||||
}
|
||||
.firstHeading {
|
||||
// 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.
|
||||
// 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
|
||||
// specification. See https://www.w3.org/TR/CSS2/generate.html#before-after-content
|
||||
& when( @printLogo = 1 ) {
|
||||
&:before {
|
||||
content: @printLogoUrl;
|
||||
display: block;
|
||||
height: ~'@{printLogoHeight}px';
|
||||
left: -9999px;
|
||||
line-height: 0; // line-height is needed for correctly displaying the size of the content box.
|
||||
margin-bottom: 20px;
|
||||
position: absolute;
|
||||
width: ~'@{printLogoWidth}px';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -32,7 +30,7 @@
|
|||
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. */
|
||||
#toc,
|
||||
body.vector-experimental-print-styles {
|
||||
body {
|
||||
padding: 10px;
|
||||
font-family: @font-family-serif;
|
||||
}
|
||||
|
|
@ -53,162 +51,159 @@
|
|||
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 {
|
||||
border-bottom: 1px solid #aaa;
|
||||
border: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.firstHeading {
|
||||
font-size: 25pt;
|
||||
line-height: 28pt;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 5px;
|
||||
> ul {
|
||||
|
||||
// Bring back the wordmark to the viewport (see above how it's rendered outside the viewport).
|
||||
& when( @printLogo = 1 ) {
|
||||
&:before {
|
||||
left: auto;
|
||||
position: relative;
|
||||
> li {
|
||||
margin-bottom: 4px;
|
||||
font-weight: bold;
|
||||
|
||||
> ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
.firstHeading,
|
||||
h2 {
|
||||
// To avoid the bottom border of section headings with floated elements
|
||||
overflow: hidden;
|
||||
border-bottom: 2px solid @pureBlack;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 30px 0 0;
|
||||
}
|
||||
ul {
|
||||
padding-left: 30px;
|
||||
|
||||
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;
|
||||
li {
|
||||
padding-left: 30px;
|
||||
}
|
||||
.tocnumber {
|
||||
min-width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid @pureBlack;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin: 10px 0 0 1.6em;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
padding: 2px 0;
|
||||
li.toclevel-1 {
|
||||
> a {
|
||||
font-weight: bold;
|
||||
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;
|
||||
|
||||
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;
|
||||
}
|
||||
.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",
|
||||
"ResourceModules": {
|
||||
"skins.vector.styles": {
|
||||
"class": "Vector\\ResourceLoaderLessModule",
|
||||
"targets": [ "desktop", "mobile" ],
|
||||
"position": "top",
|
||||
"styles": {
|
||||
|
|
@ -46,17 +47,11 @@
|
|||
},
|
||||
"screen-hd.less": {
|
||||
"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": {
|
||||
"targets": [ "desktop", "mobile" ],
|
||||
"position": "top",
|
||||
|
|
@ -110,8 +105,6 @@
|
|||
"config": {
|
||||
"VectorUseSimpleSearch": true,
|
||||
"VectorUseIconWatch": true,
|
||||
"@VectorExperimentalPrintStyles": "Temporary config variable to feature flag new print styles (T154965)",
|
||||
"VectorExperimentalPrintStyles": false,
|
||||
"VectorResponsive": false,
|
||||
"VectorPrintLogo": false
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue