jenkins-bot has submitted this change and it was merged.
Change subject: WPB fake banner cropping for small screens
......................................................................
WPB fake banner cropping for small screens
On screen size below 400px, make the banners exceed 100% width so that a
cropping effect can be faked, by hiding overflow on container div and defining
focus parameters.
Adds a parameter 'origin' to {{PAGEBANNER}} which specifies focus as a
coordinate. Default focus is on centre of banner. Example usage is
origin=0.2,0.4 where 1st value is x parameter and 2nd is y parameter. Allowed
values are between 0 and 1.
Drop 320 size from standardSizes as banner height at that size too small.
Bug: T105033
Change-Id: Ifd696117d4614389685945ad3853a473179c2c03
---
M extension.json
M includes/WikidataPageBanner.functions.php
M includes/WikidataPageBanner.hooks.php
M resources/ext.WikidataPageBanner.styles/ext.WikidataPageBanner.less
M templates/banner.mustache
5 files changed, 86 insertions(+), 2 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index ab4ff9d..cb7d6d3 100644
--- a/extension.json
+++ b/extension.json
@@ -74,7 +74,6 @@
0
],
"WPBStandardSizes": [
- 320,
640,
1280,
2560
diff --git a/includes/WikidataPageBanner.functions.php
b/includes/WikidataPageBanner.functions.php
index fd059c2..77d191e 100644
--- a/includes/WikidataPageBanner.functions.php
+++ b/includes/WikidataPageBanner.functions.php
@@ -44,4 +44,43 @@
}
}
}
+
+ /**
+ * Sets focus parameter on banner templates to shift focus on banner
when cropped
+ * @param array $paramsForBannerTemplate Parameters defined for banner
template
+ * @param array $argumentsFromParserFunction Arguments passed to
{{PAGEBANNER}} function
+ * @return
+ */
+ public static function addFocus( &$paramsForBannerTemplate,
$argumentsFromParserFunction ) {
+ // default centering would be 0, and -1 would represent extreme
left and extreme top
+ // Allowed values for each coordinate is between 0 and 1
+ $paramsForBannerTemplate['data-pos-x'] = 0;
+ $paramsForBannerTemplate['data-pos-y'] = 0;
+ if ( isset( $argumentsFromParserFunction['origin'] ) ) {
+ // split the origin into x and y coordinates
+ $coords = explode( ',',
$argumentsFromParserFunction['origin'] );
+ if ( count ( $coords ) === 2 ) {
+ $positionx = $coords[0];
+ $positiony = $coords[1];
+ // TODO:Add a js module to use the data-pos
values being set below to fine tune the
+ // position of the banner to emulate a
coordinate system.
+ if ( filter_var( $positionx,
FILTER_VALIDATE_FLOAT ) !== false ) {
+ if ( $positionx >= -1 && $positionx <=
1 ) {
+
$paramsForBannerTemplate['data-pos-x'] = $positionx;
+ if ( $positionx <= -0.25 ) {
+ // these are classes to
be added in case js is disabled
+
$paramsForBannerTemplate['originx'] = 'wpb-left';
+ } elseif ( $positionx >= 0.25 )
{
+
$paramsForBannerTemplate['originx'] = 'wpb-right';
+ }
+ }
+ }
+ if ( filter_var( $positiony,
FILTER_VALIDATE_FLOAT ) !== false ) {
+ if ( $positiony >= -1 && $positiony <=
1 ) {
+
$paramsForBannerTemplate['data-pos-y'] = $positiony;
+ }
+ }
+ }
+ }
+ }
}
diff --git a/includes/WikidataPageBanner.hooks.php
b/includes/WikidataPageBanner.hooks.php
index 6465701..4df78c1 100644
--- a/includes/WikidataPageBanner.hooks.php
+++ b/includes/WikidataPageBanner.hooks.php
@@ -145,6 +145,8 @@
$argumentsFromParserFunction );
WikidataPageBannerFunctions::addIcons(
$paramsForBannerTemplate,
$argumentsFromParserFunction );
+ WikidataPageBannerFunctions::addFocus(
$paramsForBannerTemplate,
+ $argumentsFromParserFunction );
$paramsForBannerTemplate['name'] = $bannername;
// Set 'wpb-banner-options' property for generating
banner later
$parser->getOutput()->setProperty(
'wpb-banner-options', $paramsForBannerTemplate );
diff --git
a/resources/ext.WikidataPageBanner.styles/ext.WikidataPageBanner.less
b/resources/ext.WikidataPageBanner.styles/ext.WikidataPageBanner.less
index c9a9cf6..ed938c9 100644
--- a/resources/ext.WikidataPageBanner.styles/ext.WikidataPageBanner.less
+++ b/resources/ext.WikidataPageBanner.styles/ext.WikidataPageBanner.less
@@ -2,6 +2,13 @@
* Stylesheet for page-wide Banner in WikidataPageBanner extension.
*/
@import "mediawiki.mixins";
+.transform ( ... ) {
+ -webkit-transform: @arguments;
+ -moz-transform: @arguments;
+ -o-transform: @arguments;
+ transform: @arguments;
+}
+
.ext-wpb-pagebanner {
width:100%;
}
@@ -56,3 +63,40 @@
font-size: 1em;
}
}
+
+// banner enlargement and faking banner cropping for small screens
+@media screen and ( max-width: 400px ) {
+ .wpb-topbanner {
+ overflow: hidden;
+ // rule for banners whose height may be much due to a different
aspect ratio other than
+ // Wikivoyage banners
+ max-height: 300px;
+
+ .wpb-banner-image {
+ // this rule overrides the max-width:100% rule for
images in Skin Minerva so that banner
+ // can be increased in size for increasing the height
accordingly. The overflowing
+ // banner is cropped by setting overflow hidden on
containing element
+ max-width: none !important;
+ width: auto;
+ // Set min height to no more than 100px so that atleast
a 3:1 aspect ratio of banners is
+ // kept(screen width is around 300px-400px)
+ min-height: 100px;
+ // centre the banner by default
+ margin-left: 50%;
+ .transform ( translateX( -50% ) );
+ }
+
+ /**
+ * The rules below define custom positioning for banner in case
the cropped banner needs to be
+ * shifted to allow focus to a different area
+ */
+
+ .wpb-left{
+ .transform ( translateX( -25% ) );
+ }
+
+ .wpb-right{
+ .transform ( translateX( -75% ) );
+ }
+ }
+}
diff --git a/templates/banner.mustache b/templates/banner.mustache
index a10996a..e6e9c62 100644
--- a/templates/banner.mustache
+++ b/templates/banner.mustache
@@ -1,7 +1,7 @@
<div class="ext-wpb-pagebanner noprint">
<div class="wpb-topbanner">
<div class="wpb-name">{{title}}</div>
- <a title="{{tooltip}}" href="{{bannerfile}}"><img
src="{{banner}}" srcset="{{srcset}}" class="wpb-banner-image"></a>
+ <a title="{{tooltip}}" href="{{bannerfile}}"><img
src="{{banner}}" srcset="{{srcset}}" class="wpb-banner-image {{originx}}"
data-pos-x="{{data-pos-x}}" data-pos-y="{{data-pos-y}}"></a>
{{#hasIcons}}
<div class="wpb-iconbox">
{{#icons}}
--
To view, visit https://gerrit.wikimedia.org/r/228813
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ifd696117d4614389685945ad3853a473179c2c03
Gerrit-PatchSet: 7
Gerrit-Project: mediawiki/extensions/WikidataPageBanner
Gerrit-Branch: master
Gerrit-Owner: Sumit <asthana.sumi...@gmail.com>
Gerrit-Reviewer: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Legoktm <legoktm.wikipe...@gmail.com>
Gerrit-Reviewer: Sumit <asthana.sumi...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
