Jdlrobson has uploaded a new change for review. https://gerrit.wikimedia.org/r/66277
Change subject: Alpha: Introduce a page banner concept on tablets and desktop Minerva skin ...................................................................... Alpha: Introduce a page banner concept on tablets and desktop Minerva skin TODO: Currently the page banner is not configurable by editors. It's hoped that it can be with enough interest. This is being used on Wikivoyage - https://en.wikivoyage.org/wiki/Rotterdam Change-Id: Ib58e4818138f8611e4649d6453b6c83f0e4fa307 --- M MobileFrontend.php M includes/Resources.php M includes/skins/MinervaTemplate.php M includes/skins/SkinMinerva.php M includes/skins/SkinMobile.php M includes/skins/SkinMobileBase.php M less/common/pageactions.less A less/tablet/common.less M stylesheets/common/pageactions.css A stylesheets/tablet/common.css 10 files changed, 140 insertions(+), 2 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend refs/changes/77/66277/1 diff --git a/MobileFrontend.php b/MobileFrontend.php index 423b241..18b542c 100644 --- a/MobileFrontend.php +++ b/MobileFrontend.php @@ -383,3 +383,14 @@ * @var bool */ $wgMFEnableCssAnimations = true; + +/** + * Minerva specific variables +**/ + +/** + * Defines a default page banner to be used when no other banner has been defined by an editor + * Currently mobile alpha mode only + * @var String + */ +$wgMinervaDefaultPageBanner = 'http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png'; diff --git a/includes/Resources.php b/includes/Resources.php index d136d08..f336aa8 100644 --- a/includes/Resources.php +++ b/includes/Resources.php @@ -135,6 +135,13 @@ 'position' => 'top', ), + 'minerva.tablet' => $wgMFMobileResourceBoilerplate + array( + 'position' => 'top', + 'styles' => array( + 'stylesheets/tablet/common.css', + ), + ), + 'mobile.styles.beta' => $wgMFMobileResourceBoilerplate + array( 'styles' => array( 'stylesheets/common/pageactions.css', diff --git a/includes/skins/MinervaTemplate.php b/includes/skins/MinervaTemplate.php index 94f90d2..23f9b24 100644 --- a/includes/skins/MinervaTemplate.php +++ b/includes/skins/MinervaTemplate.php @@ -83,6 +83,8 @@ } protected function render( $data ) { // FIXME: replace with template engines + $topBannerEnabled = $data['_enableTopBanner']; + $isSpecialPage = $this->getSkin()->getTitle()->isSpecialPage(); $languages = $this->getLanguages(); $variants = $this->getLanguageVariants(); @@ -147,11 +149,24 @@ <ul id="mw-mf-menu-page"></ul> </div> <div class='show' id='content_wrapper'> + <?php + if ( $topBannerEnabled ) { + echo Html::openElement( 'div', + array( 'class' => 'top-banner' ) + ); + echo Html::element( 'img', $data['topbanner'] ); + echo $data['prebodytext']; + $this->renderPageActions( $data ); + echo Html::closeElement( 'div' ); + } + ?> <div id="content" class="content"> <?php if ( !$isSpecialPage ) { - echo $data['prebodytext']; - $this->renderPageActions( $data ); + if ( !$topBannerEnabled ) { + echo $data['prebodytext']; + $this->renderPageActions( $data ); + } } echo $data[ 'bodytext' ]; echo $this->renderLanguages( $languageData ); diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php index f3830a0..7c572bc 100644 --- a/includes/skins/SkinMinerva.php +++ b/includes/skins/SkinMinerva.php @@ -78,6 +78,8 @@ } $tpl->set( 'banners', $banners ); $tpl->set( 'page_actions', array() ); + + $tpl->set( '_enableTopBanner', false ); } /** diff --git a/includes/skins/SkinMobile.php b/includes/skins/SkinMobile.php index 0c33870..0a857de 100644 --- a/includes/skins/SkinMobile.php +++ b/includes/skins/SkinMobile.php @@ -25,6 +25,7 @@ $mode = 'beta'; } if ( $inAlpha ) { + $out->addModuleStyles( 'minerva.tablet' ); $modules['alpha'] = array( 'mobile.alpha' ); $mode = 'alpha'; } diff --git a/includes/skins/SkinMobileBase.php b/includes/skins/SkinMobileBase.php index 1888c01..7cdb6dc 100644 --- a/includes/skins/SkinMobileBase.php +++ b/includes/skins/SkinMobileBase.php @@ -11,11 +11,18 @@ private $pageClassNames = array(); public function prepareData( BaseTemplate $tpl ) { + global $wgMinervaDefaultPageBanner; + parent::prepareData( $tpl ); $context = MobileContext::singleton(); $menuHeaders = true; $search = $tpl->data['searchBox']; if ( $context->isAlphaGroupMember() ) { + $tpl->set( '_enableTopBanner', true ); + $tpl->set( 'topbanner', array( + 'src' => $wgMinervaDefaultPageBanner, + ) + ); $search['placeholder'] = wfMessage( 'mobile-frontend-placeholder-alpha' )->escaped(); } else if ( $context->isBetaGroupMember() ) { $search['placeholder'] = wfMessage( 'mobile-frontend-placeholder-beta' )->escaped(); diff --git a/less/common/pageactions.less b/less/common/pageactions.less index df614ad..f7cd798 100644 --- a/less/common/pageactions.less +++ b/less/common/pageactions.less @@ -7,6 +7,12 @@ display: none; } +.top-banner { + #mw-mf-page-actions { + margin: 0; + } +} + #mw-mf-page-actions { // FIXME: negative margin hacks margin: 0 -@contentMarginRight @headingMarginBottom -@contentMarginRight; @@ -25,6 +31,8 @@ button, input, a { + border: none; + background-color: transparent; width: 40px; // undo rules set in watchlist / nearby lists background-position: center center; .background-size( auto, @watchStarSize ); diff --git a/less/tablet/common.less b/less/tablet/common.less new file mode 100644 index 0000000..8b6362c --- /dev/null +++ b/less/tablet/common.less @@ -0,0 +1,45 @@ +@import "../mf-mixins.less"; +.alpha #content { + margin-top: 0; +} + +.top-banner { + img { + display: none; + } + h1 { + margin: @headingMarginTop @contentMarginRight 0 @contentMarginLeft; + } +} + +@media all and (min-width: 768px) { + .top-banner { + position: relative; + + img { + max-width: 100%; + display: block; + } + + h1 { + position: absolute; + margin: 0.6em 0 0 0.4em; + padding: 8px; + background-color: #101010; + background-color: rgba(0, 0, 0, 0.7); + border-radius: 5px; + color: #fff; + white-space: nowrap; + bottom: 18px; + } + + #mw-mf-page-actions { + position: absolute; + right: 0; + top: 0; + background-color: #FFF; + opacity: 0.9; + border-radius: 8px 0 0 8px; + } + } +} diff --git a/stylesheets/common/pageactions.css b/stylesheets/common/pageactions.css index 6d89fee..f250316 100644 --- a/stylesheets/common/pageactions.css +++ b/stylesheets/common/pageactions.css @@ -3,6 +3,9 @@ #ca-edit.istalk { display: none; } +.top-banner #mw-mf-page-actions { + margin: 0; +} #mw-mf-page-actions { margin: 0 -23px 9pt -23px; padding: 8px 23px; @@ -18,6 +21,8 @@ #mw-mf-page-actions li button, #mw-mf-page-actions li input, #mw-mf-page-actions li a { + border: none; + background-color: transparent; width: 40px; background-position: center center; /* use -webkit prefix for older android browsers eg. nexus 1 */ diff --git a/stylesheets/tablet/common.css b/stylesheets/tablet/common.css new file mode 100644 index 0000000..f9aec50 --- /dev/null +++ b/stylesheets/tablet/common.css @@ -0,0 +1,37 @@ +.alpha #content { + margin-top: 0; +} +.top-banner img { + display: none; +} +.top-banner h1 { + margin: 14pt 23px 0 23px; +} +@media all and (min-width: 768px) { + .top-banner { + position: relative; + } + .top-banner img { + max-width: 100%; + display: block; + } + .top-banner h1 { + position: absolute; + margin: 0.6em 0 0 0.4em; + padding: 8px; + background-color: #101010; + background-color: rgba(0, 0, 0, 0.7); + border-radius: 5px; + color: #fff; + white-space: nowrap; + bottom: 18px; + } + .top-banner #mw-mf-page-actions { + position: absolute; + right: 0; + top: 0; + background-color: #FFF; + opacity: 0.9; + border-radius: 8px 0 0 8px; + } +} -- To view, visit https://gerrit.wikimedia.org/r/66277 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ib58e4818138f8611e4649d6453b6c83f0e4fa307 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MobileFrontend Gerrit-Branch: master Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
