chore(footer): Restructure new homepage footer

[jessiehuff]

Closes #3609

[patternfly-build]

Preview: https://patternfly-org-pr-3870-site.surge.sh

[nicolethoen]

It seems this change does impact the layout of the website quite a bit. I wonder if there is some CSS overrides causing this behavior, or if there is some CSS (either in core, or in org) needed to address this.

WDYT @mcoker @srambach @andrew-ronaldson?

Before:

After:

[mcoker]

@nicolethoen @jessiehuff looks like it's just because the footer was moved out of the page component (it was in the main content area), and now comes after the page component.

The page component is set up so that it fills the entire viewport height, and then we scroll the contents of 1) the sidebar and 2) the main content area, if there is any overflow in those sections. So what I'm seeing is the page main content scrolling, then when you get to the bottom, the whole browser window scrolls to scroll the page component out of view and scroll the footer into view, which is why there are two scrollbars here:

Is the intent that the footer span the whole width of the viewport? Or can it go back in the bottom of the main content area?

[nicolethoen]

@mcoker it's updating the markup because (according to the issue) the ideal markup for a page would be:

<header />
<main />
<footer />

but right now it's

<header />
<main>
    <footer />
<main>

[mcoker]

@nicolethoen ah sorry I should have reviewed the original issue. I'm not sure how we can add this without ending up with double scrollbars. It would be fine if the footer was fixed/sticky to the bottom of the viewport (like masthead is to the top), but it's too tall to do that.

I have one idea - if it's a matter of fixing the markup so it's more a11able, I wonder if we could do this below. Assuming this works, it seems pretty easy, keeps the existing structure and scrolling and all of that, just changes the html element used in 2 spots for the a11y goodness.

• Change the existing main.pf-v5-c-page__main to div.pf-v5-c-page__main
• The direct child of the current main element is div#ws-page-content-router - change that to main#ws-page-content-router
• Append the <footer> to div.pf-v5-c-page__main, so it comes after main#ws-page-content-router

Otherwise I'd probably defer to @lboehling @andrew-ronaldson on a recommendation or example somewhere to refer to for what the scrolling behavior should be while retaining a good UX - what elements scroll and when, what elements are "sticky" and when, stuff like that

[mcoker]

Nice!! 🎃👍

[andrew-ronaldson]

sweet, LGTM

[nicolethoen]

This looks good! In order to add a sticky banner to the top of the site pointing to the alpha docs, I had to add flex-shrink: 0 to the #ws-page-content-router styles. I think that will conflict with your flex: 1 addition. You can see the banner running on staging right now (https://staging.patternfly.org/)

@mcoker do we need flex: 1? Will that play nice with the sticky banner?

[mcoker]

Gave this feedback to @nicolethoen and @jessiehuff offline but just for reference, a page section adjacent to the other sections with .pf-m-sticky-top should work without any modifications to the styles.

It can probably be moved out of #ws-page-content-router and included directly under .pf-v5-c-page__main, too - from what I tested, that seems OK and I didn't see any issues.

[mcoker]

💪🐰🥕