Page MenuHomePhabricator

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

Description

Mobile diff drawer contents should be flush with the page container

image.png (1×750 px, 189 KB)

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

Screenshot 2019-09-19 at 10.43.54 AM.png (714×1 px, 73 KB)

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

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_WMF as the assignee of this task.
Jdlrobson updated the task description. (Show Details)
ovasileva triaged this task as Medium priority.Sep 18 2019, 9:54 AM

@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

Screen Shot 2019-09-25 at 4.34.22 PM.png (2×1 px, 472 KB)

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

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

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 claimed this task.

all done!