Page MenuHomePhabricator

Newcomer tasks: difficulty filter styling issues on mobile
Closed, ResolvedPublic

Description

Currently, the filter is button on mobile:

It should be changed to a toolbar, with the following details:

  • The filter is not a button, but a full-width toolbar flush under the "Suggested edits" header
  • There is a dropdown arrow in the RHS of the toolbar
  • Filter text should not be bolded, and should be vertically centered in the filter bar
  • While the label on desktop says "Easy, Medium edits", on mobile it should just be "Easy, Medium"

Zeplin mockup: https://app.zeplin.io/project/5bd0b069495b5d0a002e7eb6/screen/5d9fa0b980829f083440110c

Details

Related Gerrit Patches:
mediawiki/extensions/GrowthExperiments : masterFix styling issues with filter button bar
mediawiki/extensions/GrowthExperiments : masterSuggested edits: style filter buttons toolbar-like on mobile

Event Timeline

Tgr claimed this task.Nov 26 2019, 12:09 AM

Change 552946 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: style filter buttons toolbar-like on mobile

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

Tgr added a comment.Nov 26 2019, 4:13 AM

When the modal dialog opens, the whole page can shift left. (Only seems to happen on narrow mobile screens; I saw it in desktop Chrome in mobile emulation mode using iPhone 8.) That's due to rGOJU6a5914dda8f8: Compensate for loss of margin when opening modals and not related to the patch, but it becomes much more jarring now that it affects the button that's being clicked. Not sure what to do about that; it seems like an OOUI bug, but maybe I just don't understand what it is for (or maybe it doesn't affect real mobile devices?).

before clickafter click

Change 552946 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: style filter buttons toolbar-like on mobile

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

When the modal dialog opens, the whole page can shift left. (Only seems to happen on narrow mobile screens; I saw it in desktop Chrome in mobile emulation mode using iPhone 8.) That's due to rGOJU6a5914dda8f8: Compensate for loss of margin when opening modals and not related to the patch, but it becomes much more jarring now that it affects the button that's being clicked. Not sure what to do about that; it seems like an OOUI bug, but maybe I just don't understand what it is for (or maybe it doesn't affect real mobile devices?).

before clickafter click

It does affect real mobile devices - I've been observing it on iPhone 6s, where it looks like this:

Before clickAfter click

I filed it as a separate issue (along with the issue with arrows not fitting the mobile screen) - T239952: Newcomer tasks - Suggested edits card shifted left after difficulty filter button is clicked

For @RHo review:

Before (testwiki)After (betalabs)

hi @Tgr - a few minor points and this should be good, thanks!

  • font-size 16px of the text should be 16px (though this may be addressed through some css changes in task T238280)
  • height of the bar should be 48px
  • there should be a box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
  • the dropdown icon should be about 4px further than it is from the right

Change 556309 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Fix styling issues with filter button bar

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

Change 556309 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Fix styling issues with filter button bar

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

For Design review - //Note://the mockup has a left-hand arrow to navigate back; the current overlay for a suggested card has 'X'. It was changed in some phab task, as far as I remember, so it look fine to me.

betalabs (with the patch)current production

Thanks for checking @Etonkovidova - yes the close X instead of back arrow is fine, and this looks good for PM sign-off.

MMiller_WMF closed this task as Resolved.Dec 17 2019, 2:11 AM

Thank you!