Jdlrobson has uploaded a new change for review. https://gerrit.wikimedia.org/r/217735
Change subject: Fix black bar in header on older devices ...................................................................... Fix black bar in header on older devices Children of display table-cell cannot be absolutely positioned in older browsers (see http://davidwalsh.name/table-cell-position-absolute) Thus wrap them in div's Bug: T98498 Change-Id: I8987fd4eece575ee1a0cf2e4392525215cb188ab --- M includes/skins/MinervaTemplate.php M includes/skins/SkinMinerva.php M includes/skins/header.mustache M resources/mobile.head/init.js M resources/mobile.notifications/init.js M resources/skins.minerva.alpha.styles/ui.alpha.less M resources/skins.minerva.base.styles/ui.less M resources/skins.minerva.tablet.beta.styles/common.less 8 files changed, 28 insertions(+), 12 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend refs/changes/35/217735/1 diff --git a/includes/skins/MinervaTemplate.php b/includes/skins/MinervaTemplate.php index aa0e339..030fafc 100644 --- a/includes/skins/MinervaTemplate.php +++ b/includes/skins/MinervaTemplate.php @@ -373,9 +373,11 @@ * @return string */ protected function getHeaderHtml( $data ) { - return $data['menuButton'] + // Note these should be wrapped in divs + // see https://phabricator.wikimedia.org/T98498 for details + return '<div>' . $data['menuButton'] . '</div>' . $this->getChromeHeaderContentHtml( $data ) - . $data['secondaryButton']; + . '<div>' . $data['secondaryButton'] . '</div>'; } /** diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php index a5eca0b..126b796 100644 --- a/includes/skins/SkinMinerva.php +++ b/includes/skins/SkinMinerva.php @@ -279,12 +279,12 @@ array( 'class' => 'label' ), $title ) . + Html::closeElement( 'a' ) . Html::element( 'span', array( 'class' => $spanClass ), $spanLabel - ) . - Html::closeElement( 'a' ); + ); } /** diff --git a/includes/skins/header.mustache b/includes/skins/header.mustache index 27c04d7..1bdee28 100644 --- a/includes/skins/header.mustache +++ b/includes/skins/header.mustache @@ -1,4 +1,6 @@ -<a class="{{mobileMenuClass}}" href="{{mobileMenuLink}}">{{mobileMenuTitle}}</a> +<div> + <a class="{{mobileMenuClass}}" href="{{mobileMenuLink}}">{{mobileMenuTitle}}</a> +</div> <div class="header-title"> <a href="{{mobileMenuLink}}">{{{siteName}}}</a> </div> diff --git a/resources/mobile.head/init.js b/resources/mobile.head/init.js index 89b185a..2d87ed9 100644 --- a/resources/mobile.head/init.js +++ b/resources/mobile.head/init.js @@ -89,6 +89,11 @@ // Stop propagation, otherwise the Skin will close the open menus on page center click ev.stopPropagation(); } ); + + // FIXME: Remove when cache cleared (https://phabricator.wikimedia.org/T98498) + $( '.header > a' ).each( function () { + $( this ).wrap( '<div>' ); + } ); } ); $( function () { diff --git a/resources/mobile.notifications/init.js b/resources/mobile.notifications/init.js index 4cfbdef..e3e337c 100644 --- a/resources/mobile.notifications/init.js +++ b/resources/mobile.notifications/init.js @@ -6,7 +6,7 @@ var MobileWebClickTracking = M.require( 'loggingSchemas/SchemaMobileWebClickTracking' ), uiSchema = new MobileWebClickTracking( {}, 'MobileWebUIClickTracking' ), mainMenu = M.require( 'skin' ).getMainMenu(), - $btn = $( '#secondary-button.user-button' ), + $btn = $( '#secondary-button.user-button' ).parent(), router = M.require( 'router' ), overlayManager = M.require( 'overlayManager' ), icons = M.require( 'icons' ); diff --git a/resources/skins.minerva.alpha.styles/ui.alpha.less b/resources/skins.minerva.alpha.styles/ui.alpha.less index dd9eed3..558b0ff 100644 --- a/resources/skins.minerva.alpha.styles/ui.alpha.less +++ b/resources/skins.minerva.alpha.styles/ui.alpha.less @@ -37,14 +37,15 @@ background-color: #fff; position: relative; - > .header-title { + .header-title { // align the text in the middle regardless of whether the notification icon exists or not bottom: 0; - left: @headerHeight; + left: 0; position: absolute; - right: @headerHeight; + right: 0; text-align: center; top: 0; + width: auto; a { display: block; line-height: @headerHeight; diff --git a/resources/skins.minerva.base.styles/ui.less b/resources/skins.minerva.base.styles/ui.less index 7cafad5..40282b4 100644 --- a/resources/skins.minerva.base.styles/ui.less +++ b/resources/skins.minerva.base.styles/ui.less @@ -45,12 +45,12 @@ border-top: 1px solid @colorGrayLight; margin-top: -1px; - > a { + // button + > div { width: @headerHeight; + position: relative; } - // Left and right menu links - > a, // Search field > form, // Spinner @@ -59,6 +59,11 @@ display: table-cell; } + // Menu and notifications button + > div a { + display: block; + } + // Search > form { padding: .15em @headerTitlePaddingH 0; diff --git a/resources/skins.minerva.tablet.beta.styles/common.less b/resources/skins.minerva.tablet.beta.styles/common.less index a2fba42..f0de6f6 100644 --- a/resources/skins.minerva.tablet.beta.styles/common.less +++ b/resources/skins.minerva.tablet.beta.styles/common.less @@ -16,6 +16,7 @@ // so that the icon image is aligned with the content left: -@iconGutterWidth; } + #secondary-button { // so that the icon image is aligned with the content right: -@iconGutterWidth; -- To view, visit https://gerrit.wikimedia.org/r/217735 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I8987fd4eece575ee1a0cf2e4392525215cb188ab Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MobileFrontend Gerrit-Branch: wmf/1.26wmf9 Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
