Page MenuHomePhabricator

Remove mobile diff page drawer margin
Closed, ResolvedPublic2 Story Points

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

Related Gerrit Patches:
mediawiki/skins/MinervaNeue : masterRemove mobile diff page drawer margin on mobile screens
mediawiki/extensions/MobileFrontend : masterRemove mobile diff page drawer margin on mobile screens

Event Timeline

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)
ovasileva triaged this task as Normal 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.
Jdlrobson updated the task description. (Show Details)Sep 19 2019, 5:45 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 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

@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

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

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

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

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

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

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

all done!