Last modified: 2014-10-01 11:02:49 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T72133, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 70133 - Dimensions of checkboxes are defined in pixels and margins are not to spec
Dimensions of checkboxes are defined in pixels and margins are not to spec
Status: RESOLVED FIXED
Product: MediaWiki
Classification: Unclassified
MediaWiki UI (Other open bugs)
unspecified
All All
: Unprioritized normal (vote)
: ---
Assigned To: Nobody - You can work on this!
:
Depends on:
Blocks: 69200
  Show dependency treegraph
 
Reported: 2014-08-28 19:04 UTC by Jon
Modified: 2014-10-01 11:02 UTC (History)
6 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments

Description Jon 2014-08-28 19:04:50 UTC
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.
Comment 1 Gerrit Notification Bot 2014-08-28 19:05:01 UTC
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
Comment 2 Jared Zimmerman (WMF) 2014-08-28 23:01:01 UTC
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.
Comment 3 Jon 2014-08-28 23:11:08 UTC
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
Comment 4 Jared Zimmerman (WMF) 2014-08-28 23:14:28 UTC
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.
Comment 5 Jon 2014-08-28 23:44:47 UTC
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?
Comment 6 Jon 2014-08-28 23:46:53 UTC
(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.
Comment 7 Jared Zimmerman (WMF) 2014-08-28 23:59:59 UTC
"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.
Comment 8 Jon 2014-09-22 23:13:44 UTC
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...
Comment 9 Gerrit Notification Bot 2014-09-23 23:40:31 UTC
Change 154125 merged by jenkins-bot:
Tweak checkbox sizes to be relative depending on where used.

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

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links