Footer Section Revamp #2439

akshaaatt · 2022-03-03T10:20:15Z

The Footer is a consistent layout present in all our pages hence it should make sure to highlight our fellow projects and important links.

akshaaatt · 2022-04-01T22:08:34Z

@brainzbot retest please

akshaaatt · 2022-04-02T16:08:31Z

@brainzbot retest please

root/layout/components/Head.js

mwiencek

Just to give some general feedback unrelated to my comments below: I think the font size of the footer is a few notches too big. :) Especially for something that will appear on every page. But let's hear what @reosarevok and @yvanzo think!

root/layout/components/Head.js

root/layout/components/Footer.js

mwiencek · 2022-04-03T01:19:52Z

root/layout/components/Footer.js

+                <span className="fs-4">
+                  {l('Development IRC: ')}
+                </span>
+                <a
+                  className="fw-bold fs-4"
+                  href="https://kiwiirc.com/nextclient/irc.libera.chat/?#metabrainz"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  {l('#metabrainz')}
+                </a>


#musicbrainz is the more general channel for the project, though I think it makes sense to just link to our IRC documentation, as the existing footer does, since that lists all of our channels and has other useful information. That would also allow people use their own IRC client.

Right, added both the IRC channels and tweaked the UI a bit!

Thanks, but that wasn't my suggestion. :) By "link to our IRC documentation, as the existing footer does," I meant https://musicbrainz.org/doc/Communication/IRC. This contains useful information and lets people connect with their own client. If I was looking to join a project's IRC channel, I wouldn't want a direct link to some web client: I'd want to read about what the purpose of each channel is first, and then connect with my own client.

mwiencek · 2022-04-03T01:23:11Z

root/layout/components/Footer.js

+                <a
+                  className="fw-bold fs-4"
+                  href="mailto:support@metabrainz.org"
+                >
+                  {l('support@metabrainz.org')}
+                </a>


Similarly, we probably just want a contact link to https://metabrainz.org/contact so that people read that before contacting us? @reosarevok would have more relevant input than me since he deals with support.

mwiencek · 2022-04-03T01:27:48Z

root/layout/components/Footer.js

+        <div className="row mt-4">
+          <div className="col-md-3 border-top pt-4 d-none d-md-block fs-4">
+            <p>
+              {l('OSS Geek? ')}


I noticed there are several strings with errant trailing whitespace (please search for them in your editor).

Suggested change

{l('OSS Geek? ')}

{l('OSS Geek?')}

mwiencek · 2022-04-03T01:30:48Z

root/layout/components/Footer.js

+        true,
+      )}
+    </button>
+    <ul aria-labelledby="languageDropdown" className="dropdown-menu">


We use kebab-case for class names and identifiers.

Suggested change

<ul aria-labelledby="languageDropdown" className="dropdown-menu">

<ul aria-labelledby="language-dropdown" className="dropdown-menu">

mwiencek · 2022-04-03T01:36:16Z

root/layout/components/Footer.js

+            {l('Brought to you by')}
+            <div className="image ms-1 me-1">
+              <img
+                alt="MetaBrainz"
+                height="24"
+                src="../../static/images/meb-icons/MetaBrainz.svg"
+                width="24"
+              />
+            </div>
+            <span>
+              {l('MetaBrainz Foundation')}
+            </span>


"Brought to you by MetaBrainz Foundation" should be one string; can we maybe inject a <span /> into the string and display the image with CSS instead?

mwiencek · 2022-04-03T01:40:24Z

root/layout/index.js

+        <div className="bs">
+          <Footer />
+        </div>


It seems like we can add the bs class inside Footer and not have to wrap it in a div.

mwiencek · 2022-04-03T01:41:41Z

root/layout/components/Footer.js

+          </div>
+          <div className="col-sm-12 col-md-2">
+            <h3 className="fs-2 fw-bold color-black">
+              {l('Join Us')}


I wonder if this shouldn't come before "Fellow Projects," because this is more relevant to MusicBrainz.

I have moved the Join Us column before fellow projects and shifted the Useful Links column to the last which solves this problem!

akshaaatt · 2022-05-26T15:55:26Z

@brainzbot retest please

metabrainz/musicbrainz-server#2439 is copying a bunch of logo assets into musicbrainz-server, but I think they should just be published with design-system. I imagine other projects will find them useful too. I've left brand/icons/ npmignored for now until we have a use for it, and brand/logos/development/ too, which is only useful for development and historical purposes.

santiagofn · 2023-04-27T03:16:24Z

@brainzbot retest please

yvanzo · 2023-04-27T07:23:01Z

@brainzbot please retest this.

reosarevok · 2023-04-27T07:47:29Z

@brainzbot, retest this please

root/layout/components/Footer.js

Co-authored-by: mwiencek

- Created a file with the raw input data used to build the footer - Most parts of the footer were moved to their own components

- Row-cols is used to define the layout on different breakpoints - Added margins on breakpoints < xl - Fixed margins in first block

- Added text about MusicBrainz - Change channel's list line-height - Added gray style - Removed <bold> from links

akshaaatt self-assigned this Mar 3, 2022

akshaaatt requested review from reosarevok and mwiencek March 3, 2022 10:20

reosarevok changed the base branch from homepage-revamp to master March 3, 2022 12:08

reosarevok changed the base branch from master to homepage-revamp March 3, 2022 12:08

akshaaatt force-pushed the akshat/footer-revamp branch from 8c4e061 to ca7ac25 Compare March 7, 2022 14:35

akshaaatt changed the base branch from homepage-revamp to master March 7, 2022 14:36

akshaaatt changed the base branch from master to homepage-revamp March 7, 2022 14:36

reosarevok force-pushed the akshat/footer-revamp branch from ca7ac25 to 8c4e061 Compare March 7, 2022 14:48

reosarevok force-pushed the homepage-revamp branch from 50e0a90 to cf40265 Compare March 7, 2022 16:41

akshaaatt force-pushed the akshat/footer-revamp branch 6 times, most recently from 4324258 to 1b61d89 Compare March 10, 2022 07:47

akshaaatt force-pushed the akshat/footer-revamp branch 3 times, most recently from 32c8e4b to be575b5 Compare April 1, 2022 21:37

akshaaatt force-pushed the akshat/footer-revamp branch from be575b5 to 2ac5ae2 Compare April 2, 2022 15:53

akshaaatt commented Apr 2, 2022

View reviewed changes

root/layout/components/Head.js Outdated Show resolved Hide resolved

akshaaatt force-pushed the akshat/footer-revamp branch 3 times, most recently from e2de953 to 0532889 Compare April 2, 2022 21:52

mwiencek requested changes Apr 3, 2022

View reviewed changes

akshaaatt force-pushed the akshat/footer-revamp branch 3 times, most recently from 005e452 to e78162e Compare April 3, 2022 13:22

akshaaatt force-pushed the akshat/footer-revamp branch from ee25bf7 to e9e5142 Compare May 23, 2022 15:49

akshaaatt force-pushed the akshat/footer-revamp branch from b988ab9 to 94bd2a8 Compare May 27, 2022 18:40

mwiencek mentioned this pull request Jun 2, 2022

Publish logos metabrainz/design-system#79

Merged

mwiencek force-pushed the akshat/footer-revamp branch from 94bd2a8 to 76415c8 Compare June 2, 2022 20:13

santiagofn mentioned this pull request Apr 27, 2023

MBS-13062: Implementing the footer redesign #2926

Merged

akshaaatt commented Apr 29, 2023

View reviewed changes

root/layout/components/Footer.js Show resolved Hide resolved

akshaaatt changed the base branch from homepage-revamp to akshat/header-revamp October 4, 2023 15:49

akshaaatt changed the base branch from akshat/header-revamp to homepage-revamp October 4, 2023 15:49

akshaaatt force-pushed the akshat/footer-revamp branch from de35777 to ce5011f Compare October 5, 2023 16:40

metabrainz deleted a comment from akshaaatt Oct 6, 2023

mwiencek force-pushed the homepage-revamp branch from ef8d841 to 75b1959 Compare October 6, 2023 11:53

mwiencek force-pushed the akshat/footer-revamp branch 2 times, most recently from ebf8a37 to cf62bc1 Compare October 6, 2023 12:38

akshaaatt requested a review from mwiencek October 6, 2023 15:44

akshaaatt and others added 8 commits October 6, 2023 18:37

MBS-13062: Convert the footer to Bootstrap

50b86ac

Co-authored-by: mwiencek

MBS-13062: Moving footer parts to new components

1a68b2f

- Created a file with the raw input data used to build the footer - Most parts of the footer were moved to their own components

MBS-13062: Fix responsive layout

996b09a

- Row-cols is used to define the layout on different breakpoints - Added margins on breakpoints < xl - Fixed margins in first block

MBS-13062: Texts changes

edd1ddd

- Added text about MusicBrainz - Change channel's list line-height - Added gray style - Removed <bold> from links

MBS-13062: Added list style with chevron as bullet

942acf2

Remove duplicate Flow type

cdc02b2

MBS-13062: More layout fixes

7c226b4

MBS-13062: Bump design-system & use its custom responsive borders

e064cc0

mwiencek force-pushed the akshat/footer-revamp branch from cf62bc1 to 4ac36d5 Compare October 6, 2023 16:41

Remove icons from fellow projects

940c74e

mwiencek force-pushed the akshat/footer-revamp branch from 4ac36d5 to 940c74e Compare October 6, 2023 16:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Footer Section Revamp #2439

Footer Section Revamp #2439

akshaaatt commented Mar 3, 2022 •

edited

akshaaatt commented Apr 1, 2022

akshaaatt commented Apr 2, 2022

mwiencek left a comment

mwiencek Apr 3, 2022

akshaaatt Apr 3, 2022

mwiencek Apr 3, 2022

mwiencek Apr 3, 2022

mwiencek Apr 3, 2022

akshaaatt Apr 3, 2022

mwiencek Apr 3, 2022

akshaaatt Apr 3, 2022

mwiencek Apr 3, 2022

akshaaatt Apr 3, 2022

mwiencek Apr 3, 2022

akshaaatt Apr 3, 2022

mwiencek Apr 3, 2022

akshaaatt Apr 3, 2022

akshaaatt commented May 26, 2022

santiagofn commented Apr 27, 2023

yvanzo commented Apr 27, 2023

reosarevok commented Apr 27, 2023

	<ul aria-labelledby="languageDropdown" className="dropdown-menu">
	<ul aria-labelledby="language-dropdown" className="dropdown-menu">

Footer Section Revamp #2439

Are you sure you want to change the base?

Footer Section Revamp #2439

Conversation

akshaaatt commented Mar 3, 2022 • edited

akshaaatt commented Apr 1, 2022

akshaaatt commented Apr 2, 2022

mwiencek left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

akshaaatt commented May 26, 2022

santiagofn commented Apr 27, 2023

yvanzo commented Apr 27, 2023

reosarevok commented Apr 27, 2023

akshaaatt commented Mar 3, 2022 •

edited