Footer refresh

[mtruj013]

Done

• refreshed footer as per design and doc

QA

• View the site locally in your web browser at: https://ubuntu-com-13825.demos.haus/
• Check against design and doc
  • Be sure to check smaller screens as well

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-10375

[webteam-app]

Demo

Jenkins

demos.haus

[lyubomir-popov]

hi @mtruj013 mostly looks good, a few things I noticed (review not finished):

• the orignal idea for small screens was to have a horizontally scrollable inline list of links , not just the top level links:

https://www.figma.com/file/Le4TTzyOFbcbqTPJ1tVoZT/U.com---Home-and-footer-(rebranding)?type=design&node-id=3304%3A13136&mode=design&t=jMHZQ4Fgbeh3nAl7-1

• links are for some reason bold - they should be regular font weight:

• back to top is broken

• anchors outside paragraphs, leading to misalignments:
  

[mtruj013]

@lyubomir-popov thanks for the feedback! I'll let you know once I've pushed, but just wanted to note that the original design I was given is this one https://www.figma.com/file/Le4TTzyOFbcbqTPJ1tVoZT/U.com---Home-and-footer-(rebranding)?type=design&node-id=2910-7036&mode=design&t=WBcXnLD5p0YuILNN-0

[mtruj013]

A few questions/comments for you @lyubomir-popov:

links are for some reason bold - they should be regular font weight

They are h5s (styling wise) as per both versions of the design, there's nothing else affecting font weight. This still seems to be the most appropriate heading styling from what I can see, but please let me know what you'd like it to be changed to.

back to top is broken

I fixed the alignment, there were some old footer styles that were messing with the padding, but other than that the functionality should be unaffected (tested and passed locally). Let me know if it's still not working for you.

anchors outside paragraphs, leading to misalignments

They're not wrapped in paragraphs because they're list elements, inline ones at that. Surely these should not be wrapped in a p tag which is a block level element. Could you please clarify?

[juanruitina]

And here my feedback for the footer "MVP":

• I'm happy to just link to the bubbles' homes on mobile for the MVP; but please remove u-hide--small from the links under the last three items, Solutions, Sectors, More: they don't make sense otherwise
• Let's add the "u-responsive-realign" class that we used in https://ubuntu.com/download/desktop to the "p-inline-list" lists, that way they will wrap nicely
• Remove "Canonical" from "Canonical Embedding Programme" so we avoid wrapping on large screens.
• I see all other links below (About us, Community, Careers... Legal information, Data privacy...) are small, but they aren't on Figma

Accessibility concern: I think on the next iteration we will need to make sure we turn this navigation into a single list; navs should be lists and not contain headings. Headings pollute the accessibility tree but without the nav being a list we can't convey hierarchy otherwise. But I think we can address this later, the heading thing is a problem in the live version so it's not a regression.

[juanruitina]

I pushed some changes for better responsiveness, thank you MariaPaula for letting me indulge in a bit of coding :) Feel free to tweak as needed.

All links that are not bubble subitems are now visible on smaller viewports too, there's no reason why we shouldn't show them (particularly the legal ones). I also changed the spacing of the sections as per the design (regular instead of shallow).

I see some misalignments in the top margin of links, but I noticed @lyubomir-popov flagged it up and it's a visual matter anyway.

This is OK UX-wise now.

[lyubomir-popov]

They are h5s (styling wise) as per both versions of the design, there's nothing else affecting font weight. This still seems to be the most appropriate heading styling from what I can see, but please let me know what you'd like it to be changed to.

sorry my bad, you're right - bold is correct here.

They're not wrapped in paragraphs because they're list elements, inline ones at that. Surely these should not be wrapped in a p tag which is a block level element. Could you please clarify?

this is what we need to achieve: baseline alignement between h5s on the left and the rest:

Atm, they do not quite align. Discussing this with @bartaz, ideally we should have a version of the inline list that matches text (paragraph, h5, h6) in terms of top and bottom padding. This is something we can upstream to vanilla, but for now can we try something like that locally? You'd need to extend the inline list and apply paddin-top and padding-bottom on the items. The values can be found here for padding-bottom, and here for padding-top:

[lyubomir-popov]

one small p-rule class we've forgot to add