Page MenuHomePhabricator

Dimensions of checkboxes are defined in pixels and margins are not to spec
Closed, ResolvedPublic

Description

When you have a form e.g. Special:Preferences with wgUseMediaWikiUIEverywhere, it is obvious that checkboxes are squashed together and too big when there are many of them on the same page.


Version: unspecified
Severity: normal
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=71506

Details

Reference
bz70133

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:33 AM
bzimport set Reference to bz70133.
bzimport added a subscriber: Unknown Object (MLST).

gerritadmin wrote:

Change 154125 had a related patch set uploaded by Jdlrobson:
Tweak checkbox sizes to be relative depending on where used.

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

Can we get everything built as designed before we start logging bugs on the design of individual controls? Please do not alter the size of checkboxes at this time.

I'm confused.

What do you mean by "as designed". If you are referring to https://trello.com/c/JETLmm7F/7-check-boxes then the above is working towards that design...

Also this is in core and on a production wiki [1], so thus a bug makes total sense.

[1] http://en.wikipedia.org/wiki/Special:Userlogin

The checkboxes height is the same as the other buttons, input boxes and dropdowns, yes, they are bigger than "normal" checkboxes but lets get everything built before we start making design changes to specific controls like the checkbox size.

Jared. I'm a little confused. Buttons and inputs are not the same height.
A button had top and bottom padding of 0.5em for example and usually a font size of 1em. So that means the total height is 2em.
An input has top padding of 0.3em top and bottom so when font size is 1em, it has height 1.6em
We don't have a dropdown element.
The current checkbox is 24px by 24px and is not consistent with the spec so I'm proposing to change it to 1.6em height (in my original patch it was 1.5 but i've just noticed and corrected it) - that brings it inline with inputs.

The margins are also wrong - they do not match with the spec in https://trello.com/c/JETLmm7F/7-check-boxes

I'm not making any design changes, I'm making implementation changes....

Maybe try testing out the patch?

(To be fair my original bug report was not clear and for that I apologise). I just wanted to track the work. Hopefully comment 5 gives more clarity.

"Buttons and inputs are not the same height" has this been logged, because they should be the same height. if this patch syncs the height of these controls and the way they are specified in code, we're good to go.

Still looking for a reviewer to wrap this bug up and make the checkboxes look nicer. I care more now as they are being used on mobile and look ugly...

gerritadmin wrote:

Change 154125 merged by jenkins-bot:
Tweak checkbox sizes to be relative depending on where used.

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