Page MenuHomePhabricator

OOUI FieldLayout too restrictive on mobile
Open, Needs TriagePublic

Assigned To
None
Authored By
Jdlrobson
Nov 16 2017, 12:32 AM
Project Tags
Referenced Files
F10831815: Screen Shot 2017-11-16 at 11.25.06 AM.png
Nov 16 2017, 7:28 PM
F10831817: Screen Shot 2017-11-16 at 11.26.37 AM.png
Nov 16 2017, 7:28 PM
F10831811: Screen Shot 2017-11-16 at 11.24.33 AM.png
Nov 16 2017, 7:28 PM
F10815875: Screen Shot 2017-11-15 at 4.23.47 PM.png
Nov 16 2017, 12:32 AM

Description

I'm rendering a simple checkbox with label using FieldLayout

$fields[] = new OOUI\FieldLayout(
				new OOUI\CheckboxInputWidget( [
					'name' => 'enableBeta',
					'selected' => $context->isBetaGroupMember(),
					'inputId' => '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' )
						)
					] ),
					'align' => 'left',
				]
			);

When rendered on a mobile device it appears like so:

Screen Shot 2017-11-15 at 4.23.47 PM.png (418×381 px, 32 KB)

The checkbox is given 60% of the available space and the label the remainder:

.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field, .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
    width: 60%;
}
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header, .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
    width: 35%;
    margin-right: 5%;
}

This makes sense on tablet but not so much on mobile.
A good starting point would be to restrict the above rules to tablet. Currently it is near impossible to override them without resorting to !important

Event Timeline

'align' => 'left' and 'align' => 'right' for FieldLayout are basically terrible and I recommend avoiding them. You can use 'align' => 'inline' for checkboxes instead, unless there is a design requirement here for it to be laid out differently?

The goal of the alignment is to have 2 checkboxes and 1 select dropdown right aligned for mobile.

This is how the UI currently looks on tablet:

Screen Shot 2017-11-16 at 11.24.33 AM.png (1,068×373 px, 46 KB)

and on mobile:

Screen Shot 2017-11-16 at 11.25.06 AM.png (341×538 px, 35 KB)

Using 'inline' shifts the widgets to the left which looks very odd on mobile (if you use android/ios you'll see all checkboxes are right aligned).

Screen Shot 2017-11-16 at 11.26.37 AM.png (330×541 px, 43 KB)

Well, it seems like we just don't support that. Someone will probably need to implement a new 'align' in FieldLayout.

I'm not sure what the align layout would be called as I'm not sure how alignment is used in VisualEditor but you can see my workaround for this here:
https://gerrit.wikimedia.org/r/#/c/391143/8/resources/mobile.special.mobileoptions.styles/mobileoptions.less

Since i'm resorting to !important hacks it would be great to have a cleaner way of doing this and it would be beneficial and platform consistent for any forms in OOUI that display on mobile for instance https://en.wikipedia.beta.wmflabs.org/wiki/Special:Preferences?useskin=minerva

Volker_E renamed this task from OOUI\FieldLayout too restrictive on mobile to OOUI FieldLayout too restrictive on mobile.Dec 21 2017, 5:00 PM
Volker_E moved this task from Unsorted to OOUI on the UI-Standardization board.