Page MenuHomePhabricator

[mobile] Newcomer tasks - UI issues with Suggested edits module and Difficulty overlay
Open, Needs TriagePublic

Description

NOTE: UI issues should be fixed according to the mobile mocks. For quick reference see the Invision mocks here, and redline specs see the Mobile Suggested edit mocks in the Growth Zeplin board (App link: zpl://project?pid=5bd0b069495b5d0a002e7eb6 or Web link)

(1) Mobile Intro overlay display issues

  • The link at the bottom of the intro screen cannot be clicked since it cannot be scrolled into the view
  • CTA buttons should be sticky in the dialog header on mobile.
  • Bold text headers should be a separate paragraph.

(2) Mobile version of Difficulty overlay should be a single column.

(3) Mobile suggested edits card

  • The difficulty level labels should be centered
  • Info "i" icon size and tap target should be larger on mobile
  • More info card on mobile should be a full width card that appears up from the bottom (similar to how references on articles appear on in Minerva)

(4) "Get suggestions' and 'Cancel' buttons should not partially overlay the last portion of text


Per item (1), the buttons should be on the sticky header on mobile.

(5) The image should be different on mobile's difficulty overlay (it is Difficulty-landscape-rtl.svg found in T235444) to accommodate the mobile format.

Details

Related Gerrit Patches:
mediawiki/extensions/GrowthExperiments : masterStartEditingDialog: Convert to ProgressDialog for mobile support
mediawiki/extensions/GrowthExperiments : masterStartEditingDialog: Change layout for mobile
mediawiki/extensions/GrowthExperiments : masterTaskExplanationWidget: Make the (i) icon bigger on mobile
mediawiki/extensions/GrowthExperiments : masterSuggestedEdits: Fix styling of difficulty indicator on mobile

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptTue, Oct 29, 9:55 PM
Etonkovidova edited projects, added Growth-Team (Current Sprint); removed Growth-Team.
Etonkovidova renamed this task from [mobile minor] UI issues with Suggested edits module and Difficulty overlay to [mobile minor] Newcomer tasks - UI issues with Suggested edits module and Difficulty overlay.Thu, Oct 31, 10:20 PM

Change 548553 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] SuggestedEdits: Fix styling of difficulty indicator on mobile

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

Change 548553 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] SuggestedEdits: Fix styling of difficulty indicator on mobile

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

Etonkovidova updated the task description. (Show Details)Fri, Nov 8, 5:59 AM
Etonkovidova renamed this task from [mobile minor] Newcomer tasks - UI issues with Suggested edits module and Difficulty overlay to [mobile] Newcomer tasks - UI issues with Suggested edits module and Difficulty overlay.Fri, Nov 8, 6:03 AM
Etonkovidova updated the task description. (Show Details)
RHo updated the task description. (Show Details)Fri, Nov 8, 10:05 AM
Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptFri, Nov 8, 10:05 AM
MMiller_WMF updated the task description. (Show Details)
MMiller_WMF added subscribers: Catrope, kostajh, Tgr and 2 others.

Change 551300 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] TaskExplanationWidget: Make the (i) icon bigger on mobile

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

Change 551301 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Convert to ProgressDialog for mobile support

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

Change 551302 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Change layout for mobile

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

(1) Mobile Intro overlay display issues

  • The link at the bottom of the intro screen cannot be clicked since it cannot be scrolled into the view

This was because the CTA buttons were in the way; now that they're in the header, this is fixed.

  • CTA buttons should be sticky in the dialog header on mobile.

Fixed in the second patch (StartEditingDialog: Convert to ProgressDialog for mobile support)

  • Bold text headers should be a separate paragraph.

I didn't notice that the bold text and the plain text following it were supposed to have been different messages, because they're in the same paragraph in desktop (but apparently not in mobile?!). Rather than splitting the messages and forcing them to be retranslated, I hacked around this by applying strong { display: block; } to these paragraphs, as well as forcing a float clear after the <strong> tags so that the non-bolded text in the second paragraph always goes below the floated image. This is in the third patch (StartEditingDialog: Change layout for mobile).

(2) Mobile version of Difficulty overlay should be a single column.

Fixed in the third patch (StartEditingDialog: Change layout for mobile).

(3) Mobile suggested edits card

  • The difficulty level labels should be centered

Done in the previous patch (Nov 5).

  • Info "i" icon size and tap target should be larger on mobile

Fixed in the first patch (TaskExplanationWidget: Make the (i) icon bigger on mobile)

  • More info card on mobile should be a full width card that appears up from the bottom (similar to how references on articles appear on in Minerva)

This has its own task already: T238164.

(4) "Get suggestions' and 'Cancel' buttons should not partially overlay the last portion of text

This was caused by the buttons being at the bottom, moving them into the header fixes this.

(5) The image should be different on mobile's difficulty overlay (it is Difficulty-landscape-rtl.svg found in T235444) to accommodate the mobile format.

Fixed in the third patch (StartEditingDialog: Change layout for mobile).