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
