Sumit has uploaded a new change for review.
https://gerrit.wikimedia.org/r/228813
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 'hfocus' to {{PAGEBANNER}} which specifies horizontal focus as
a multiple of 1/8th width of banner. Allowed values are 0,1,2,3.
For example,setting hfocus=2 would shift the banner left by 25% thereby shifting
the focus.
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.minerva.less
M templates/banner.mustache
5 files changed, 62 insertions(+), 2 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/WikidataPageBanner
refs/changes/13/228813/1
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..72f9060 100644
--- a/includes/WikidataPageBanner.functions.php
+++ b/includes/WikidataPageBanner.functions.php
@@ -44,4 +44,24 @@
}
}
}
+
+ /**
+ * 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 ) {
+ if ( isset( $argumentsFromParserFunction['hfocus'] ) ) {
+ // only 3 focus values allowed
+ $options = array(
+ 'options' => array( 'min_range' => 0,
'max_range' => 3 )
+ );
+ if ( filter_var(
$argumentsFromParserFunction['hfocus'], FILTER_VALIDATE_INT,
+ $options ) ) {
+ $paramsForBannerTemplate['hfocus'] =
'wpb-left-' .
+ $argumentsFromParserFunction['hfocus'];
+ }
+ }
+ }
}
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.minerva.less
b/resources/ext.WikidataPageBanner.styles/ext.WikidataPageBanner.minerva.less
index 3f747f1..8e6d722 100644
---
a/resources/ext.WikidataPageBanner.styles/ext.WikidataPageBanner.minerva.less
+++
b/resources/ext.WikidataPageBanner.styles/ext.WikidataPageBanner.minerva.less
@@ -10,3 +10,42 @@
.ext-wpb-pagebanner {
clear: both;
}
+
+// banner enlargement and faking banner cropping for small screens
+@media screen and ( max-width: 400px ) {
+ .wpb-topbanner {
+ .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: 150% !important;
+ width: 150%;
+ margin-left: -25%;
+ }
+
+ /**
+ * 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-0 {
+ margin-left: 0;
+ }
+
+ .wpb-left-1 {
+ margin-left: -12.5%;
+ }
+
+ .wpb-left-2 {
+ margin-left: -25%;
+ }
+
+ .wpb-left-3 {
+ margin-left: -37.5%;
+ }
+ }
+
+ // this hides the excess portion of banner
+ .ext-wpb-pagebanner {
+ overflow-x: hidden;
+ }
+}
diff --git a/templates/banner.mustache b/templates/banner.mustache
index a10996a..ee12c7e 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 {{hfocus}}"></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: newchange
Gerrit-Change-Id: Ifd696117d4614389685945ad3853a473179c2c03
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/WikidataPageBanner
Gerrit-Branch: master
Gerrit-Owner: Sumit <asthana.sumi...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
