| Volker_E | |
| Nov 8 2018, 1:26 AM |
| F28421069: image.png | |
| Mar 19 2019, 4:17 PM |
| F27215451: T209015_Touch_target_Android_screenshot_IMG_20181113_dramatizaton.png | |
| Nov 14 2018, 7:48 AM |
| F27215401: T209015-Touch_target_Android_screenshot_IMG_20181113_231735.png | |
| Nov 14 2018, 7:48 AM |
| F27102573: image.png | |
| Nov 8 2018, 1:26 AM |
Current toolbar features 48px height 3em, which isn't only more than necessary in our own touch action requirements, but also seems to be choosen only as approximation.
https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blame/master/resources/mobile.editor.ve/editor.ve.less#L51
Proposed is to reduce the toolbar to OOUI normal mobile toolbar pattern size of maximum 40px, while retaining the label at 16px font-size.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| [WIP] Reduce editor toolbar size | mediawiki/extensions/MobileFrontend | master | +13 -8 |
Change 472370 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] [WIP] Reduce editor toolbar size
This is also the size non-OOUI ovelays in MobileFrontend. Seems like a pretty big change with lots of knock on effects, but in principle I think we should be considering if we can get away with smaller buttons. By comparison the tools in GoogleDocs mobile app are much smaller than ours.
Current toolbar features 48px height 3em, which (…) seems to be choosen only as approximation.
No, it's actually supposed to be exactly 3em high, because VE's desktop toolbar is also 3em high, and we would have to very carefully override a whole bunch of weird ugly CSS if we wanted the mobile one to have a different height. See T190596 / https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/450580. I guess you're discovering now how weird and ugly it is :)
All other mobile overlay headers (including the mobile wikitext editor) use height of 3.35em / 53px (no idea where this value comes from). So changing this one shouldn't affect other ones. But it's still difficult/a lot of work due to having to override nasty VE toolbar styles.
W3C writeup on target sizes: https://www.w3.org/WAI/GL/mobile-a11y-tf/wiki/Proposed_SC_Target_Size
[…] on target sizes
Yes, we were there – in T101409.
Let's compare with interaction elements in mobile browser header bar (Firefox) and with keys on open keyboard on a modern Android phone latest Android and high-density display:
 |  |
Latter with dramatization for better insight. Those buttons are fulfilling those requirements on one axis. We should, given the very small vertical space left, do not more than that. And with 5 buttons that seems reasonable even when we're taking even smaller devices into account.
Update 2019-03-19:
The wikitext editor toolbar (seen in this screenshot) has always been larger than the visual editor toolbar (discussed previously). See T215426.
Change 472370 abandoned by VolkerE:
[mediawiki/extensions/MobileFrontend@master] [WIP] Reduce editor toolbar size
Reason:
Not sure if there's an issue left with changes by other folks around the same time back then. No time to work on this…