wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-23 23:33:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Embed print wordmark and pre-render it

Browse source 
Make sure the print wordmark is readily available for printing. In
addition to embedding, pre-render the wordmark outside the viewport so
that the print dialog doesn't block image rendering in the print view.

Bug: T169826
Change-Id: I788bcecadf26e4e5558b5b37e6fb1b2e9378277e
This commit is contained in:
Baha 2017-08-04 11:06:32 -04:00
parent bbb1d9e78d
commit bb7579d3e5
2 changed files with 30 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ResourceLoaderLessModule.php
View file

@ -44,7 +44,8 @@ class ResourceLoaderLessModule extends ResourceLoaderFileModule {
$printLogo = $config->get( 'VectorPrintLogo' );
if ( $printLogo ) {
$lessVars[ 'printLogo' ] = true;
$lessVars[ 'printLogoUrl' ] = CSSMin::buildUrlValue( $printLogo['url'] );
$lessVars[ 'printLogoUrl' ] = CSSMin::buildUrlValue(
CSSMin::encodeImageAsDataURI( $printLogo['url'] ) );
$lessVars[ 'printLogoWidth' ] = intval( $printLogo['width'] );
$lessVars[ 'printLogoHeight' ] = intval( $printLogo['height'] );
} else {

39
print.less
View file

@ -1,6 +1,31 @@
@import 'variables.less';
@footerColor: #eee;
// 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: 10px;
position: absolute;
width: ~'@{printLogoWidth}px';
}
}
}
}
@media print {
/* These styles retain the existing typography in screen.less
@ -41,19 +66,11 @@
margin-bottom: 20px;
padding-bottom: 5px;
// 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
// Bring back the wordmark to the viewport (see above how it's rendered outside the viewport).
& when( @printLogo = 1 ) {
&:before {
content: @printLogoUrl;
display: block;
height: ~'@{printLogoHeight}px';
line-height: 0; // line-height is needed for correctly displaying the size of the content box.
margin-bottom: 10px;
width: ~'@{printLogoWidth}px';
left: auto;
position: relative;
}
}
}