Mobile page issues - visual styling changes
Changes: * Introduce Jan's beautifully documented $wgMinervaABSamplingRate Set to 1 to A/B test 50% of the population * Split out ambox template styles into a separate file referenced by hacks.less * Update cleanuptemplates setup script to consider two buckets Test pages: * Shqiponja_Partizane * World_War_II_in_Albania * Liberation_of_Tirana * French_Consulate * Abd_ar-Rahman_IV * M109_howitzer * Aimoin * Transport_in_Brazil * Transport_in_Cape_Verde Bug: T191303 Change-Id: I8d11e655ccb847b7999e64dda57b225ad8b1c23a
This commit is contained in:
jdlrobson
parent
e7f00c251f
commit
a231525112
14
README.md
14
README.md
|
|
@ -101,4 +101,18 @@ Whether to show the language switcher button even if no languages are available
|
|||
* Type: `Boolean`
|
||||
* Default: `true`
|
||||
|
||||
#### $wgMinervaABSamplingRate
|
||||
|
||||
On a scale of 0 to 1, determines the chance a user has of entering an AB test.
|
||||
A test is divided into 3 buckets, "control" "A" and "B". Users that are selected for the
|
||||
test have an equal chance of entering bucket "A" or "B", the remaining users fall into the
|
||||
"control" bucket and are excluded from the test.
|
||||
|
||||
1 - would run test on 100% of users (50% in A and 50% in B, 0 in control).
|
||||
0.5 - would run test on 50% of users (25% in A, 25% in B, 50% in control).
|
||||
0.05 - would run test on 5% of users (2.5% in A, 2.5% in B, 95% in control).
|
||||
0 would disable the test and place all users in "control".
|
||||
|
||||
* Type: `Number`
|
||||
* Default: `0`
|
||||
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@
|
|||
"mobile-frontend-user-page-uploads": "Uploads",
|
||||
"skinname-minerva": "MinervaNeue",
|
||||
"minerva-skin-desc": "A responsive mobile first skin",
|
||||
"skin-minerva-issue-learn-more": "Learn more",
|
||||
"skin-minerva-mobile-option-MinervaShowCategoriesButton": "Categories",
|
||||
"skin-minerva-mobile-option-MinervaShowCategoriesButton-description": "View categories of pages",
|
||||
"skin-minerva-mobile-option-MinervaEnableBackToTop": "Jump to top",
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@
|
|||
"skinname-minerva": "{{name}}",
|
||||
"minerva-skin-desc": "{{desc|name=Minerva Neue|url=https://www.mediawiki.org/wiki/Skin:Minerva_Neue|what=skin}}",
|
||||
"skin-minerva-mobile-option-MinervaShowCategoriesButton": "Label for categories mobile web beta feature.\n{{Identical|Category}}",
|
||||
"skin-minerva-issue-learn-more": "Label for link that allows expanding of ambox issue templates.",
|
||||
"skin-minerva-mobile-option-MinervaShowCategoriesButton-description": "Description label for categories mobile web beta feature.",
|
||||
"skin-minerva-mobile-option-MinervaEnableBackToTop": "Label for jump to top mobile web beta feature",
|
||||
"skin-minerva-mobile-option-MinervaEnableBackToTop-description": "Description label for jump to top mobile web beta feature",
|
||||
|
|
|
|||
|
|
@ -1271,6 +1271,7 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
|
|||
'wgMinervaDownloadNamespaces' => $this->getConfig()->get( 'MinervaDownloadNamespaces' ),
|
||||
'wgMinervaMenuData' => $this->getMenuData(),
|
||||
'wgMFDescription' => $out->getProperty( 'wgMFDescription' ),
|
||||
'wgMinervaABSamplingRate' => $this->getConfig()->get( 'MinervaABSamplingRate' )
|
||||
];
|
||||
|
||||
if ( $this->isAuthenticatedUser() ) {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ FIXME: Review all of these hacks to see if they still apply.
|
|||
*/
|
||||
@import '../../minerva.less/minerva.variables';
|
||||
@import '../../minerva.less/minerva.mixins';
|
||||
@import 'templates/ambox.less';
|
||||
|
||||
.collapsible td {
|
||||
width: auto !important;
|
||||
|
|
@ -27,11 +28,9 @@ FIXME: Review all of these hacks to see if they still apply.
|
|||
.action-edit .fmbox,
|
||||
// Talk page informational boxes
|
||||
.tmbox,
|
||||
// Note not in issues.less as that is only loaded via JavaScript
|
||||
.ambox,
|
||||
#coordinates,
|
||||
// Hide article badges, clean-up notices, stub notices, and navigation boxes
|
||||
.topicon, .metadata {
|
||||
.topicon {
|
||||
// It's important as some of these are tables which become display: table on larger screens
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
/**
|
||||
* Ambox classes are nested in a top-level class
|
||||
* for the page issues A/B test.
|
||||
* This class is appended to the DOM via JS
|
||||
**/
|
||||
|
||||
// Since group-b is display none, this will not impact group-b but will avoid FOUC for group a
|
||||
@min-height-ambox: 40px;
|
||||
|
||||
.ambox,
|
||||
// Be more specific than .content table styles in Minerva
|
||||
table.ambox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Will show FOUC on mobile
|
||||
.issues-group-B {
|
||||
.ambox {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.client-js .ambox {
|
||||
cursor: pointer;
|
||||
// Avoid the height changing when the learn more link is inserted.
|
||||
min-height: @min-height-ambox;
|
||||
margin: 0 !important;
|
||||
font-size: 0.8em;
|
||||
width: 100%;
|
||||
background: @colorGray15;
|
||||
color: @colorGray5;
|
||||
|
||||
// Certain templates e.g. Template:Expand Russian wrap content in this element
|
||||
// We'll want to apply min-height here too.
|
||||
.mbox-text-span {
|
||||
min-height: @min-height-ambox;
|
||||
}
|
||||
|
||||
// Wrestle with inline styles that editors may place on elements inside the ambox
|
||||
div {
|
||||
// e.g. on mw-collapsible inside Multiple issues template
|
||||
margin: 0 !important;
|
||||
// e.g. on Template:Expand Russian
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
td {
|
||||
position: relative;
|
||||
padding: 8px 8px 8px 32px;
|
||||
}
|
||||
|
||||
// All text should be treated the same
|
||||
b {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
// Hide links in new treatment
|
||||
a {
|
||||
color: inherit !important;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
small,
|
||||
.hide-when-compact,
|
||||
// Template:Expand Russian
|
||||
.mw-collapsible-content,
|
||||
// Remove empty leftmost column when present (.mbox-empty-cell)
|
||||
// and .verbose and any hr tags that might be present in the ambox
|
||||
// See https://en.wikipedia.org/w/index.php?
|
||||
// title=Special:WhatLinksHere/Template:Proposed_deletion_notify
|
||||
// (https://phabricator.wikimedia.org/T197265)
|
||||
.mbox-empty-cell,
|
||||
hr,
|
||||
.verbose,
|
||||
// nested amboxes (multiple issues)
|
||||
table,
|
||||
.mbox-image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mw-ui-icon {
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
.ambox-learn-more {
|
||||
color: @linkColor;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><path fill="#4a4f53" d="M1.092 73.695l38.906-67.39 38.91 67.39z"/><path fill="#fff" d="M43.528 57.71v7.104h-6.83V57.71h6.83zm-2.03-5.908h-3.275L36.47 39.55v-7.86h6.827v7.858l-1.8 12.254z"/></svg>
|
||||
|
After Width: | Height: | Size: 316 B |
|
|
@ -1,4 +1,11 @@
|
|||
( function ( M, $ ) {
|
||||
var AB = M.require( 'skins.minerva.scripts/AB' ),
|
||||
isInGroupB = new AB(
|
||||
'WME.PageIssuesAB',
|
||||
mw.config.get( 'wgMinervaABSamplingRate', 0 ),
|
||||
mw.user.sessionId()
|
||||
).getBucket() === 'B',
|
||||
Icon = M.require( 'mobile.startup/Icon' );
|
||||
|
||||
( function () {
|
||||
var action = mw.config.get( 'wgAction' ),
|
||||
|
|
@ -60,14 +67,14 @@
|
|||
* @ignore
|
||||
*/
|
||||
function createBanner( $container, labelText, headingText ) {
|
||||
var selector = 'table.ambox, table.tmbox, table.cmbox, table.fmbox',
|
||||
var $learnMore,
|
||||
selector = 'table.ambox, table.tmbox, table.cmbox, table.fmbox',
|
||||
$metadata = $container.find( selector ),
|
||||
issues = [],
|
||||
$link;
|
||||
|
||||
// clean it up a little
|
||||
$metadata.find( '.NavFrame' ).remove();
|
||||
|
||||
$metadata.each( function () {
|
||||
var issue,
|
||||
$this = $( this );
|
||||
|
|
@ -78,8 +85,33 @@
|
|||
}
|
||||
} );
|
||||
|
||||
$link = createLinkElement( labelText );
|
||||
$link.attr( 'href', '#/issues' );
|
||||
if ( isInGroupB ) {
|
||||
new Icon( {
|
||||
glyphPrefix: 'minerva',
|
||||
name: 'warning',
|
||||
isSmall: true
|
||||
} ).prependTo( '.mbox-text' );
|
||||
$learnMore = $( '<span>' )
|
||||
.addClass( 'ambox-learn-more' )
|
||||
.text( mw.msg( 'skin-minerva-issue-learn-more' ) );
|
||||
if ( $( '.mw-collapsible-content' ).length ) {
|
||||
// e.g. Template:Multiple issues
|
||||
$learnMore.insertBefore( '.mw-collapsible-content' );
|
||||
} else {
|
||||
// e.g. Template:merge from
|
||||
$learnMore.appendTo( '.mbox-text-span' );
|
||||
}
|
||||
$( '.mbox-text' ).click( function () {
|
||||
overlayManager.router.navigate( '#/issues' );
|
||||
} );
|
||||
} else {
|
||||
$link = createLinkElement( labelText );
|
||||
$link.attr( 'href', '#/issues' );
|
||||
if ( $metadata.length ) {
|
||||
$link.insertAfter( $( 'h1#section_0' ) );
|
||||
$metadata.remove();
|
||||
}
|
||||
}
|
||||
|
||||
overlayManager.add( /^\/issues$/, function () {
|
||||
return new CleanupOverlay( {
|
||||
|
|
@ -87,12 +119,6 @@
|
|||
headingText: headingText
|
||||
} );
|
||||
} );
|
||||
|
||||
if ( $metadata.length ) {
|
||||
$link.insertAfter( $( 'h1#section_0' ) );
|
||||
|
||||
$metadata.remove();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -103,9 +129,11 @@
|
|||
function initPageIssues() {
|
||||
var ns = mw.config.get( 'wgNamespaceNumber' ),
|
||||
// Categories have no lead section
|
||||
$container = ns === 14 ? $( '#bodyContent' ) :
|
||||
$container = ns === 14 || isInGroupB ? $( '#bodyContent' ) :
|
||||
page.getLeadSectionElement();
|
||||
|
||||
// set A-B test class.
|
||||
$( 'html' ).addClass( isInGroupB ? 'issues-group-B' : 'issues-group-A' );
|
||||
if ( action === 'edit' ) {
|
||||
$container = $( '#mw-content-text' );
|
||||
} else if ( $container === null ) {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@
|
|||
"prefix": "skin-minerva-",
|
||||
"base": false,
|
||||
"beta": true
|
||||
}
|
||||
},
|
||||
"MinervaABSamplingRate": 0
|
||||
},
|
||||
"ValidSkinNames": {
|
||||
"minerva": "MinervaNeue"
|
||||
|
|
@ -192,6 +193,7 @@
|
|||
"class": "ResourceLoaderImageModule",
|
||||
"selector": ".mw-ui-icon-minerva-{name}:before",
|
||||
"images": {
|
||||
"warning": "resources/skins.minerva.icons.images/warning.svg",
|
||||
"mainmenu": "resources/skins.minerva.icons.images/hamburger.svg",
|
||||
"edit": "resources/skins.minerva.icons.images/editLocked.svg",
|
||||
"edit-enabled": "resources/skins.minerva.icons.images/edit.svg",
|
||||
|
|
@ -334,6 +336,7 @@
|
|||
"mediawiki.experiments"
|
||||
],
|
||||
"messages": [
|
||||
"skin-minerva-issue-learn-more",
|
||||
"edithelp",
|
||||
"mobile-frontend-language-change",
|
||||
"mobile-frontend-meta-data-issues",
|
||||
|
|
|
|||
Loading…
Reference in New Issue