Intro Section in Homepage #2471

akshaaatt · 2022-03-31T10:51:58Z

This section highlights the first few features that a user encounters on the website.

This also sets up a minimal bootstrap setup we can expand on, and fontawesome icons.

These were converted to Flow syntax by hand from the official TypeScript types.

Now that we have the fontawesome types, we can set this to strict.

Fix DS

Correct index.js Fix About.js Fix css Fix css Finalize About css Update About.js

Facts section added to the homepage Add facts Add facts css Correct index.js Correct index.js Fixed Facts.js Updated facts Use spacing class for Facts.js Finalize Facts css Fix Facts section

About Section in the Homepage

Fix Explore.js Fix homepage.less Simplify css and correct the descriptions to have uniformity Fix css for title Fix css for title Simplify css Simplify code and make changes based on reviews Fix changes according to reviews Fix changes Remove fixed height of card Update homepage.less Small fix Update Explore.js Update Explore.js Update Explore.js Update Explore.js

Explore Section in Homepage

Add footer.less and fix css

Update Footer.js Fix tests and cleanup Update MBS-4555.json5 Update MBS-4555.json5

Fix tests Cleanup Update Footer.js Update MBS-9669.json5 Fix bootstrap js inclusion Hydrate Footer component Update Footer.js Fix review comments

reosarevok

Some comments for now based on what is on test.mb :)

reosarevok · 2022-04-26T08:20:45Z

root/components/home/Blog.js

+          <FontAwesomeIcon
+            icon={faBlog}
+            size="lg"
+          />


I understand maybe having no "Twitter" text for Twitter, but I really don't think this icon is self-explanatory as "Blog". Can we have "Blog" as text by it?

reosarevok · 2022-04-26T08:21:55Z

root/components/home/Intro.js

+  {key: 6, label: 'Area'},
+  {key: 7, label: 'Place'},
+  {key: 8, label: 'Annotation'},
+  {key: 9, label: 'CD Stud'},


Stub, not Stud :)

reosarevok · 2022-04-26T08:23:33Z

root/components/home/Intro.js

+const chipData = [
+  {key: 0, label: 'Artist'},
+  {key: 1, label: 'Release'},
+  {key: 2, label: 'Recording'},
+  {key: 3, label: 'Label'},
+  {key: 4, label: 'Work'},
+  {key: 5, label: 'Release Group'},
+  {key: 6, label: 'Area'},
+  {key: 7, label: 'Place'},
+  {key: 8, label: 'Annotation'},
+  {key: 9, label: 'CD Stud'},
+  {key: 10, label: 'Editor'},
+  {key: 11, label: 'Tag'},
+  {key: 12, label: 'Instrument'},
+  {key: 13, label: 'Series'},
+  {key: 14, label: 'Event'},
+  {key: 15, label: 'Documentation'},
+];


Showing all of the search options by default is a bit intimidating. A bunch of these (like CD stubs, tags, annotations) are not even entities, even though the search field says "search X entities" :) I'd suggest displaying the few most relevant options by default (Artist, Label, Release maybe?) with a button to show all options.

I am fine with a dropdown to showcase the other entities as you suggest but yeah showing them all nicely can be a good flex if we wanna, haha! :)

reosarevok · 2022-04-26T08:23:59Z

root/components/home/Intro.js

+
+export default class Intro extends React.Component {
+    state = {
+      data: 'Actively looking for a barcode...',


I'm confused about this line.

Removing the incomplete barcode from this PR. Can make that addition later.

reosarevok · 2022-04-26T08:24:31Z

root/components/home/Intro.js

+                  className="ms-4 mt-2"
+                  style={{color: 'white', height: '5vh'}}
+                >
+                  {l(`World's Biggest Open Source Music Database`)}


Only claim this if you're certain. I'm not, but I also haven't done the research.

I'm not sure whether there is a downside to claiming. Almost every company I see claims that they are the biggest. Tbh I do believe (without exhaustive research) that MusicBrainz is the largest open-source music database. This statement in any case is powerful and is definitely a pick for me. (aerozol suggested this text btw! :) )

reosarevok · 2022-04-26T08:26:39Z

root/components/home/Intro.js

+                        return false;
+                      }}
+                      placeholder="Search 41,054,421 Entities"
+                      style={{textTransform: 'capitalize'}}


Please don't. Not only is it confusing to see the text displayed differently from what I typed, but it's not even correct in many languages (such as Spanish or French) to capitalize every word of a title.

Right. Definitely needs to be reverted.

reosarevok · 2022-04-26T08:27:42Z

root/components/home/Intro.js

+                  <div className="col-4 col-md-2">
+                    <button
+                      className="btn btn-primary"
+                      onClick={searchButtonClick}
+                      type="button"
+                    >
+                      <FontAwesomeIcon
+                        icon={faSearch}
+                        size="lg"
+                      />
+                    </button>


Maybe we can actually have this touch the end of the search bar rather than float?

reosarevok · 2022-04-26T08:28:37Z

root/components/home/Intro.js

+                    <button
+                      className="btn btn-b-n"
+                      onClick={this.handleShow}
+                      type="button"
+                    >
+                      <FontAwesomeIcon
+                        icon={faScanner}
+                        size="lg"
+                      />
+                    </button>


This button does not show on test at the moment so I'm not sure what the point is supposed to be (https://fontawesome.com/icons/scanner?s=solid ?) but I'm confused about needing a second button other than "search".

