per @RHo feedback in "Add an image" testing
- the icon is larger than expected
- the icon is not vertically centred with label
- the label is ~4px closer to the “Add images” checkbox than expected
- the label text is larger than expected
Etonkovidova | |
Nov 15 2021, 8:12 PM |
F34765817: Screenshot_20211124-140819_Chrome.jpg | |
Nov 24 2021, 10:17 PM |
F34765815: Screenshot_20211124-140215_Chrome.jpg | |
Nov 24 2021, 10:17 PM |
F34752147: image.png | |
Nov 17 2021, 5:17 PM |
F34751885: Screen Shot 2021-11-17 at 12.53.35 PM.png | |
Nov 17 2021, 11:56 AM |
F34751888: image.png | |
Nov 17 2021, 11:56 AM |
F34751824: Mobile.png | |
Nov 17 2021, 11:37 AM |
F34751826: Desktop.png | |
Nov 17 2021, 11:37 AM |
F34749099: Screen Shot 2021-11-15 at 12.10.57 PM.png | |
Nov 15 2021, 8:12 PM |
per @RHo feedback in "Add an image" testing
Subject | Repo | Branch | Lines +/- | |
---|---|---|---|---|
Structured tasks: adjustments for robot icon | mediawiki/extensions/GrowthExperiments | master | +33 -9 |
Change 739281 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):
[mediawiki/extensions/GrowthExperiments@master] Structured tasks: adjustments for robot icon
@RHo There are some differences on the font-size and line-height scales and the vertical margin between figma desktop spec and mobile spec.
Mobile, Minerva | Desktop, Vector |
Could we standardize these so we can target both using relative units. Or this is intended to have a different font scaling in mobile and desktop?
Could we standardize these so we can target both using relative units. Or this is intended to have a different font scaling in mobile and desktop?
Hi @Sgs - unfortunately there is a different base font size for Desktop and Mobile web. I try to use standard 4px grid regardless of mobile and desktop so actually it's intended that mobile and desktop have the same 4px space between the checkbox form element and the machine suggestions label (you have to measure between the entire checkbox component and the machine suggestions below):
Mobile | Desktop |
My question is towards the fonts scale factor being different in mobile/desktop. Assuming base font is set by the checkbox label (14px on desktop, 16px on Mobile) the sub-label size is:
Mobile 13px/16px= 0.8125em/rem; Desktop 12.4/14px= 0.8857em/rem;
In many situations we're just using one relative size for both mobile and desktop, ie: font-size: 0.925em; is used for the difficulty level description "Recommended for when you are first learning to edit"
Yes, that's what I mean by unfortunately the base font-size being different on Mobile (16px) vs Desktop (14px) so the line-heights and font-sizes will be different across platforms. However, my preference would be for the spacing between the elements to be standard 4px instead of relative em:
Change 739281 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Structured tasks: adjustments for robot icon
For @RHo quick review and any follow-ups (if needed). You may close the task if no further adjustments are needed.
The screenshots are from Android device (the fixes are in current production -wmf.9).