BB-794: Redesign the footer to provide Good UX and be responsive for small screens

[MohamedAli00949]

Hi there,
I am interested in books and use the Bookbrainz site more times some of them are on my smartphone.

Problem

While I am using a site on my smartphone to learn more about it, I have noticed that it's some of the components aren't responsive for all devices one of these components is the footer so I have opened the BB-794 issue on JIRA and resolved it myself.
As you can see in the following images the footer wasn't responsive with all devices

Solution

I have redesigned the footer as you can see in the following images to be responsive and provide a good UX.

Areas of Impact

The footer

[MonkeyDo]

Hi, sorry it took me so long to review the PR.

I think some aspects like the padding are a definite improvement over the existing footer, but the alignment in smaller screen sizes doesn't look very good:

There is plenty of space on screen, so I'm not so sure why you are aligning everything to the left when wider sizes spread the elements over the whole width.

Happy to help you come up with a design that fits if you want to have another go at the task :)
Do let me know

[MohamedAli00949]

Thanks @MonkeyDo for this good feedback,
I am interested in improving the design so I hope to show your suggestions.

[MonkeyDo]

Fantastic :)

As a matter of fact, our resident designer has already designed a footer for all the MetaBrainz projects, and we have already implemented it in ListenBrainz for example:

The code for that footer can be found here: https://github.com/metabrainz/listenbrainz-server/blob/master/frontend/js/src/components/Footer.tsx

The original design file can be found here. If the design and the ListenBrainz footer don't match, copy LB rather than the design: https://www.figma.com/design/ln8XiFLit634KC3YkUW2RS/MusicBrainz-redesign?node-id=1111-2910&t=wjnUCIUeSXTTcgNR-0

And here is another example of a PR which implements the footer for CritiqueBrainz (using flask rather than react, but in case any css or something is useful): metabrainz/critiquebrainz#491

Let me know if you are up to the task or have any questions ! :)

[MonkeyDo]

Closing this in favor of a new PR, considering the changes will be different from those in this PR.
See last comment above for some context.

[MohamedAli00949]

Closing this in favor of a new PR, considering the changes will be different from those in this PR. See last comment above for some context.

Thanks @MonkeyDo , for your reply my apologies for the late response.
I will show your replay and modify my solution at a new PR the next time.