Page MenuHomePhabricator
Create Task
Maniphest T233151

Remove mobile diff page drawer margin
Closed, ResolvedPublic2 Estimated Story Points
Actions

Description

Mobile diff drawer contents should be flush with the page container

Developer notes

This is not anything to do with icon changes we made but the post-content element we use.
We'll want to reset the left/right margin on mobile, without breaking it for the other breakpoints. A @media query using max-width that applies up to tablet should suffice here.

@media all and ( max-width: @width-breakpoint-tablet ) {
#mw-mf-userinfo .post-content {
    margin: 0;
}

QA steps

https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:MobileDiff/397130
ensure user icon is aligned with the hamburger menu on desktop, tablet and mobile breakpoints (as in the following screenshot):


Hamburger, WIkipedia logo and user icon should align in all cases.

Details

ProjectBranchLines +/-Subject
mediawiki/skins/MinervaNeuemaster+12 -0Remove mobile diff page drawer margin on mobile screens
mediawiki/extensions/MobileFrontendmaster+7 -0Remove mobile diff page drawer margin on mobile screens
Customize query in gerrit

Related Objects
Search...

Event Timeline

alexhollender created this task.Sep 17 2019, 8:24 PM
Jdlrobson renamed this task from [ICONS] mobile diff page drawer padding to Mobile diff page drawer padding.Sep 17 2019, 10:22 PM
Jdlrobson renamed this task from Mobile diff page drawer padding to Remove mobile diff page drawer margin.
Jdlrobson removed alexhollender as the assignee of this task.
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Needs Analysis to Upcoming on the Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.
alexhollender mentioned this in T229440: [EPIC] Refactor icon sizing in MF/Minerva to achieve consistency.Sep 17 2019, 10:51 PM
ovasileva triaged this task as Medium priority.Sep 18 2019, 9:54 AM
Jdlrobson updated the task description. (Show Details)Sep 18 2019, 3:53 PM
Jdlrobson updated the task description. (Show Details)Sep 19 2019, 5:41 PM
ovasileva updated the task description. (Show Details)Sep 19 2019, 5:44 PM
ovasileva set the point value for this task to 2.
ovasileva moved this task from Upcoming to Ready for Development on the Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.
Jdlrobson updated the task description. (Show Details)Sep 19 2019, 5:45 PM
nray claimed this task.Sep 25 2019, 7:43 PM
nray moved this task from Ready for Development to Doing on the Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.
Masumrezarock100 added a subscriber: Masumrezarock100.Sep 25 2019, 8:28 PM
nray added a comment.EditedSep 25 2019, 10:44 PM

@alexhollender Can you clarify what the ideal alignment for the user icon is on tablet size? I'm confused because part of the QA instructions for this ticket says:

Hamburger, WIkipedia logo and user icon should align in all cases.

However, if you look at the production site on tablet size:

https://en.m.wikipedia.org/wiki/Special:MobileDiff/917870692

You'll notice:

  1. The hamburger icon is aligned with the content.
  2. The lower wikipedia logo in the footer is aligned with the "Changes" header but not with the hamburger menu/content
  3. The user icon is not aligned with anything

As a result, I'm not really sure what the desired alignment is :). Should I align the user icon with the hamburger icon and not worry about the rest?

nray reassigned this task from nray to alexhollender.Sep 25 2019, 10:52 PM
nray moved this task from Doing to Needs Design Review on the Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.
nray added a subscriber: nray.

I'm pulling this into needs design review because I'm not really sure how to proceed with this ticket until ^^ has been answered

Jdlrobson moved this task from Needs triage to MinervaNeue on the Mobile board.Sep 26 2019, 12:12 AM
MBinder_WMF edited projects, added Readers-Web-Backlog (Kanbanana-2019-20-Q2); removed Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1).Sep 30 2019, 5:19 PM
MBinder_WMF moved this task from Needs Analysis to Needs Design Review on the Readers-Web-Backlog (Kanbanana-2019-20-Q2) board.Sep 30 2019, 5:25 PM
alexhollender added a comment.Oct 1 2019, 2:58 PM

@nray sorry for the delay here. Given that there seem to be a few other weird things happening at larger screen sizes I think we should just fix the issue on mobile for now and leave the rest for a separate task.

nray claimed this task.Oct 1 2019, 4:36 PM
nray moved this task from Needs Design Review to Doing on the Readers-Web-Backlog (Kanbanana-2019-20-Q2) board.

thanks @alexhollender . I'll just focus on the mobile alignment for now

gerritbot added a comment.Oct 1 2019, 7:30 PM

Change 540204 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/extensions/MobileFrontend@master] Remove mobile diff page drawer margin

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

gerritbot added a project: Patch-For-Review.Oct 1 2019, 7:30 PM
nray moved this task from Doing to Needs Code Review on the Readers-Web-Backlog (Kanbanana-2019-20-Q2) board.Oct 1 2019, 7:38 PM
gerritbot added a comment.Oct 1 2019, 8:01 PM

Change 540208 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/MinervaNeue@master] Remove mobile diff page drawer margin on mobile screens

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

Jdlrobson moved this task from Needs Code Review to Needs More Work on the Readers-Web-Backlog (Kanbanana-2019-20-Q2) board.Oct 1 2019, 8:01 PM
gerritbot added a comment.Oct 1 2019, 8:02 PM

Change 540204 abandoned by Nray:
Remove mobile diff page drawer margin on mobile screens

Reason:
I' thinking it should live in minerva: Ic3a47cf98380c501709df3f443cd43f37ce1abe8

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

nray moved this task from Needs More Work to Needs Code Review on the Readers-Web-Backlog (Kanbanana-2019-20-Q2) board.Oct 1 2019, 9:10 PM
Jdlrobson moved this task from Needs Code Review to Needs Design Review on the Readers-Web-Backlog (Kanbanana-2019-20-Q2) board.Oct 1 2019, 10:10 PM
gerritbot added a comment.Oct 1 2019, 10:26 PM

Change 540208 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Remove mobile diff page drawer margin on mobile screens

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

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.1; 2019-10-08).Oct 1 2019, 11:00 PM
Maintenance_bot removed a project: Patch-For-Review.Oct 1 2019, 11:10 PM
alexhollender removed nray as the assignee of this task.Oct 4 2019, 5:19 PM
alexhollender moved this task from Needs Design Review to Ready for Signoff on the Readers-Web-Backlog (Kanbanana-2019-20-Q2) board.

looks good

ovasileva closed this task as Resolved.Oct 7 2019, 10:14 AM
ovasileva claimed this task.

all done!

Content licensed under Creative Commons Attribution-ShareAlike 3.0 (CC-BY-SA) unless otherwise noted; code licensed under GNU General Public License (GPL) or 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