feat: add footer with code and bugs links

[olizilla]

Add a footer on the status page with links to the repo and bug reporing.

Only add it on the stats page as it looks weird during page load on the
other pages... it needs more design consideration before we roll it out
across all of them.

This isn't using our shared component library yet, but it can in the future.
There is a discussion to be had about whether components should decide
the namespace to use or if they should be agnostic to where the keys come
from, and let the page decide. The component library proposal suggested
we let the component decide, but it felt more natural to let the page decide
and wire it in. This would let us consolidate keys into fewer resources which
would be nice for translators (a couple of keys in lots and lots of resources
is awkward) and http requests (each namespace is loaded separately)

Also adds some layout tweaks on satatus page for large screens.

License: MIT
Signed-off-by: Oli Evans oli@tableflip.io

[fsdiogo]

I think we should go with something a bit less intrusive, e.g. only the GitHub logo with the link, something like this:

What do you think?

[lidel]

I'd prefer to keep visible text "Report a bug" for initial release (we can make it more subtle in future).
"See the code" can go away or be less visible.

btw: Status page looks weird on systems where default background is not #fff. We probably should set body background to white.

[olizilla]

I feel like we should avoid promoting github any more than it already is. The "see the code" link deliberately avoids mentioning it. I don't feel super strongly about this, but I feel I should mention that the omission is deliberate. I could be persuaded otherwise. I could get behind adding the github link next to the connection status in the top bar. I think it looks a little awkward / lost to have it in the footer on its own.

I think a "good solution" should invite people to go see the code, and should inform them that it's ok (and desirable) to report bugs. I don't love the footer, but it's pretty close to the invision proposal and it does both of those things.

[fsdiogo]

I feel like we should avoid promoting github any more than it already is. The "see the code" link deliberately avoids mentioning it.

Ok, I get that.

I could get behind adding the github link next to the connection status in the top bar.

I tried that but didn't like it, partially because that way we'd be mixing two entirely different things: a dynamic status icon and a static link that have no connection between them whatsoever.

I think it looks a little awkward / lost to have it in the footer on its own.

Agreed.

I think a "good solution" should invite people to go see the code, and should inform them that it's ok (and desirable) to report bugs. I don't love the footer, but it's pretty close to the invision proposal and it does both of those things.

Yes 🌟 What about adding it to the bottom of the sidebar instead of the footer?

[olizilla]

@fsdiogo could work, drop a screenshot!

[fsdiogo]

And it disappears when we collapse the NavBar. What do you think?

[olizilla]

OH YES PLEASE 🌟

[olizilla]

@fsdiogo I think the navbar footer should fix to the bottom, it looks odd on my screen kinda floating in the middle

A minimal change coulld be to position the footer absoutely with a vh unit. But perhaps we should position: fix the navbar?

[fsdiogo]

Yes, fixed position would be better indeed. The problem with that will be centering the text within the navbar container 🤔

[fsdiogo]

The sidebar is now position: fixed to avoid the empty blue background when the page has scroll:

[olizilla]

Nice!