Merge pull request #3052 from metabrainz/explore-cleanup

Explore page cards reorganization
metabrainz · Nov 28, 2024 · 32b3c5d · 32b3c5d
2 parents e92ec8d + bd4c7dc
commit 32b3c5d
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 40 deletions.
diff --git a/frontend/css/explore.less b/frontend/css/explore.less
@@ -50,14 +50,16 @@
   padding: 0.5em;
 }
 
-.explore-card-text-name > a {
+.explore-card-text-name {
   font-size: 18pt;
   font-weight: 900;
   font-family: Roboto, sans-serif;
-  &:visited,
-  &:hover,
-  &:visited:hover {
-    color: @blue;
+  a {
+    &:visited,
+    &:hover,
+    &:visited:hover {
+      color: @blue;
+    }
   }
 }
 
@@ -139,11 +141,8 @@
 .explore-page-divider {
   display: flex;
   align-items: baseline;
-  > *:first-child {
-    margin-right: 0.6em;
-    flex: 0;
-  }
+  gap: 1em;
   hr {
-    width: 100%;
+    flex: 1;
   }
 }
diff --git a/frontend/js/src/explore/Explore.tsx b/frontend/js/src/explore/Explore.tsx
@@ -6,6 +6,7 @@ import { useContext } from "react";
 import { Link } from "react-router-dom";
 import { Helmet } from "react-helmet";
 import GlobalAppContext from "../utils/GlobalAppContext";
+import { COLOR_LB_ORANGE } from "../utils/constants";
 
 type ExploreCardProps = {
   name: string;
@@ -80,36 +81,6 @@ export default function ExplorePage() {
             url="/explore/music-neighborhood/"
           />
         </div>
-        {currentUser?.name && (
-          <div>
-            <ExploreCard
-              name="Your Year in Music 2023"
-              desc="Review"
-              img_name="year-in-music-2023.jpg"
-              url={`/user/${currentUser.name}/year-in-music/2023/`}
-            />
-          </div>
-        )}
-        {currentUser?.name && (
-          <div>
-            <ExploreCard
-              name="Your Year in Music 2022"
-              desc="Review"
-              img_name="year-in-music-2022.jpg"
-              url={`/user/${currentUser.name}/year-in-music/2022/`}
-            />
-          </div>
-        )}
-        {currentUser?.name && (
-          <div>
-            <ExploreCard
-              name="Your Year in Music 2021"
-              desc="Review"
-              img_name="year-in-music-2021.jpg"
-              url={`/user/${currentUser.name}/year-in-music/2021/`}
-            />
-          </div>
-        )}
         <div>
           <ExploreCard
             name="Top Similar Users"
@@ -119,6 +90,69 @@ export default function ExplorePage() {
           />
         </div>
       </div>
+      {currentUser?.name && (
+        <>
+          <div className="explore-page-divider">
+            <h3>Your year in music</h3>
+            <hr />
+          </div>
+          <div className="row">
+            <div className="explore-card-container">
+              <div className="explore-card">
+                <div
+                  className="explore-card-img-overlay"
+                  style={{ mixBlendMode: "difference" }}
+                >
+                  {" "}
+                </div>
+                <div className="explore-card-img-clip flex-center">
+                  <div
+                    style={{
+                      fontSize: "6em",
+                      fontWeight: "bold",
+                      fontFamily: "Roboto",
+                      transform: "rotate(-8deg)",
+                      color: COLOR_LB_ORANGE,
+                    }}
+                  >
+                    2024
+                  </div>
+                </div>
+                <div className="explore-card-text">
+                  <div className="explore-card-text-name">
+                    Your Year in Music 2024
+                  </div>
+                  <div>Coming Soon</div>
+                </div>
+              </div>
+            </div>
+            <div>
+              <ExploreCard
+                name="Your Year in Music 2023"
+                desc="Review"
+                img_name="year-in-music-2023.jpg"
+                url={`/user/${currentUser.name}/year-in-music/2023/`}
+              />
+            </div>
+            <div>
+              <ExploreCard
+                name="Your Year in Music 2022"
+                desc="Review"
+                img_name="year-in-music-2022.jpg"
+                url={`/user/${currentUser.name}/year-in-music/2022/`}
+              />
+            </div>
+            <div>
+              <ExploreCard
+                name="Your Year in Music 2021"
+                desc="Review"
+                img_name="year-in-music-2021.jpg"
+                url={`/user/${currentUser.name}/year-in-music/2021/`}
+              />
+            </div>
+          </div>
+        </>
+      )}
       <div className="explore-page-divider">
         <h3>Beta</h3>
         <hr />