jenkins-bot has submitted this change and it was merged.
Change subject: Restyle banner image and page title on tablet
......................................................................
Restyle banner image and page title on tablet
* max width cropped to 768, centered
* image cropped to 21/9
* Detect the resolution of lead image, if smaller than 768 px width do
not show in large crop at top.
* title text increased to 42 px
* no underline under title
* infobox will remain to the right of lead section. max-width 320
* margin 30 px between image and title
* image crop: top anchored to 1/5 from the top
Change-Id: I7cad9546ca9c932b071b920ba85e0f560f5d7eb2
---
M javascripts/modules/bannerImage/BannerImage.js
M javascripts/modules/bannerImage/init.js
M less/minerva.less/minerva.variables.less
M less/modules/bannerImage.less
M less/tablet/common.less
5 files changed, 25 insertions(+), 15 deletions(-)
Approvals:
Phuedx: Looks good to me, approved
jenkins-bot: Verified
diff --git a/javascripts/modules/bannerImage/BannerImage.js
b/javascripts/modules/bannerImage/BannerImage.js
index adae706..0c85326 100644
--- a/javascripts/modules/bannerImage/BannerImage.js
+++ b/javascripts/modules/bannerImage/BannerImage.js
@@ -5,7 +5,8 @@
View = M.require( 'View' ),
config = mw.config.get( 'wgWikiBasePropertyConfig' ),
icons = M.require( 'icons' ),
- ratio = 16 / 9;
+ browser = M.require( 'browser' ),
+ ratio = ( browser.isWideScreen() ) ? 21 / 9 : 16 / 9;
/**
* Gets a width that is close to the current screen width
@@ -84,6 +85,7 @@
/**
* Try to load image and resolve or fail when it loads / or not.
+ * On tablets don't resolve images that are less than 768px wide.
* @returns {jQuery.Deferred}
*/
HeaderImage.prototype.load = function () {
@@ -96,9 +98,13 @@
$( '<img>' )
.attr( 'src', this.src )
.load( function () {
- self.setDimensions( $( this ).width(), $( this
).height() );
+ if ( browser.isWideScreen() && $( this
).width() < 768 ) {
+ loaded.reject();
+ } else {
+ self.setDimensions( $( this ).width(),
$( this ).height() );
+ loaded.resolve( self );
+ }
$( this ).remove();
- loaded.resolve( self );
} )
.error( function () {
$( this ).remove();
@@ -280,7 +286,7 @@
resizeImage: function () {
this.$el
.css( {
- // Maintain 16:9 ratio
+ // Maintain 21:9 (on tablet or bigger)
or 16:9 ratio
// Max height is enforced with CSS
height: this.$el.width() * ( 1 / ratio )
} );
diff --git a/javascripts/modules/bannerImage/init.js
b/javascripts/modules/bannerImage/init.js
index 289c41d..6d9bfa3 100644
--- a/javascripts/modules/bannerImage/init.js
+++ b/javascripts/modules/bannerImage/init.js
@@ -2,15 +2,12 @@
M.require( 'context' ).assertMode( [ 'alpha' ] );
var bannerImage,
page = M.getCurrentPage(),
- browser = M.require( 'browser' ),
wikidataID = mw.config.get( 'wgWikibaseItemId' ),
BannerImage = M.require( 'modules/bannerImage/BannerImage' );
// Load banner images on mobile devices
// On pages in the main space which are not main pages
if (
- // MobileDevice
- !browser.isWideScreen() &&
// Set item id or specified in url with query param
(wikidataid=Q937)
wikidataID &&
!page.isMainPage() &&
@@ -19,6 +16,6 @@
bannerImage = new BannerImage( {
itemId: wikidataID
} );
- bannerImage.insertBefore( '#page-actions' );
+ bannerImage.insertBefore( '.pre-content' );
}
}( mw.mobileFrontend ) );
diff --git a/less/minerva.less/minerva.variables.less
b/less/minerva.less/minerva.variables.less
index 897ad9e..194ce2c 100644
--- a/less/minerva.less/minerva.variables.less
+++ b/less/minerva.less/minerva.variables.less
@@ -87,7 +87,7 @@
@searchBoxColorTo: darken( @searchBoxColor, 2.75% );
// Wiki specific variables
-@infoboxWidth: 400px;
+@infoboxWidth: 320px;
// z-index definitions (see bug 64707)
@z-indexBase: 0;
diff --git a/less/modules/bannerImage.less b/less/modules/bannerImage.less
index c9d69d7..ac1a2f3 100644
--- a/less/modules/bannerImage.less
+++ b/less/modules/bannerImage.less
@@ -7,7 +7,7 @@
height: 360px;
max-height: 360px;
display: none;
- background-position-x: center;
+ background-position: 50% 20%;
background-repeat: no-repeat;
.background-size( e(''), cover);
position: relative;
@@ -21,3 +21,9 @@
padding: 0 8px;
}
}
+@media all and (min-width: @wgMFDeviceWidthTablet) {
+ .wikidata-banner-image {
+ max-width: @wgMFDeviceWidthTablet;
+ margin: 0 auto;
+ }
+}
diff --git a/less/tablet/common.less b/less/tablet/common.less
index 414064c..840d911 100644
--- a/less/tablet/common.less
+++ b/less/tablet/common.less
@@ -21,19 +21,20 @@
padding: 20px @contentPaddingTablet 0 @contentPaddingTablet;
#section_0 {
- border-bottom: 1px solid @sectionBorderColor;
+ border-bottom: none;
// FIXME: After this and the new page-action CSS below
are promoted to stable,
// move page-actions before the h1 in the DOM, remove
the 220px padding on the
// header, and change the absolute positioning of
page-actions to float.
- padding: 12px 220px 7px 0;
+ padding: 0 220px 7px 0;
+ font-size: 2.6525em; // 42px
}
}
#page-actions {
border: none;
- padding: 36px @contentPaddingTablet 0 0;
position: absolute;
- right: 0;
- top: 0;
+ right: @contentPaddingTablet;
+ top: 36px;
+ padding: 0;
// FIXME: Remove when mw-ui-icon in stable
li.icon {
margin: 0 0 0 16px;
--
To view, visit https://gerrit.wikimedia.org/r/189605
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I7cad9546ca9c932b071b920ba85e0f560f5d7eb2
Gerrit-PatchSet: 7
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>
Gerrit-Reviewer: Bmansurov <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
