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