Page MenuHomePhabricator

API sandbox's descriptions are positioned and styled poorly
Closed, ResolvedPublic

Description

The position of the descriptions is odd. They don't appear to line up with anything. (fixed) they make the forms very tall, they are the same size, weight and colour as the labels which makes the page harder to scan:

image.png (130×1 px, 14 KB)

Event Timeline

I was fiddling with this and made the following changes:

  1. Reduce the amount of width taken by the labels
  2. Align the description and the input
  3. Reduce description text's font size
  4. Change description text's color to a readable gray - Base30 (#72777d)

Screen Shot 2017-02-28 at 6.34.41 PM.png (428×775 px, 58 KB)
Screen Shot 2017-02-28 at 6.34.52 PM.png (597×769 px, 130 KB)

Reduce the amount of width taken by the labels

Does OO.ui.FieldLayout actually support that?

Change description text's color to a readable gray - Base30 (#72777d)

That always seems to result in complaints about readability. Particularly in combination with reduced font size, I'm skeptical.

Reduce the amount of width taken by the labels

Does OO.ui.FieldLayout actually support that?

I don't think so, not sure. Either way, if the solution makes sense we could always override CSS, or better still, find more places with a similar issue and standardize it, both in the Wikimedia Design Style Guide and OOUI.

Change description text's color to a readable gray - Base30 (#72777d)

That always seems to result in complaints about readability. Particularly in combination with reduced font size, I'm skeptical.

My mistake, I meant it to be slightly bigger, smaller than the label, and as large as the sidebar text.

font-size-comparison.png (98×274 px, 5 KB)

Edit: That gray is AA compliant.

I'm not really bothered by the rest, but we should definitely reduce the amount of width taken by the labels. We can ponder doing this in OOjs UI for all interfaces later, but for now we could just override it with CSS for ApiSandbox.

Change 635631 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/core@master] ApiSandbox: Style field help with oo-ui-inline-help class

https://gerrit.wikimedia.org/r/635631

Change 635631 merged by jenkins-bot:
[mediawiki/core@master] ApiSandbox: Style field help with oo-ui-inline-help class

https://gerrit.wikimedia.org/r/635631

The spacing with that patch is weird. The help labels almost look like headings for the field below them.

image.png (523×1 px, 59 KB)

Change 635758 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/core@master] Restore padding around field spacers

https://gerrit.wikimedia.org/r/635758

Change 635758 merged by jenkins-bot:
[mediawiki/core@master] ApiSandbox: Restore padding around field spacers

https://gerrit.wikimedia.org/r/635758

matmarex assigned this task to Esanders.

Presumably resolved?