Bmansurov has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/359494 )
Change subject: Adjust the main menu width
......................................................................
Adjust the main menu width
* The main menu occupies 75% of the viewport width or 600px,
whichever is smaller.
* The dismiss area occupies 25% of the viewport width or 50px,
whichever is larger.
* Make sure that the dismiss area is always visible when the
viewport is resized.
Bug: T152071
Change-Id: Ib5a74decd1924487f3137b1611acd2436a53c80f
---
M resources/mobile.startup/Skin.js
M resources/skins.minerva.mainMenu.styles/mainmenu.less
M resources/skins.minerva.mainMenu/MainMenu.js
3 files changed, 60 insertions(+), 11 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/94/359494/1
diff --git a/resources/mobile.startup/Skin.js b/resources/mobile.startup/Skin.js
index 397e9da..800f972 100644
--- a/resources/mobile.startup/Skin.js
+++ b/resources/mobile.startup/Skin.js
@@ -154,6 +154,7 @@
// FIXME: Move back into events when T98200 resolved
this.$( '#mw-mf-page-center' ).on( 'click',
$.proxy( this, '_onPageCenterClick' ) );
+ M.on( 'resize:throttled', $.proxy( this,
'adjustMainMenuWidth' ) );
},
/**
@@ -165,6 +166,17 @@
},
/**
+ * Resize main menu width if it's already open
+ */
+ adjustMainMenuWidth: function () {
+ var mainMenu = this.getMainMenu();
+
+ if ( mainMenu.isOpen() ) {
+ mainMenu.setWidth();
+ }
+ },
+
+ /**
* Load images on demand
* @param {jQuery.Object} [$container] The container that
should be
* searched for image placeholders. Defaults to "#content".
diff --git a/resources/skins.minerva.mainMenu.styles/mainmenu.less
b/resources/skins.minerva.mainMenu.styles/mainmenu.less
index d225405..0c1e332 100644
--- a/resources/skins.minerva.mainMenu.styles/mainmenu.less
+++ b/resources/skins.minerva.mainMenu.styles/mainmenu.less
@@ -154,8 +154,6 @@
background: #fff;
position: absolute;
height: 100%;
- // Overriden in mainmenuAnimation
- left: @menuWidth;
}
.navigation-drawer,
@@ -172,10 +170,6 @@
.primary-navigation-enabled {
background-color: @primaryNavBackgroundColor;
-
- nav {
- width: @menuWidth;
- }
// FIXME: Menu shouldn't need to know about drawers but a cta drawer
might be open
.drawer .position-fixed {
@@ -216,8 +210,6 @@
}
nav {
- width: @menuWidth;
-
.transition( visibility 0s @duration );
}
@@ -245,8 +237,7 @@
.primary-navigation-enabled.animations {
// FIXME: Menu shouldn't need to know about drawers
- .drawer .position-fixed,
- #mw-mf-page-center {
+ .drawer .position-fixed {
// override non-animated version
left: 0 !important;
.transform( translate( @menuWidth, 0 ) );
diff --git a/resources/skins.minerva.mainMenu/MainMenu.js
b/resources/skins.minerva.mainMenu/MainMenu.js
index 5a45472..9fd3036 100644
--- a/resources/skins.minerva.mainMenu/MainMenu.js
+++ b/resources/skins.minerva.mainMenu/MainMenu.js
@@ -1,6 +1,7 @@
( function ( M, $ ) {
var browser = M.require( 'mobile.startup/Browser' ).getSingleton(),
- View = M.require( 'mobile.startup/View' );
+ View = M.require( 'mobile.startup/View' ),
+ $pageCenter = $( '#mw-mf-page-center' );
/**
* Representation of the main menu
@@ -134,6 +135,10 @@
* Close all open navigation drawers
*/
closeNavigationDrawers: function () {
+ if ( this.isOpen() ) {
+ this.unsetWidth();
+ }
+
// FIXME: We should be moving away from applying
classes to the body
$( 'body' ).removeClass( 'navigation-enabled' )
.removeClass( 'secondary-navigation-enabled' )
@@ -152,10 +157,51 @@
// FIXME: We should be moving away from applying
classes to the body
$( 'body' ).toggleClass( 'navigation-enabled' )
.toggleClass( drawerType +
'-navigation-enabled' );
+
+ if ( drawerType === 'primary' ) {
+ this.setWidth();
+ }
+
/**
* @event open emitted when navigation drawer is opened
*/
this.emit( 'open' );
+ },
+
+ /**
+ * Set main menu width
+ *
+ * The main menu occupies 75% of the viewport width or 600px,
+ * whichever is smaller.
+ * The dismiss area occupies 25% of the viewport width or 50px,
+ * whichever is larger.
+ */
+ setWidth: function () {
+ var windowWidth = $( window ).width(),
+ shieldMinWidth = 50,
+ menuWidth = Math.floor( windowWidth * 0.75 -
+ Math.max( 0, shieldMinWidth -
windowWidth * 0.25 ) );
+
+ menuWidth = Math.min( menuWidth, 600 ) + 'px';
+
+ $( 'nav' ).css( 'width', menuWidth );
+
+ if ( $( 'body' ).hasClass( 'animations' ) ) {
+ $pageCenter.css( 'transform', 'translateX( ' +
menuWidth + ' )' );
+ } else {
+ $pageCenter.css( 'left', menuWidth );
+ }
+ },
+
+ /**
+ * Unset main menu width
+ */
+ unsetWidth: function () {
+ if ( $( 'body' ).hasClass( 'animations' ) ) {
+ $pageCenter.css( 'transform', '' );
+ } else {
+ $pageCenter.css( 'left', 0 );
+ }
}
} );
--
To view, visit https://gerrit.wikimedia.org/r/359494
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib5a74decd1924487f3137b1611acd2436a53c80f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <bmansu...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
