Bmansurov has uploaded a new change for review.
https://gerrit.wikimedia.org/r/189605
Change subject: Restyle banner image and page title on tablet
......................................................................
Restyle banner image and page title on tablet
* Promote banner image to beta
* image cropped to 21/9
* max width cropped to 768, centered
* 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 includes/Resources.php
M includes/skins/SkinMinervaAlpha.php
M includes/skins/SkinMinervaBeta.php
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
8 files changed, 43 insertions(+), 19 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/05/189605/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 3695b23..277f1eb 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -1668,6 +1668,10 @@
// load code under certain conditions.
'mobile.preferredLanguages',
'mobile.references.beta',
+ 'mobile.bannerImage',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/bannerImage/init.js',
),
),
'mobile.alpha' => $wgMFResourceFileModuleBoilerplate + array(
@@ -1675,7 +1679,6 @@
'mobile.beta',
// Feature modules that should be loaded in alpha
should be listed below here.
'mobile.infobox',
- 'mobile.bannerImage',
'mobile.fontchanger',
'mobile.wikigrok.roulette',
'mobile.errorReport',
@@ -1684,7 +1687,6 @@
'scripts' => array(
'javascripts/modules/commonsCategory/init.js',
'javascripts/modules/infobox/init.js',
- 'javascripts/modules/bannerImage/init.js',
'javascripts/modules/projects/init.js',
)
),
diff --git a/includes/skins/SkinMinervaAlpha.php
b/includes/skins/SkinMinervaAlpha.php
index 474c1e6..11e743a 100644
--- a/includes/skins/SkinMinervaAlpha.php
+++ b/includes/skins/SkinMinervaAlpha.php
@@ -80,7 +80,6 @@
$vars = parent::getSkinConfigVariables();
$vars['wgMFEditorOptions']['anonymousEditing'] = true;
$vars['wgMFDescription'] = $this->getOutput()->getProperty(
'wgMFDescription' );
- $vars['wgWikiBasePropertyConfig'] = $config->get(
'WikiBasePropertyConfig' );
$vars['wgMFInfoboxConfig'] = $config->get( 'MFInfoboxConfig' );
$vars['wgMFShowRedLinks'] = true;
diff --git a/includes/skins/SkinMinervaBeta.php
b/includes/skins/SkinMinervaBeta.php
index e33c037..0afd843 100644
--- a/includes/skins/SkinMinervaBeta.php
+++ b/includes/skins/SkinMinervaBeta.php
@@ -113,6 +113,19 @@
}
/**
+ * Get various skin specific configuration.
+ * @return array
+ */
+ public function getSkinConfigVariables() {
+ $config = $this->getMFConfig();
+
+ $vars = parent::getSkinConfigVariables();
+ $vars['wgWikiBasePropertyConfig'] = $config->get(
'WikiBasePropertyConfig' );
+
+ return $vars;
+ }
+
+ /**
* Handles new pages to show error message and print message, that page
does not exist.
* @param OutputPage $out
*/
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..4b150f8 100644
--- a/javascripts/modules/bannerImage/init.js
+++ b/javascripts/modules/bannerImage/init.js
@@ -1,16 +1,13 @@
( function ( M ) {
- M.require( 'context' ).assertMode( [ 'alpha' ] );
+ M.require( 'context' ).assertMode( [ 'alpha', 'beta' ] );
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 3484fa5..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: 50% 50%;
+ 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: newchange
Gerrit-Change-Id: I7cad9546ca9c932b071b920ba85e0f560f5d7eb2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
