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?

@Jdlrobson, to sum up, -1'ed because of T141002#2577837 and T141002#2579114.

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:

• •

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

@Nirzar @Jdlrobson added to retro

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

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

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

https://gerrit.wikimedia.org/r/#/c/306565/ needs a review too.

Mibad.

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

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.

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

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

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

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

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.

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

^ Per the above – thanks @Issimo_15

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

@ovasileva added