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