Page MenuHomePhabricator

Flush section heading arrow icon to left of screen
Closed, ResolvedPublic2 Estimate Story PointsBUG REPORT

Description

Steps to reproduce

  1. Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Girl_group
  2. Click on the first section (History section) or any section

Expected results

  • Arrow icon should be aligned with the last modified icon at the bottom of the screen

Actual results

Check any additional observations

Acceptance criteria

  • Toggle icons are flushed to the left
  • No flash of unstyled content is observed if old cached HTML has been sent to the client.

QA steps

On a slow connection e.g. 2G load the mobile site. You should be able to see a blank place reserved for the toggle icon and when the toggle icon loads the text should remain fixed in place and not jump to the left.

Developer notes

@Jdrewniak pointed out to fix this by adding mw-ui-icon-flush-left to the toggle icons. We'll likely need to update the server side rendered version as well and make sure to avoid a flash of unstyled content on cached HTML

@alexhollender says its not a deployment blocker.

Details

Related Gerrit Patches:
mediawiki/extensions/MobileFrontend : masterFlush section heading arrow icon to left of screen

Event Timeline

nray created this task.Sep 12 2019, 11:47 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 12 2019, 11:47 PM
Jdlrobson renamed this task from [Regression] Section heading arrow icon appears outside its container outline when clicking a section to [Regression] ICONS Section heading arrow icon appears outside its container outline when clicking a section.Sep 13 2019, 12:01 AM
Jdlrobson triaged this task as Medium priority.Sep 13 2019, 12:09 AM
Jdlrobson added subscribers: alexhollender, Jdlrobson.

@alexhollender the fix here (if coming) will have to wait a little until the more serious issues are resolved. let me know if that will be a problem.

nray added a comment.Sep 16 2019, 7:36 PM

I don't notice this anymore on beta. Has this been resolved already?

Jdlrobson renamed this task from [Regression] ICONS Section heading arrow icon appears outside its container outline when clicking a section to Flush section heading arrow icon to left of screen.Sep 17 2019, 5:23 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a project: MobileFrontend.
Jdlrobson added a subscriber: Jdrewniak.
ovasileva set the point value for this task to 2.Sep 24 2019, 4:08 PM
Jdlrobson updated the task description. (Show Details)Sep 24 2019, 4:09 PM

Change 538984 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/extensions/MobileFrontend@master] Flush section heading arrow icon to left of screen

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

Change 538984 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Flush section heading arrow icon to left of screen

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

Edtadros reassigned this task from Edtadros to ovasileva.Oct 1 2019, 12:08 AM
Edtadros added a subscriber: Edtadros.

Test Result

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

QA steps

✅ AC1: On a slow connection e.g. 2G load the mobile site. You should be able to see a blank place reserved for the toggle icon and when the toggle icon loads the text should remain fixed in place and not jump to the left.

@alexhollender the expected results listed in the bug report state that the arrow icon should be aligned with the last modified icon at the bottom of the screen. Here's a screen shot showing that alignment:

ovasileva closed this task as Resolved.Oct 1 2019, 10:48 AM

Looks good!