Page MenuHomePhabricator

OOjs UI fields are not uniform height
Closed, ResolvedPublic

Assigned To
Authored By
TrevorParscal
Jan 25 2015, 10:08 PM
Referenced Files
F40788: pasted_file
Feb 13 2015, 10:28 PM
F40792: pasted_file
Feb 13 2015, 10:28 PM
F40790: pasted_file
Feb 13 2015, 10:28 PM
F40786: pasted_file
Feb 13 2015, 10:28 PM

Description

Both for alignment and spacing purposes, all fields should be about 2.5em high (32px @ 0.875em). This includes things like text inputs, buttons, dropdowns and more complex widgets like the dimensions widget.

Event Timeline

TrevorParscal assigned this task to matmarex.
TrevorParscal raised the priority of this task from to Needs Triage.
TrevorParscal updated the task description. (Show Details)
TrevorParscal added a project: OOUI.
TrevorParscal subscribed.
  • I'm not entirely convinced that this should always be this way (buttons can be a bit higher than text inputs perfectly fine for me, if they're aligned correctly; checkboxes and radios are different size too). But it should probably be true for all inputs and dropdowns at least.
  • Which theme(s) need(s) changes?
Jdforrester-WMF set Security to None.
gerritbot subscribed.

Change 189360 had a related patch set uploaded (by Bartosz Dziewoński):
[WIP] Add horizontal alignment test to demo

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

Patch-For-Review

Change 190574 had a related patch set uploaded (by Bartosz Dziewoński):
Add missing ButtonInputWidget.less and corresponding mixin

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

Patch-For-Review

Here's how the demo looks with the two patches above.

Assuming we want to match the size in both themes, do we want to make the dropdowns smaller or the textboxes bigger?

Apex theme:
JS:

pasted_file (95×677 px, 9 KB)

PHP:
pasted_file (95×677 px, 9 KB)

MediaWiki theme:
JS:

pasted_file (95×677 px, 7 KB)

PHP:
pasted_file (95×677 px, 7 KB)

Change 190574 merged by jenkins-bot:
Add missing ButtonInputWidget.less and corresponding mixin

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

I haven't done anything about the heights of things, by the way. (Not sure if I should.)

Change 189360 merged by jenkins-bot:
demo: Add horizontal alignment test

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