Phuedx has uploaded a new change for review.
https://gerrit.wikimedia.org/r/192789
Change subject: Tweak banner image aspect ratio
......................................................................
Tweak banner image aspect ratio
* If the device is a tablet - minimum possible resolution greater than
768px - then always display the banner image in 21:9
* If the device is in landscape mode, then display the banner image in
21:9
* 16:9 otherwise
Change-Id: I62933865e32d1ab75fb55a1762c789cf9ecce306
---
M javascripts/modules/bannerImage/BannerImage.js
1 file changed, 25 insertions(+), 5 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/89/192789/1
diff --git a/javascripts/modules/bannerImage/BannerImage.js
b/javascripts/modules/bannerImage/BannerImage.js
index aabfc42..0ea6e96 100644
--- a/javascripts/modules/bannerImage/BannerImage.js
+++ b/javascripts/modules/bannerImage/BannerImage.js
@@ -1,8 +1,29 @@
( function ( M, $ ) {
var BannerImage,
View = M.require( 'View' ),
- browser = M.require( 'browser' ),
- ratio = ( browser.isWideScreen() ) ? 21 / 9 : 16 / 9;
+ browser = M.require( 'browser' );
+
+ /**
+ * Gets the aspect ratio of the banner image.
+ *
+ * On a tablet device or larger, maintain a 21:9 ratio, otherwise 16:9.
+ *
+ * @ignore
+ *
+ * @return {Number}
+ */
+ function getAspectRatio() {
+ if (
+ browser.isWideScreen() ||
+
+ // TODO: Shouldn't this be Device.isLandscape?
+ ( window.innerHeight < window.innerWidth ) // Landscape?
+ ) {
+ return 21 / 9;
+ }
+
+ return 16 / 9;
+ }
/**
* A banner image at the head of the page
@@ -80,14 +101,13 @@
},
/**
- * Resize the frame to maintain aspect a 16:9 aspect ratio.
+ * Resize the frame to maintain the aspect ratio.
*/
resizeFrame: function () {
this.$el
.css( {
- // Maintain 21:9 (on tablet or bigger)
or 16:9 ratio
// Max height is enforced with CSS
- height: this.$el.width() * ( 1 / ratio )
+ height: this.$el.width() * ( 1 /
getAspectRatio() )
} );
}
} );
--
To view, visit https://gerrit.wikimedia.org/r/192789
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I62933865e32d1ab75fb55a1762c789cf9ecce306
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Phuedx <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
