Jdlrobson has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/393851 )
Change subject: Reimplementing MobileOptions in OOUI
......................................................................
Reimplementing MobileOptions in OOUI
Special:MobileOptions is completely
written in OOUI.
The submit button is hidden in JavaScript and beta opt in/
value changes will now be managed by JavaScript.
I notice a 157.5kb increase in the introduction of this change.
134.2kb of this is JavaScript and 21.3kb of CSS (the CSS is
documented in T181108)
Other known issues:
* The select dropdown is not native so has various usability
problems (T180730)
Change-Id: I70f68df9d2d305126444319b05675702af75de87
---
M extension.json
M i18n/en.json
M i18n/qqq.json
M includes/MobileFrontend.hooks.php
M includes/specials/SpecialMobileOptions.php
M jsduck.json
D resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.hogan
D resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.js
D resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.less
D resources/mobile.special.mobileoptions.scripts.fontchanger/init.js
D resources/mobile.special.mobileoptions.scripts/checkbox.mustache
M resources/mobile.special.mobileoptions.scripts/mobileoptions.js
M resources/mobile.special.mobileoptions.styles/mobileoptions.less
13 files changed, 221 insertions(+), 268 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/51/393851/1
diff --git a/extension.json b/extension.json
index 85f05ce..206625b 100644
--- a/extension.json
+++ b/extension.json
@@ -944,35 +944,19 @@
"targets": "mobile",
"position": "top",
"dependencies": [
+ "jquery.cookie",
"mobile.startup"
],
"scripts": [
"resources/mobile.special.mobileoptions.scripts/mobileoptions.js"
],
- "templates": {
- "Checkbox.hogan":
"resources/mobile.special.mobileoptions.scripts/checkbox.mustache"
- },
"messages": [
+ "mobile-frontend-fontchanger-option-small",
+ "mobile-frontend-fontchanger-option-medium",
+ "mobile-frontend-fontchanger-option-large",
+ "mobile-frontend-fontchanger-option-xlarge",
"mobile-frontend-expand-sections-description",
- "mobile-frontend-expand-sections-status"
- ]
- },
- "mobile.special.mobileoptions.scripts.fontchanger": {
- "targets": "mobile",
- "dependencies": [
- "mobile.startup"
- ],
- "templates": {
- "FontChanger.hogan":
"resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.hogan"
- },
- "styles": [
-
"resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.less"
- ],
- "scripts": [
-
"resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.js",
-
"resources/mobile.special.mobileoptions.scripts.fontchanger/init.js"
- ],
- "messages": [
+ "mobile-frontend-expand-sections-status",
"mobile-frontend-fontchanger-desc",
"mobile-frontend-fontchanger-link"
]
diff --git a/i18n/en.json b/i18n/en.json
index 7b5ee71..fdfaf3a 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -119,6 +119,10 @@
"mobile-frontend-expand-sections-status": "Expand all sections",
"mobile-frontend-fontchanger-link": "Font size",
"mobile-frontend-fontchanger-desc": "Increase or decrease the size of
the text for readability.",
+ "mobile-frontend-fontchanger-option-small": "Small",
+ "mobile-frontend-fontchanger-option-medium": "Regular",
+ "mobile-frontend-fontchanger-option-large": "Large",
+ "mobile-frontend-fontchanger-option-xlarge": "Extra large",
"mobile-frontend-featured-article": "Today's featured content",
"mobile-frontend-generic-404-desc": "The page you are looking for could
not be found.",
"mobile-frontend-generic-404-title": "Error - Page not found",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 24867ab..e78a15e 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -119,6 +119,10 @@
"mobile-frontend-expand-sections-description": "On settings page
description for turning on/off expansion of all sections on page load.\n\nSee
also:\n* {{msg-mw|Mobile-frontend-expand-sections-status}}",
"mobile-frontend-expand-sections-status": "On settings page label for
turning on/off expansion of all sections on page load.\n\nSee also:\n*
{{msg-mw|Mobile-frontend-expand-sections-description}}",
"mobile-frontend-fontchanger-link": "{{Identical|Font size}}",
+ "mobile-frontend-fontchanger-option-small": "Font size option",
+ "mobile-frontend-fontchanger-option-medium": "Font size option",
+ "mobile-frontend-fontchanger-option-large": "Font size option",
+ "mobile-frontend-fontchanger-option-xlarge": "Font size option",
"mobile-frontend-fontchanger-desc": "Link to open the font size change
menu out of [[Special:MobileMenu]]..",
"mobile-frontend-featured-article": "Label shown before a link or other
form of display of an area of the page (usually main page of the wiki) which
contains its \"featured content\", i.e. something contained in the wiki which
is considered particularly good and is promoted for a period of time in
prominent places of the wiki.",
"mobile-frontend-generic-404-desc": "Generic description of the HTTP
404 error shown to users",
diff --git a/includes/MobileFrontend.hooks.php
b/includes/MobileFrontend.hooks.php
index 7ece0ce..caa2491 100644
--- a/includes/MobileFrontend.hooks.php
+++ b/includes/MobileFrontend.hooks.php
@@ -1175,6 +1175,7 @@
$vars['wgMFExpandAllSectionsUserOption'] =
$context->getConfigVariable(
'MFExpandAllSectionsUserOption' );
+ $vars['wgMFEnableFontChanger'] = $context->getConfigVariable(
'MFEnableFontChanger' );
$vars += self::getWikibaseStaticConfigVars( $context );
return true;
diff --git a/includes/specials/SpecialMobileOptions.php
b/includes/specials/SpecialMobileOptions.php
index 662304b..2329abe 100644
--- a/includes/specials/SpecialMobileOptions.php
+++ b/includes/specials/SpecialMobileOptions.php
@@ -68,22 +68,6 @@
}
/**
- * Gets the Resource Loader modules that should be added to the output.
- *
- * @param MobileContext $context
- * @return string[]
- */
- private function getModules( MobileContext $context ) {
- $result = [];
-
- if ( $context->getConfigVariable( 'MFEnableFontChanger' ) ) {
- $result[] =
'mobile.special.mobileoptions.scripts.fontchanger';
- }
-
- return $result;
- }
-
- /**
* Render the settings form (with actual set settings) and add it to the
* output as well as any supporting modules.
*/
@@ -93,6 +77,7 @@
$user = $this->getUser();
$out->setPageTitle( $this->msg(
'mobile-frontend-main-menu-settings-heading' ) );
+ $out->enableOOUI();
if ( $this->getRequest()->getCheck( 'success' ) ) {
$out->wrapWikiMsg(
@@ -101,64 +86,62 @@
);
}
- $betaEnabled = $context->isBetaGroupMember();
+ $fields = [];
+ $form = new OOUI\FormLayout( [
+ 'method' => 'POST',
+ 'id' => 'mobile-options',
+ 'action' => $this->getPageTitle()->getLocalURL(),
+ ] );
+ $form->addClasses( [ 'mw-mf-settings' ] );
- $imagesBeta = $betaEnabled ? 'checked' : '';
- $betaEnableMsg = $this->msg( 'mobile-frontend-settings-beta'
)->parse();
- $betaDescriptionMsg = $this->msg(
'mobile-frontend-opt-in-explain' )->parse();
-
- $saveSettings = $this->msg( 'mobile-frontend-save-settings'
)->escaped();
- $action = $this->getPageTitle()->getLocalURL();
- $html = Html::openElement( 'form',
- [ 'class' => 'mw-mf-settings', 'method' => 'POST',
'action' => $action ]
+ if ( $user->isLoggedIn() ) {
+ $fields[] = new OOUI\HtmlSnippet( Html::hidden(
'token', $user->getEditToken() ) );
+ }
+ $fields[] = new OOUI\HtmlSnippet(
+ Html::hidden( 'returnto',
$this->returnToTitle->getFullText() )
);
- $token = $user->isLoggedIn() ? Html::hidden( 'token',
$user->getEditToken() ) : '';
- $returnto = Html::hidden( 'returnto',
$this->returnToTitle->getFullText() );
-
- // array to save the data of options, which should be displayed
here
- $options = [];
// beta settings
if ( $this->getMFConfig()->get( 'MFEnableBeta' ) ) {
- $options['beta'] = [
- 'checked' => $imagesBeta,
- 'label' => $betaEnableMsg,
- 'description' => $betaDescriptionMsg,
- 'name' => 'enableBeta',
- 'id' => 'enable-beta-toggle',
- ];
+ $fields[] = new OOUI\FieldLayout(
+ new OOUI\CheckboxInputWidget( [
+ 'name' => 'enableBeta',
+ 'infusable' => true,
+ 'selected' =>
$context->isBetaGroupMember(),
+ 'id' => 'enable-beta-toggle',
+ 'value' => '1',
+ ] ),
+ [
+ 'label' => new OOUI\LabelWidget( [
+ 'label' => new OOUI\HtmlSnippet(
+ Html::openElement(
'div', [] ) .
+ Html::element(
'strong', [],
+ $this->msg(
'mobile-frontend-settings-beta' )->parse() ) .
+ Html::element( 'div', [
'class' => 'option-description' ],
+ $this->msg(
'mobile-frontend-opt-in-explain' )->parse()
+ ) .
+ Html::closeElement(
'div' )
+ )
+ ] ),
+ 'id' => 'beta-field',
+ ]
+ );
}
- $templateParser = new TemplateParser(
- __DIR__ .
'/../../resources/mobile.special.mobileoptions.scripts' );
- // @codingStandardsIgnoreStart Long line
- foreach( $options as $key => $data ) {
- if ( isset( $data['type'] ) && $data['type'] ===
'hidden' ) {
- $html .= Html::element( 'input',
- array(
- 'type' => 'hidden',
- 'name' => $data['name'],
- 'value' => $data['checked'],
- )
- );
- } else {
- $html .= $templateParser->processTemplate(
'checkbox', $data );
- }
- }
- $className = MobileUI::buttonClass( 'constructive' );
- $html .= <<<HTML
- <input type="submit" class="{$className}"
id="mw-mf-settings-save" value="{$saveSettings}">
- $token
- $returnto
- </form>
-HTML;
+ $fields[] = new OOUI\ButtonInputWidget( [
+ 'id' => 'mw-mf-settings-save',
+ 'infusable' => true,
+ 'value' => $this->msg( 'mobile-frontend-save-settings'
)->escaped(),
+ 'label' => $this->msg( 'mobile-frontend-save-settings'
)->escaped(),
+ 'flags' => [ 'primary', 'progressive' ],
+ 'type' => 'submit',
+ ] );
+
// @codingStandardsIgnoreEnd
- $out->addHTML( $html );
-
- $modules = $this->getModules( $context );
-
- $this->getOutput()
- ->addModules( $modules );
+ $form->appendContent(
+ $fields
+ );
+ $out->addHTML( $form );
}
/**
diff --git a/jsduck.json b/jsduck.json
index 8e7de6c..dcdd64e 100644
--- a/jsduck.json
+++ b/jsduck.json
@@ -22,6 +22,7 @@
"OO.ui.ToolGroup",
"OO.ui.Tool",
"OO.ui.mixin.LookupElement",
+ "OO.ui.LabelWidget",
"OO.EventEmitter",
"ve.init.mw.MobileArticleTarget",
"mw.echo.dm.NotificationItem"
diff --git
a/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.hogan
b/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.hogan
deleted file mode 100644
index f52509b..0000000
---
a/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.hogan
+++ /dev/null
@@ -1,9 +0,0 @@
-<span class="fontchanger enableMessage">{{enableMsg}}</span>
-<div class="mobileoption fontchanger">
- {{#minusButton}}{{>button}}{{/minusButton}}
- {{#valueButton}}{{>button}}{{/valueButton}}
- {{#plusButton}}{{>button}}{{/plusButton}}
- <div class="option-description">
- {{descriptionMsg}}
- </div>
-</div>
diff --git
a/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.js
b/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.js
deleted file mode 100644
index 857d643..0000000
--- a/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.js
+++ /dev/null
@@ -1,92 +0,0 @@
-( function ( M ) {
- var View = M.require( 'mobile.startup/View' ),
- Button = M.require( 'mobile.startup/Button' );
-
- /**
- * FontChanger wrapper
- * @class FontChanger
- * @extends View
- */
- function FontChanger() {
- View.apply( this, arguments );
- }
-
- OO.mfExtend( FontChanger, View, {
- /**
- * @cfg {Object} defaults Default options hash.
- * @cfg {Object} defaults.viewLink Anchor options for a link to
wikidata page.
- */
- defaults: {
- plusButton: new Button( {
- progressive: true,
- additionalClassNames: 'fontchanger plus',
- label: '+'
- } ).options,
- minusButton: new Button( {
- progressive: true,
- additionalClassNames: 'fontchanger minus',
- label: '-'
- } ).options,
- valueButton: new Button( {
- additionalClassNames: 'fontchanger-value',
- label: '100%'
- } ).options
- },
- /** @inheritdoc */
- template: mw.template.get(
'mobile.special.mobileoptions.scripts.fontchanger', 'FontChanger.hogan' ),
- /** @inheritdoc */
- templatePartials: {
- button: Button.prototype.template
- },
- /**
- * Save the actual font size setting.
- * @method
- */
- save: function () {
- mw.storage.set( this.options.name,
this.fontchanger.val() );
- },
-
- /**
- * @inheritdoc
- */
- postRender: function () {
- var self = this;
-
- this.fontchanger = this.$( '.fontchanger-value' );
- this.changePlus = this.$( '.fontchanger.plus' );
- this.changeMinus = this.$( '.fontchanger.minus' );
- this.setPercentage( mw.storage.get( this.options.name )
|| 100 );
-
- this.fontchanger.on( 'click', function () {
- self.setPercentage( 100 );
- return false;
- } );
-
- this.changeMinus.on( 'click', function () {
- self.setPercentage( self.fontchanger.val() - 10
);
- return false;
- } );
-
- this.changePlus.on( 'click', function () {
- self.setPercentage( parseInt(
self.fontchanger.val() ) + 10 );
- return false;
- } );
- },
-
- /**
- * Set a new percentage (doesn't change the value higher then
200% and lower then 10%)
- * @param {number} percentage New percentage value
- */
- setPercentage: function ( percentage ) {
- // disallow changes under 10% and over 200%
- if ( percentage > 9 && percentage < 201 ) {
- this.fontchanger
- .text( percentage + '%' )
- .val( percentage );
- }
- }
- } );
-
- M.define( 'mobile.fontchanger/FontChanger', FontChanger );
-
-}( mw.mobileFrontend ) );
diff --git
a/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.less
b/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.less
deleted file mode 100644
index 0ccb791..0000000
---
a/resources/mobile.special.mobileoptions.scripts.fontchanger/FontChanger.less
+++ /dev/null
@@ -1,16 +0,0 @@
-.mobileoption {
- &.fontchanger {
- text-align: center;
- }
-}
-
-.fontchanger {
- &.enableMessage {
- font-size: 18px;
- font-weight: bold;
- }
-
- .option-description {
- padding-top: 1em;
- }
-}
diff --git a/resources/mobile.special.mobileoptions.scripts.fontchanger/init.js
b/resources/mobile.special.mobileoptions.scripts.fontchanger/init.js
deleted file mode 100644
index 0bd5262..0000000
--- a/resources/mobile.special.mobileoptions.scripts.fontchanger/init.js
+++ /dev/null
@@ -1,15 +0,0 @@
-( function ( M, $ ) {
- var FontChanger = M.require( 'mobile.fontchanger/FontChanger' );
-
- $( function () {
- var saveLI = $( '#mw-mf-settings-save' ),
- fontChanger = new FontChanger( {
- name: 'userFontSize',
- enableMsg: mw.msg(
'mobile-frontend-fontchanger-link' ),
- descriptionMsg: mw.msg(
'mobile-frontend-fontchanger-desc' )
- } );
-
- fontChanger.insertBefore( saveLI );
- $( 'form.mw-mf-settings' ).on( 'submit', fontChanger.save.bind(
fontChanger ) );
- } );
-}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/mobile.special.mobileoptions.scripts/checkbox.mustache
b/resources/mobile.special.mobileoptions.scripts/checkbox.mustache
deleted file mode 100644
index 4de95b9..0000000
--- a/resources/mobile.special.mobileoptions.scripts/checkbox.mustache
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="mobileoption">
- <div class="mw-ui-checkbox">
- <input type="checkbox" name="{{name}}" id="{{name}}-toggle"
{{checked}}>
- <label for="{{name}}-toggle">
- {{label}}
- </label>
- </div>
- <div class="option-description">
- {{description}}
- </div>
-</div>
diff --git a/resources/mobile.special.mobileoptions.scripts/mobileoptions.js
b/resources/mobile.special.mobileoptions.scripts/mobileoptions.js
index 56842ca..75ebf6f 100644
--- a/resources/mobile.special.mobileoptions.scripts/mobileoptions.js
+++ b/resources/mobile.special.mobileoptions.scripts/mobileoptions.js
@@ -1,51 +1,128 @@
( function ( M, $ ) {
- var View = M.require( 'mobile.startup/View' );
+ var storage = mw.storage,
+ cookie = $.cookie,
+ EXPAND_SECTIONS_KEY = 'expandSections',
+ msg = mw.msg,
+ FONT_SIZE_KEY = 'userFontSize';
/**
- * Wrapper for checkboxes styled as in MediaWiki UI style guide
- * @class Checkbox
- * @extends View
+ * Creates a label for use with a form input
+ * @method
+ * @ignore
+ * @param {String} heading
+ * @param {String} description
+ * @return {OO.ui.LabelWidget}
*/
- function Checkbox() {
- View.apply( this, arguments );
+ function createLabel( heading, description ) {
+ var $label = $( '<div>' );
+ $label.append( $( '<strong>' ).text( heading ) );
+ $label.append(
+ $( '<div class="option-description">' )
+ .text( description )
+ );
+
+ return new OO.ui.LabelWidget( {
+ label: $label
+ } );
}
- OO.mfExtend( Checkbox, View, {
- template: mw.template.get(
'mobile.special.mobileoptions.scripts', 'Checkbox.hogan' ),
- /**
- * Save the current state of the checkbox to the storage
- * @method
- */
- save: function () {
- mw.storage.set( this.options.name, this.cb.prop(
'checked' ) ? 'true' : 'false' );
- },
- /** @inheritdoc */
- postRender: function () {
- var cbview = this;
- this.cb = this.$( 'input[type=checkbox]' );
- this.cb.prop( 'checked', mw.storage.get(
this.options.name ) === 'true' );
- $( 'form.mw-mf-settings' ).on( 'submit', $.proxy(
cbview, 'save' ) );
- }
- } );
+ /**
+ * Adds a font changer field to the form
+ * @method
+ * @param {jQuery.Object} $form
+ * @ignore
+ */
+ function addFontChangerToForm( $form ) {
+ var fontChanger, fontChangerDropdown;
+
+ fontChangerDropdown = new OO.ui.DropdownInputWidget( {
+ value: parseInt( storage.get( FONT_SIZE_KEY ), 10 ),
+ options: [
+ {
+ data: 90,
+ label: msg(
'mobile-frontend-fontchanger-option-small' )
+ },
+ {
+ data: 100,
+ label: msg(
'mobile-frontend-fontchanger-option-medium' )
+ },
+ {
+ data: 120,
+ label: msg(
'mobile-frontend-fontchanger-option-large' )
+ },
+ {
+ data: 140,
+ label: msg(
'mobile-frontend-fontchanger-option-xlarge' )
+ }
+ ]
+ } );
+ fontChanger = new OO.ui.FieldLayout(
+ fontChangerDropdown,
+ {
+ label: createLabel( mw.msg(
'mobile-frontend-fontchanger-link' ),
+ mw.msg(
'mobile-frontend-fontchanger-desc' ) ).$element
+ }
+ );
+ fontChangerDropdown.on( 'choose', function ( item ) {
+ storage.set( FONT_SIZE_KEY, item.getData() );
+ } );
+
+ fontChanger.$element.prependTo( $form );
+ }
+
+ /**
+ * Adds an expand all sections field to the form
+ * @param {jQuery.Object} $form
+ * @ignore
+ * @method
+ */
+ function addExpandAllSectionsToForm( $form ) {
+ var cb, cbField;
+
+ cb = new OO.ui.CheckboxInputWidget( {
+ name: EXPAND_SECTIONS_KEY,
+ selected: storage.get( EXPAND_SECTIONS_KEY ) === 'true'
+ } );
+ cbField = new OO.ui.FieldLayout(
+ cb,
+ {
+ label: createLabel(
+ mw.msg(
'mobile-frontend-expand-sections-status' ),
+ mw.msg(
'mobile-frontend-expand-sections-description' )
+ ).$element
+ }
+ );
+ cb.on( 'change', function () {
+ storage.set( EXPAND_SECTIONS_KEY, this.isSelected() ?
'true' : 'false' );
+ }.bind( cb ) );
+
+ cbField.$element.prependTo( $form );
+ }
/**
* Add features, that depends on localStorage, such as "exapnd all
sections" or "fontchanger".
* The checkbox is used for turning on/off expansion of all sections on
page load.
* @method
+ * @ignore
*/
function initLocalStorageElements() {
- var cb,
- saveLI = $( '#mw-mf-settings-save' );
+ var
+ enableToggle = OO.ui.infuse( $( '#enable-beta-toggle' )
),
+ $form = $( '#mobile-options' );
+
+ // The beta toggle will now work without clicking submit
+ enableToggle.on( 'change', function () {
+ cookie( 'optin', this.isSelected() ? 'beta' : '' );
+ }.bind( enableToggle ) );
if ( mw.config.get( 'wgMFExpandAllSectionsUserOption' ) ) {
- cb = new Checkbox( {
- name: 'expandSections',
- label: mw.msg(
'mobile-frontend-expand-sections-status' ),
- description: mw.msg(
'mobile-frontend-expand-sections-description' )
- } );
- cb.insertBefore( saveLI );
+ addExpandAllSectionsToForm( $form );
+ }
+
+ if ( mw.config.get( 'wgMFEnableFontChanger' ) ) {
+ addFontChangerToForm( $form );
}
}
- $( initLocalStorageElements );
+ mw.loader.using( 'oojs-ui-widgets' ).then( initLocalStorageElements );
}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/mobile.special.mobileoptions.styles/mobileoptions.less
b/resources/mobile.special.mobileoptions.styles/mobileoptions.less
index cce9062..4f0e5e9 100644
--- a/resources/mobile.special.mobileoptions.styles/mobileoptions.less
+++ b/resources/mobile.special.mobileoptions.styles/mobileoptions.less
@@ -1,15 +1,22 @@
+@import 'mobile.variables';
+
/*
SETTINGS PAGE
*/
+.client-js {
+
+ #mw-mf-settings-save {
+ display: none;
+ }
+}
form.mw-mf-settings {
margin: 0;
padding: 0;
padding-bottom: 40px;
- .mobileoption {
+ .oo-ui-fieldLayout-header strong {
font-size: 1.1em;
font-weight: bold;
- margin-bottom: 40px;
}
.option-description {
@@ -17,9 +24,44 @@
font-size: 0.8em;
padding-right: 8px;
line-height: 2em;
- vertical-align: middle;
- display: block;
- position: relative;
}
+ .oo-ui-fieldLayout {
+ border-top: solid 1px @colorGray14;
+ padding-top: 12.5px;
+ }
+
+ #beta-field {
+ border-top: 0;
+ padding-top: 0;
+
+ &:before {
+ content: '';
+ width: 100%;
+ height: 10%;
+ background-color: @colorGray14;
+ padding-top: 20px;
+ margin-bottom: 10px;
+ margin-left: -16px;
+ display: block;
+ box-sizing: content-box;
+ padding-right: 32px;
+ }
+ }
+
+ .oo-ui-fieldLayout-body {
+ margin-bottom: 40px;
+ }
+
+ // Work around for T180652
+ .oo-ui-fieldLayout-header {
+ width: 65% !important;
+ }
+ .oo-ui-fieldLayout-field {
+ width: 30% !important;
+ text-align: right;
+ .oo-ui-widget {
+ text-align: left;
+ }
+ }
}
--
To view, visit https://gerrit.wikimedia.org/r/393851
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I70f68df9d2d305126444319b05675702af75de87
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: specialpages
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
