Page MenuHomePhabricator
Create Task
Maniphest T232801

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

Assigned To
ovasileva
Authored By
• nray
Sep 12 2019, 11:47 PM
Tags
Referenced Files
F30513628: T232801.gif
Oct 1 2019, 12:08 AM
F30513626: T232801.png
Oct 1 2019, 12:08 AM
F30509992: Screen Shot 2019-09-30 at 10.36.13 AM.png
Sep 30 2019, 2:36 PM
F30381051: T229440-2.png
Sep 17 2019, 5:23 PM
F30381054: T229440-2b.png
Sep 17 2019, 5:23 PM
F30313354: Screen Shot 2019-09-12 at 5.43.17 PM.png
Sep 12 2019, 11:47 PM
Subscribers
Aklapper
• alexhollender_WMF
Edtadros
Jdlrobson
Jdrewniak
• nray

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

Screen Shot 2019-09-12 at 5.43.17 PM.png (916×3 px, 402 KB)

Expected results

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

Actual results

T229440-2.png (2×1 px, 305 KB)
T229440-2b.png (2×1 px, 305 KB)

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 Changes in Gerrit:
SubjectRepoBranchLines +/-
Flush section heading arrow icon to left of screenmediawiki/extensions/MobileFrontendmaster+9 -6
Customize query in gerrit

Related Objects
Search...

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_WMF, 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.

phuedx added a parent task: T229440: [EPIC] Refactor icon sizing in MF/Minerva to achieve consistency.Sep 13 2019, 9:11 AM
• 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 moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.
Jdlrobson added a subscriber: Jdrewniak.
• alexhollender_WMF mentioned this in T229440: [EPIC] Refactor icon sizing in MF/Minerva to achieve consistency.Sep 17 2019, 10:51 PM
ovasileva set the point value for this task to 2.Sep 24 2019, 4:08 PM
ovasileva moved this task from Upcoming to Ready for Development on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.
Jdlrobson updated the task description. (Show Details)Sep 24 2019, 4:09 PM
• nray claimed this task.Sep 24 2019, 8:11 PM
• nray moved this task from Ready for Development to Doing on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.
gerritbot added a comment.Sep 24 2019, 10:52 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

gerritbot added a project: Patch-For-Review.Sep 24 2019, 10:52 PM
• nray moved this task from Doing to Needs Code Review on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.Sep 24 2019, 10:54 PM
Jdlrobson reassigned this task from • nray to • alexhollender_WMF.Sep 25 2019, 5:02 PM
Jdlrobson moved this task from Needs Code Review to Needs Design Review on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.
gerritbot added a comment.Sep 25 2019, 5:29 PM

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

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.25; 2019-10-01).Sep 25 2019, 6:00 PM
Maintenance_bot removed a project: Patch-For-Review.Sep 25 2019, 6:10 PM
• alexhollender_WMF reassigned this task from • alexhollender_WMF to Edtadros.Sep 30 2019, 2:36 PM
• alexhollender_WMF moved this task from Needs Design Review to Needs QA on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.

Checked on beta. Fixed.

Screen Shot 2019-09-30 at 10.36.13 AM.png (1×848 px, 322 KB)

MBinder_WMF edited projects, added Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2); removed Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1).Sep 30 2019, 5:20 PM
MBinder_WMF moved this task from Needs Analysis to Needs QA on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2) board.Sep 30 2019, 5:27 PM
Edtadros reassigned this task from Edtadros to ovasileva.Oct 1 2019, 12:08 AM
Edtadros moved this task from Needs QA to Ready for Signoff on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2) board.
Edtadros subscribed.

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.

T232801.gif (1×579 px, 1 MB)

@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:

T232801.png (2×1 px, 277 KB)

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

Looks good!

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits