Page MenuHomePhabricator

Align elements in article footer on beta
Closed, ResolvedPublic3 Story Points

Description

Goal

  1. Separate article from the chrome of wikipedia.
  2. have better alignment for wikipedia branding
  3. remove the useless Mobile label from the footer
  4. Use color to highlight related pages

Changes

  1. have a base color in the background. article background will be white and the base background will be gray. the related articles card will sit on the base background.
  2. left align wikipedia branding
  3. left align the legal text and links
  4. add icon to the last edited banner. and make banner flush.

Wikipedia Zero
Be sure to verify everything is still working correctly in Wikipedia Zero in conjunction with these changes. It historically has treated the footer specially because of the complexity of the footer.

Mocks

Basic footer without related pages (non-beta users)

Footer with related pages

Footer for recently edited page

Desktop layout for the footer

Spec
https://app.zeplin.io/project.html#pid=57a120dbaa97eeab3c8805ae&dashboard&tags=T141002%20-%20Footer%20design

Again, it's important to verify (in at least one RL-capable UA and in <noscript>) that Wikipedia Zero is still working for the footer part once this change is in force. Some people familiar with getting your W0 config working: @jhobs, @Yurik, @Mholloway (and I believe @Jdlrobson ?). @dr0ptp4kt can also help, although best to slot a meeting in case of this fallback option, as he'll need time to hydrate a VM and re-read the code/config for anything running locally and not using a Varnish edge (IIRC, Varnish edge may work for beta cluster).

Suggested testing, RTL+LTR, portrait+landscape.

  • Android 2.3 Browser phone form factor
  • Android 4.x or higher Chrome phone form factor
  • Android 4.x or higher Chrome tablet form factor
  • iOS 9.3 iPhone Safari
  • iOS 9.3 iPad Safari
  • Opera Mini non-compressed (not extreme mode) Android 4.x or higher phone form factor
  • Opera Mini compressed ("Opera Mini" mode on iOS, "Extreme" mode on Android, inbuilt functionality on older devices like J2ME Opera Mini)
  • UC browser (not mini with compression) Android 4.x or higher phone form factor
  • UC Mini (with compression) Android 4.x or higher phone form factor
  • Windows 7.5+ Phone IE
  • Desktop Firefox
  • Desktop Chrome
  • Desktop Safari
  • Internet Explorer 11
  • Edge

Details

Related Gerrit Patches:
mediawiki/extensions/MobileFrontend : masterFinal design tweaks to footer
mediawiki/extensions/MobileFrontend : masterHygiene: Tidy up page background css rules in beta
mediawiki/extensions/MobileFrontend : masterAdd separators between footer links in beta
mediawiki/extensions/MobileFrontend : masterFooter / chrome color changes
mediawiki/extensions/MobileFrontend : masterUpdate the footer in beta
mediawiki/extensions/RelatedArticles : masterAllow skins a mechanism to decide on placement of related pages

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 305083 merged by jenkins-bot:
Update the footer in beta

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

@Nirzar, how should the cases like these be handled?

Notice the whitespace after the footer.

@bmansurov that should be grey too.

think of the grey as the basic background of html and article being white background.

notice we changed the header recently to be grey. so article is a piece of paper kept on top of subtle grey surface :)

btw the grey for header looks different than footer. can we use the same?

Change 306472 had a related patch set uploaded (by Jdlrobson):
Footer / chrome color changes

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

Change 306473 had a related patch set uploaded (by Jdlrobson):
Add separators between footer links in beta

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

@Nirzar what symbol should i use for the separator in the footer links?
I'm using 𐤟 but apparently this renders as a square on certain platforms.

Can confirm the above:

Nirzar added a comment.EditedAug 24 2016, 8:39 PM

&bull; •

^ has the most support. if not then you can use this
http://www.fileformat.info/info/unicode/char/2022/index.htm

OR

:before {
content:"";
height:2px;
width:2px;
background blue whatvs;
border-radius:4px;
}

^^ something like this

I've used the bull:
https://gerrit.wikimedia.org/r/#/c/306473/

Also replied to Baha's comment on other patch:
https://gerrit.wikimedia.org/r/#/c/306472/2

@MBinder_WMF this has easily morphed into a 5 point card at least.

@MBinder_WMF this has easily morphed into a 5 point card at least.

I agree

Retro Item: can we analyze the reason behind it? so we can have better understanding of which part of the process needs improvement.

Change 306565 had a related patch set uploaded (by Bmansurov):
Beta: make the page background gray

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

Change 306472 merged by jenkins-bot:
Footer / chrome color changes

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

^ 2a98a979 is C-1 from a couple o' folk.

Change 306473 merged by jenkins-bot:
Add separators between footer links in beta

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

phuedx reassigned this task from Jdlrobson to Nirzar.Aug 25 2016, 6:50 PM
phuedx moved this task from Code Review to Ready for Signoff on the Reading-Web-Sprint-79-Uh-oh board.

@Nirzar: The recent handful of changes should be automatically deployed to the Beta Cluster within 10 minutes. I'm assigning this to you for initial sign off and then it'll be over to @dr0ptp4kt (or me, I guess) for testing in a load of browsers.

Nirzar added a comment.EditedAug 25 2016, 7:07 PM

follow zeplin people >> zpl.io/1Xn8em

#NoSoupForYou #itsOkayToHateDesigners

Change 306565 merged by jenkins-bot:
Hygiene: Tidy up page background css rules in beta

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

phuedx removed Nirzar as the assignee of this task.Aug 25 2016, 7:34 PM

So apparently the icon being squeezed was an issue with the SVG. i gave the updated SVG to @Jdlrobson and attaching here too.

Ignore the first point in my past comment.

Change 306732 had a related patch set uploaded (by Jdlrobson):
Final design tweaks to footer

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

306732 looks good to go to me, but someone else has to merge.

Change 306732 merged by jenkins-bot:
Final design tweaks to footer

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

Final keyword detected in commit message. Aborting…

Change 306732 merged by jenkins-bot:
Final_final design tweaks to footer

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

I'm not really a bot.

phuedx added a comment.EditedAug 26 2016, 11:13 AM

Passes:

  • Chrome (52.0.2743.116) on OS X El Capitan (10.11.6)
  • Firefox (47.0.1) on OS X El Capitan (10.11.6)
  • Safari (9.1.2) on OS X El Capitan (10.11.6)
  • Opera 39 on Windows 10
  • IE11 on Windows 10
  • Safari 9.3 on an emulated iPad Pro
  • Chrome (49.0.2623.91) on Android 6 running on a Galaxy S7
  • Chrome (49.0.2623.91) on Android 4.4 running on a Galaxy Tab 4 10.1
  • Safari 9 on an iPhone 6 Plus
  • Safari 8 on an iPad Air 2

Failures:

  • Android Browser 2.3 on an emulated Samsung Galaxy S2

Note well the orientation of the chevron on the right. Edit: It's pointing DOWN!!1

  • Edge 14 on Windows 10

Note well the blurred icon on the left.

  • Opera Mini 8.0.3

Opera Mini suffers from both of the above.

  • Safari 8 on an iPad Air 2

Note the vertical stacking of the related articles cards, which happens in either orientation. This may be a pre-existing bug but this is the first time I've seen it.


@Nirzar: While I've passed Chrome et. al., I did notice that the footer links weren't floated to the right at desktop widths per your original mocks, e.g. see the Edge 14 on Windows 10 screenshot above. Are you happy with this?

I did notice that the footer links weren't floated to the right at desktop widths per your original mocks

footer links you mean privacy, terms of use? i think they are on left even on desktop.

Edge 14 on Windows 10 screenshot above. Are you happy with this?

almost, the icon is getting cut off in multiple places it seems. how much of work it is to fix that? on IE and on Opera?

one more note on safari on ipad, why are the related pages not next to each other? is ipad portrait slightly missing the media query breakpoint where we decide the floating of related pages?

If the icon is broken in Windows 10 I worry that might be an issue with mw-ui-icon. Can we confirm if this is a problem with all icons (if so let's work on that in a separate bug)

I think @phuedx is referring to how they are floated on


I had a quick look at this and unless we change the font size we'll be hard pressed to get all that information on one line without revisiting our max width.

@Nirzar is that a new problem or has related pages always had that problem? ie. do you see that problem on production right now?

Moved back to sign off as don't see anything actionable right now and I would prefer to work in sub tasks for any future changes.

Moved back to sign off as don't see anything actionable right now and I would prefer to work in sub tasks for any future changes.

What about the chevron issue @phuedx mentioned?

I think @phuedx is referring to how they are floated on

oh right, my bad. it's not a blocker but good to have.

The ipad seems to a new issue. here's production on iPad Air 2 / iOS 9.3 / Safari

@bmansurov yeah i think the opera mini chevron issue is important?
also alignment on opera mini needs love. i mean we can add to our low grade browser debt but do we wanna add more debt?

btw @bmansurov i just saw your comment about use of chevron and HCI guideline, will write a reply shortly.

This is why I like subtasks. Completely missed that

Nirzar could you raise a subtask for the related pages bug. Not quite sure what the regression is but I'm only just having my coffee.

@Nirzar ready for another go at sign off given T144038 is an existing issue and your comment about floating the links?

dr0ptp4kt added a comment.EditedAug 26 2016, 9:42 PM

It's on the correct part of the screen, but does the chevron need to point left when in RTL like on https://en.m.wikipedia.beta.wmflabs.org/wiki/Main_Page?uselang=ar ?

Also, is the PHP code setup for RTL support here on Opera Mini with compression? It looked to remain LTR like in the other screenshot from @phuedx even when in RTL.

The downward pointing Chevron was present on Windows Mobile 7.5 IE HTC Trophy 7, like it was on Opera Mini compressed in the screenshots.

The Chevron isn't showing on UC Mini (compressed), but the recent changes link does work. The diagonal arrow out of the BY-CC-SA is also overlapping the text on UC Mini. But getting at what @Nirzar notes, perhaps this is for a different sweep.

Otherwise:

  • UC browser (not mini with compression) Android 4.x or higher phone form factor
  • Opera Mini non-compressed (not extreme mode) Android 4.x or higher phone form factor

On LTR Samsung Wave II was fine. In uselang=ar it was tofu, but that's the device's language compatibility from the look of it.

Change 307024 had a related patch set uploaded (by Jdlrobson):
Rotate chevron in opposite direction for RTL

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

@dr0ptp4kt Can we resolve this? Otherwise it needs to be carried over to Reading-Web-Sprint-80-V-for-Vandalism

I defer to @Nirzar. @Nirzar do you approve of the implementation? If so, please mark resolved. Also...

@Nirzar if you think this task is done would you please file follow on task(s) for treatment of the remainder of items as you see fit?

Chevron points rightward, not leftward, in RTL on, for example, Safari on iOS 9 iPhone 5c.

Clock icon overlaps text on Opera Mini with compression.

Clock icon is clipped on Opera Mini with compression (related: T144036: Icons appear blurred in new footer on Opera Mini and Edge, where there's the question of simply removing the clock icon).

Yurik removed a subscriber: Yurik.Aug 29 2016, 11:49 PM

what is the status here. as far as i know, these issues are now filed as separate tasks.

should we resolve this?

Also, i still don't see it on labs beta or wikipedia beta but i have seen it somewhere before but if anyone can post a link to final version of this task being implemented we can close this.

@Nirzar, yep, you should check the new footer minus other changes (that are tracked in new tasks) to verify if it's done to your liking. You can test here: https://en.m.wikipedia.beta.wmflabs.org/wiki/Main_Page?mobileaction=beta

Nirzar added a comment.EditedAug 31 2016, 9:04 PM

Okay. looks good given the scope of the task. the stretched icon issue is still there but we tried fixing it with SVG. didn't work. i can follow up with the team to figure it out.

Jdlrobson closed this task as Resolved.Aug 31 2016, 9:16 PM

Per @Nirzar. Icon issues are tracked in T144036.

The footer is partially shown in diff pages (before it was hidden on that pages).

Issimo_15 reopened this task as Open.Sep 1 2016, 9:48 PM
Issimo_15 lowered the priority of this task from High to Low.
Issimo_15 added a subscriber: Yurik.
Issimo_15 removed a subscriber: Yurik.
phuedx removed Nirzar as the assignee of this task.Sep 2 2016, 7:42 AM
phuedx added a subscriber: Yurik.
phuedx added a comment.Sep 2 2016, 7:44 AM

^ Per the above – thanks @Issimo_15

phuedx added a comment.Sep 2 2016, 7:52 AM

Since it's a non-trivial bug, I've created T144579 to track it. Again, thanks @Issimo_15!

ovasileva closed this task as Resolved.Sep 2 2016, 10:54 AM
ovasileva added a subscriber: MBinder_WMF.

Closing and will keep an eye on the subtasks. Since this pulled over into this sprint and we didn't have the complete discussion in the retro last time, @MBinder_WMF - could we add it to this sprint's retro as well?