Edit: Oh, I understand reading a few lines later that the idea is to have a way to scan a barcode - is this something anyone has expressed an interest on? I'm a bit confused by the addition.

Try out the button placed on https://musicbrainz-web.web.app @reosarevok

Removed this for now.

reosarevok · 2022-04-26T08:31:18Z

root/components/home/Intro.js

+                <div
+                  className="row ps-2 pe-2"
+                  style={{height: '40vh', overflow: 'hidden'}}
+                >
+                  {this.props.recentAdditions.map((artwork, index) => (
+                    <ReleaseArtwork
+                      artwork={artwork}
+                      key={index}
+                    />
+                  ))}
+                </div>
+              </div>


Is there a reason for the weirdly off-center, distracting background squares in test? Or is it a bug? It looks like a bug, but I'm not sure :)

reosarevok · 2022-04-26T08:33:43Z

root/static/styles/extra/homepage.less

@@ -11,6 +11,53 @@
    }
 }

+.intro {
+    background: linear-gradient(to right, @musicbrainz-purple 0%, @musicbrainz-orange 100%);


All this color seems a bit overpowering to me, but dunno.

Update SearchIcon.js Font Awesome types and minor UI fix Fixed the search bar inside the header and combined the username menu item and the my data menu item. Fix tests Fix tests Update font size

Fix package.json Update Intro section Fix tests Fix typo Fix implementations Fix artwork implementation Remove min-width for fixing responsive issue Fix css of pages Cleanup

akshaaatt and others added 10 commits March 7, 2022 18:41

Add the AppDownload.js component to the homepage

98243fa

This also sets up a minimal bootstrap setup we can expand on, and fontawesome icons.

Add fontawesome Flow types

0a7d8e6

These were converted to Flow syntax by hand from the official TypeScript types.

Set flow strict on AppDownload

cf40265

Now that we have the fontawesome types, we can set this to strict.

Updated to DS v1.0.6

4ac3182

Fix DS

About section added to homepage

fae6d4c

Correct index.js Fix About.js Fix css Fix css Finalize About css Update About.js

Facts section added to the homepage

d697a11

Facts section added to the homepage Add facts Add facts css Correct index.js Correct index.js Fixed Facts.js Updated facts Use spacing class for Facts.js Finalize Facts css Fix Facts section

Remove About content from index.js

692582d

Merge pull request #2412 from metabrainz/akshat/about-revamp

7fe80f0

About Section in the Homepage

Merge branch 'master' into homepage-revamp

596575b

Merge branch 'master' into homepage-revamp

9abf6ca

akshaaatt changed the base branch from master to homepage-revamp March 31, 2022 10:52

akshaaatt and others added 8 commits April 4, 2022 21:28

Remove content from index.js

8ebb27b

Merge pull request #2445 from metabrainz/akshat/explore-revamp

48397c5

Explore Section in Homepage

Assets added

67d76ef

Footer section updated

7a41866

Add footer.less and fix css

Move Language Dropdown to Footer

e13d5b7

Update Footer.js Fix tests and cleanup Update MBS-4555.json5 Update MBS-4555.json5

Fix review discussions

bfd4fcf

Fix tests Cleanup Update Footer.js Update MBS-9669.json5 Fix bootstrap js inclusion Hydrate Footer component Update Footer.js Fix review comments

Remove custom css for the footer and fix logo uri

b989c92

akshaaatt force-pushed the akshat/intro-new branch 5 times, most recently from 3e389fd to 271b30e Compare April 25, 2022 17:13

reosarevok reviewed Apr 26, 2022

View reviewed changes

Header component updated

413f710

Update SearchIcon.js Font Awesome types and minor UI fix Fixed the search bar inside the header and combined the username menu item and the my data menu item. Fix tests Fix tests Update font size

akshaaatt force-pushed the akshat/intro-new branch from 271b30e to 1ed6dfe Compare April 30, 2022 18:13

akshaaatt marked this pull request as ready for review April 30, 2022 18:14

Intro section in Homepage

c5a3b76

Fix package.json Update Intro section Fix tests Fix typo Fix implementations Fix artwork implementation Remove min-width for fixing responsive issue Fix css of pages Cleanup

akshaaatt force-pushed the akshat/intro-new branch from 1ed6dfe to c5a3b76 Compare May 9, 2022 16:23

akshaaatt force-pushed the akshat/intro-new branch from 8fde0d5 to c5a3b76 Compare May 9, 2022 16:29

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Intro Section in Homepage #2471

Intro Section in Homepage #2471

akshaaatt commented Mar 31, 2022

reosarevok left a comment

reosarevok Apr 26, 2022

reosarevok Apr 26, 2022

reosarevok Apr 26, 2022

akshaaatt Apr 30, 2022

reosarevok Apr 26, 2022

akshaaatt Apr 30, 2022

reosarevok Apr 26, 2022

akshaaatt Apr 30, 2022

reosarevok Apr 26, 2022

akshaaatt Apr 30, 2022

reosarevok Apr 26, 2022

akshaaatt Apr 30, 2022

reosarevok Apr 26, 2022

akshaaatt Apr 26, 2022

akshaaatt Apr 30, 2022

reosarevok Apr 26, 2022

reosarevok Apr 26, 2022

Intro Section in Homepage #2471

Are you sure you want to change the base?

Intro Section in Homepage #2471

Conversation

akshaaatt commented Mar 31, 2022

reosarevok 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment