Jdlrobson has uploaded a new change for review. https://gerrit.wikimedia.org/r/229937
Change subject: Make Minerva skin more consistent with Vector ...................................................................... Make Minerva skin more consistent with Vector * Move caption definition into reset file * Unscope a few overly specific styles (including infoboxes) * Add backwards compatibility to old version of HTML Bug: T108075 Change-Id: Iea084ea952fb970a0f7b56d302481616f78ca48f --- M includes/skins/MinervaTemplate.php M includes/specials/SpecialMobileEditWatchlist.php M resources/mobile.editor/init.js M resources/mobile.issues/init.js M resources/mobile.references/init.js M resources/mobile.startup/init.js M resources/mobile.startup/panel.less M resources/mobile.talk/init.js M resources/mobile.toggling/init.js M resources/skins.minerva.base.reset/reset.less M resources/skins.minerva.base.styles/ui.less M resources/skins.minerva.special.styles/common.less M resources/skins.minerva.special.watchlist.beta.styles/specialWatchlist.less M resources/skins.minerva.tablet.styles/common.less M resources/skins.minerva.tablet.styles/hacks.less M tests/browser/features/support/pages/article_page.rb 16 files changed, 55 insertions(+), 45 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend refs/changes/37/229937/1 diff --git a/includes/skins/MinervaTemplate.php b/includes/skins/MinervaTemplate.php index e9139ff..d60ae56 100644 --- a/includes/skins/MinervaTemplate.php +++ b/includes/skins/MinervaTemplate.php @@ -249,7 +249,7 @@ // Add a mw-content-ltr/rtl class to be able to style based on text direction $langClass = 'mw-content-' . $data['pageDir']; echo Html::openElement( 'div', array( - 'id' => 'content', + 'id' => 'bodyContent', 'class' => 'content ' . $langClass, 'lang' => $data['pageLang'], 'dir' => $data['pageDir'], @@ -397,7 +397,7 @@ echo $this->getHeaderHtml( $data ); ?> </div> - <div id="content_wrapper"> + <div id="content"> <?php $this->renderContentWrapper( $data ); ?> diff --git a/includes/specials/SpecialMobileEditWatchlist.php b/includes/specials/SpecialMobileEditWatchlist.php index 60e0280..5a0dd45 100644 --- a/includes/specials/SpecialMobileEditWatchlist.php +++ b/includes/specials/SpecialMobileEditWatchlist.php @@ -78,7 +78,7 @@ $this->requireLogin( 'mobile-frontend-watchlist-purpose' ); $out = $this->getOutput(); - // turn off #content element + // turn off #bodyContent element $out->setProperty( 'unstyledContent', true ); parent::execute( $mode ); $out->setPageTitle( $this->msg( 'watchlist' ) ); diff --git a/resources/mobile.editor/init.js b/resources/mobile.editor/init.js index 59dcd07..b67d863 100644 --- a/resources/mobile.editor/init.js +++ b/resources/mobile.editor/init.js @@ -122,6 +122,8 @@ overlayManager.add( /^\/editor\/(\d+)\/?([^\/]*)$/, function ( sectionId, funnel ) { var + // FIXME: Remove when cache clears + $content = $( '#content #bodyContent, #content_wrapper #content' ), result = $.Deferred(), preferredEditor = getPreferredEditor(), editorOptions = { @@ -132,9 +134,8 @@ isNewEditor: user.getEditCount() === 0, oldId: mw.util.getParamValue( 'oldid' ), funnel: funnel || 'article', - // FIXME: cache this selector, it's used more than once - contentLang: $( '#content' ).attr( 'lang' ), - contentDir: $( '#content' ).attr( 'dir' ) + contentLang: $content.attr( 'lang' ), + contentDir: $content.attr( 'dir' ) }, visualEditorNamespaces = veConfig && veConfig.namespaces; diff --git a/resources/mobile.issues/init.js b/resources/mobile.issues/init.js index 8fd8fec..625833e 100644 --- a/resources/mobile.issues/init.js +++ b/resources/mobile.issues/init.js @@ -96,7 +96,9 @@ */ function initPageIssues() { var ns = mw.config.get( 'wgNamespaceNumber' ), - $container = ns === 14 ? $( '#content' ) : M.getCurrentPage().getLeadSectionElement(), + // FIXME: Cleanup selector when cache has cleared + $container = ns === 14 ? $( '#content #bodyContent, #content_wrapper #content' ) + : M.getCurrentPage().getLeadSectionElement(), labelMsgKey = 'mobile-frontend-meta-data-issues'; if ( ns === 0 ) { diff --git a/resources/mobile.references/init.js b/resources/mobile.references/init.js index 2505189..a800fcc 100644 --- a/resources/mobile.references/init.js +++ b/resources/mobile.references/init.js @@ -48,10 +48,11 @@ * Make references clickable and show a drawer when clicked on. * @method * @ignore - * @param {Page} [page] Defaults to $( '#content' ) + * @param {Page} [page] Defaults to $( '#bodyContent' ) */ function setup( page ) { - var $container = page ? page.$el : $( '#content' ); + // FIXME: Cleanup selector when cache clears + var $container = page ? page.$el : $( '#content #bodyContent, #content_wrapper #content' ); mw.loader.using( 'mobile.references' ).done( function () { ReferencesDrawer = M.require( 'modules/references/ReferencesDrawer' ); diff --git a/resources/mobile.startup/init.js b/resources/mobile.startup/init.js index ad028fd..7eaa259 100644 --- a/resources/mobile.startup/init.js +++ b/resources/mobile.startup/init.js @@ -49,19 +49,21 @@ * @ignore */ function loadCurrentPage() { - var permissions = mw.config.get( 'wgRestrictionEdit', [] ); + var permissions = mw.config.get( 'wgRestrictionEdit', [] ), + // FIXME: Clean up when cache clears. + $content = $( '#content #bodyContent, #content_wrapper #content' ); if ( permissions.length === 0 ) { permissions.push( '*' ); } currentPage = new Page( { - el: '#content', + el: $content, title: mw.config.get( 'wgPageName' ).replace( /_/g, ' ' ), protection: { edit: permissions }, isMainPage: mw.config.get( 'wgIsMainPage' ), isWatched: $( '#ca-watch' ).hasClass( 'watched' ), - sections: pageApi.getSectionsFromHTML( $( '#content' ) ), + sections: pageApi.getSectionsFromHTML( $content ), id: mw.config.get( 'wgArticleId' ), namespaceNumber: mw.config.get( 'wgNamespaceNumber' ) } ); diff --git a/resources/mobile.startup/panel.less b/resources/mobile.startup/panel.less index ace20fe..ba806c1 100644 --- a/resources/mobile.startup/panel.less +++ b/resources/mobile.startup/panel.less @@ -2,7 +2,9 @@ @import "minerva.variables"; // FIXME: Wikigrok uses the same styling for the .wikigrok class. Let's consolidate. -#content { +// FIXME: clean up selectors when cache clears +#content #bodyContent, +#content_wrapper #content { .panel { background-color: @grayLightest; clear: both; diff --git a/resources/mobile.talk/init.js b/resources/mobile.talk/init.js index ed6c0a9..d625241 100644 --- a/resources/mobile.talk/init.js +++ b/resources/mobile.talk/init.js @@ -70,7 +70,8 @@ label: mw.msg( 'mobile-frontend-talk-add-overlay-submit' ), href: '#/talk/new', progressive: true - } ).prependTo( '#content' ); + // FIXME: Cleanup selector when cache has cleared + } ).prependTo( '#content #bodyContent bodyContent, #content #bodyContent_wrapper #content #bodyContent' ); // reload the page after the new discussion was added M.on( 'talk-added-wo-overlay', function () { diff --git a/resources/mobile.toggling/init.js b/resources/mobile.toggling/init.js index c8d1546..4ad1671 100644 --- a/resources/mobile.toggling/init.js +++ b/resources/mobile.toggling/init.js @@ -1,6 +1,8 @@ ( function ( M, $ ) { var page = M.getCurrentPage(), currentPageTitle = page.title, + // FIXME: Clean up when cache clears. + $contentContainer = $( '#content #bodyContent, #content_wrapper #content' ), context = M.require( 'context' ), settings = M.require( 'settings' ), browser = M.require( 'browser' ), @@ -197,7 +199,8 @@ var tagName, expandSections, indicator, $firstHeading, collapseSectionsByDefault = mw.config.get( 'wgMFCollapseSectionsByDefault' ); - $container = $container || $( '#content' ); + // FIXME: Cleanup selector when cache has cleared + $container = $container || $contentContainer; // Also allow .section-heading if some extensions like Wikibase // want to toggle other headlines than direct descendants of $container. @@ -284,7 +287,8 @@ checkInternalRedirectAndHash(); checkHash(); - $( '#content_wrapper a' ).on( 'click', function () { + // Restricted to links created by editors and thus outside our control + $contentContainer.find( 'a' ).on( 'click', function () { // the link might be an internal link with a hash. // if it is check if we need to reveal any sections. if ( $( this ).attr( 'href' ) !== undefined && @@ -327,7 +331,7 @@ !mw.config.get( 'wgIsMainPage' ) && mw.config.get( 'wgAction' ) === 'view' ) { - init( $( '#content' ), 'content-' ); + init( $contentContainer, 'content-' ); } M.define( 'toggle', { diff --git a/resources/skins.minerva.base.reset/reset.less b/resources/skins.minerva.base.reset/reset.less index 06950ca..50486c8 100644 --- a/resources/skins.minerva.base.reset/reset.less +++ b/resources/skins.minerva.base.reset/reset.less @@ -25,7 +25,9 @@ table, caption, tbody, tfoot, thead, tr, th, td { font-size: 100%; } - +caption { + font-weight: bold; +} button { border: none; background-color: transparent; diff --git a/resources/skins.minerva.base.styles/ui.less b/resources/skins.minerva.base.styles/ui.less index a027d34..41197ce 100644 --- a/resources/skins.minerva.base.styles/ui.less +++ b/resources/skins.minerva.base.styles/ui.less @@ -10,10 +10,15 @@ height: 100%; } -#content_wrapper { +#content { border-top: 1px solid @grayLight; } +// FIXME: Rule resets #content rule and can be removed when cache cleared +#content_wrapper #content { + border-top: none; +} + // FIXME: REMOVE .stable .pre-content.last-modified-bar selector when cache clears .stable .pre-content.last-modified-bar, .last-modified-bar { diff --git a/resources/skins.minerva.special.styles/common.less b/resources/skins.minerva.special.styles/common.less index 1adc6cd..3b8fe2a 100644 --- a/resources/skins.minerva.special.styles/common.less +++ b/resources/skins.minerva.special.styles/common.less @@ -18,7 +18,7 @@ } } -.mw-mf-special #content_wrapper { +.mw-mf-special #content { @verticalPadding: .5em; #section_0 { padding: @verticalPadding 0; diff --git a/resources/skins.minerva.special.watchlist.beta.styles/specialWatchlist.less b/resources/skins.minerva.special.watchlist.beta.styles/specialWatchlist.less index 13781a1..f5da0ac 100644 --- a/resources/skins.minerva.special.watchlist.beta.styles/specialWatchlist.less +++ b/resources/skins.minerva.special.watchlist.beta.styles/specialWatchlist.less @@ -4,7 +4,7 @@ @media all and (min-width: @wgMFDeviceWidthTablet) { .alpha, .beta { - #content_wrapper { + #content #bodyContent { .content-header { border-bottom: none; padding-bottom: 0; diff --git a/resources/skins.minerva.tablet.styles/common.less b/resources/skins.minerva.tablet.styles/common.less index ba3d60b..7d4c8ee 100644 --- a/resources/skins.minerva.tablet.styles/common.less +++ b/resources/skins.minerva.tablet.styles/common.less @@ -7,11 +7,9 @@ @media all and (min-width: @wgMFDeviceWidthTablet) { - #content_wrapper { - .content_block { - width: auto; - clear: none; - } + .content_block { + width: auto; + clear: none; } // FIXME: remove the .stable .pre-content selector when cache clears diff --git a/resources/skins.minerva.tablet.styles/hacks.less b/resources/skins.minerva.tablet.styles/hacks.less index 03529aa..f4466c4 100644 --- a/resources/skins.minerva.tablet.styles/hacks.less +++ b/resources/skins.minerva.tablet.styles/hacks.less @@ -14,22 +14,14 @@ /* Tablet specific styling */ @media all and (min-width: @wgMFDeviceWidthTablet) { - // FIXME: review why we need content_wrapper - #content_wrapper { - // Float infoboxes to the right of the page - table.infobox { - margin: .5em 0 1em 35px !important; - // Note this is fixed to ensure that we leave enough space for the sections to the infoboxes left - max-width: @infoboxWidth; - // FIXME [Templates]: Inline styles force us to use !important - width: auto !important; - float: right !important; - clear: right !important; - } - - // Match caption styling from MediaWiki:Common.css - caption { - font-weight: bold; - } + // Float infoboxes to the right of the page + table.infobox { + margin: .5em 0 1em 35px !important; + // Note this is fixed to ensure that we leave enough space for the sections to the infoboxes left + max-width: @infoboxWidth; + // FIXME [Templates]: Inline styles force us to use !important + width: auto !important; + float: right !important; + clear: right !important; } } diff --git a/tests/browser/features/support/pages/article_page.rb b/tests/browser/features/support/pages/article_page.rb index 3975357..46891b2 100644 --- a/tests/browser/features/support/pages/article_page.rb +++ b/tests/browser/features/support/pages/article_page.rb @@ -128,8 +128,8 @@ div(:toast, class: 'toast') # loader - div(:content_wrapper, id: 'content_wrapper') - div(:content, id: 'content') + div(:content_wrapper, id: 'content') + div(:content, id: 'bodyContent') # secondary menu ## languages -- To view, visit https://gerrit.wikimedia.org/r/229937 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Iea084ea952fb970a0f7b56d302481616f78ca48f 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