jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/370221 )
Change subject: Embed print wordmark and pre-render it
......................................................................
Embed print wordmark and pre-render it
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
---
M ResourceLoaderLessModule.php
M print.less
2 files changed, 30 insertions(+), 12 deletions(-)
Approvals:
jenkins-bot: Verified
Jdlrobson: Looks good to me, approved
diff --git a/ResourceLoaderLessModule.php b/ResourceLoaderLessModule.php
index ca980fd..a901601 100644
--- a/ResourceLoaderLessModule.php
+++ b/ResourceLoaderLessModule.php
@@ -44,7 +44,8 @@
$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 {
diff --git a/print.less b/print.less
index c518577..62c5cd1 100644
--- a/print.less
+++ b/print.less
@@ -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;
}
}
}
--
To view, visit https://gerrit.wikimedia.org/r/370221
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I788bcecadf26e4e5558b5b37e6fb1b2e9378277e
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/skins/Vector
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Niedzielski <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
