Merge pull request #2976 from metabrainz/ansh/add-web-to-artist-page

Add Music Neighborhood Web to Artist Page
metabrainz · Sep 12, 2024 · 0a23e51 · 0a23e51
2 parents e68026b + f11f132
commit 0a23e51
Show file tree

Hide file tree

Showing 11 changed files with 520 additions and 271 deletions.
diff --git a/frontend/css/entity-pages.less b/frontend/css/entity-pages.less
@@ -146,18 +146,16 @@
       flex-basis: 350px;
     }
     .top-listeners,
-    .reviews,
-    .similarity {
+    .reviews {
       flex: 1;
       flex-basis: 300px;
     }
-    .similarity .artists {
-      display: grid;
-      grid-auto-flow: row;
-      grid-template-columns: repeat(auto-fill, 50%);
-    }
     .reviews {
-      max-width: 50%;
+      .review-cards {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
       .critiquebrainz-button {
         margin-top: 2em;
       }
@@ -198,14 +196,57 @@
 }
 
 .review {
-  position: relative;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 16px;
+  margin: 16px 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  transition: box-shadow 0.3s ease;
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+  .review-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .rating-stars {
+      margin-left: 8px;
+    }
+    .review-card-header-author {
+      font-size: 12px;
+      font-weight: bold;
+    }
+  }
   .text {
     max-height: 10em;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-size: 14px;
+    line-height: 1.6;
+    color: #333;
+
+    display: -webkit-box;
+    line-clamp: 4;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
   }
-  .read-more {
-    text-align: initial;
+  .review-card-footer {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    font-weight: bold;
+    color: #333;
+    .read-more-link {
+      text-decoration: none;
+      transition: color 0.3s ease;
+      color: #353070;
+
+      &:hover {
+        color: #4a4a8c;
+      }
+    }
   }
 }
 

diff --git a/frontend/css/music-neighborhood.less b/frontend/css/music-neighborhood.less
@@ -18,6 +18,16 @@
       justify-content: space-between;
     }
 
+    #artist-search-button {
+      margin-right: 10px;
+      background-color: @blue;
+
+      &:hover {
+        background-color: @mb_blue_light;
+        border-color: @mb_blue_dark;
+      }
+    }
+
     .share-buttons {
       margin-left: 30px;
       display: flex;
@@ -146,38 +156,38 @@
         }
       }
     }
+  }
+}
 
-    .artist-similarity-graph-container {
-      flex: 1;
-      height: calc(100vh - @brainzplayer-height);
-      max-height: 1120px; // 80% of the max content width (so we have a square aspect ratio
-      overflow: auto;
+.artist-similarity-graph-container {
+  flex: 1;
+  height: calc(100vh - @brainzplayer-height);
+  max-height: 1120px; // 80% of the max content width (so we have a square aspect ratio
+  overflow: auto;
 
-      .artist-similarity-graph-node {
-        cursor: pointer;
+  .artist-similarity-graph-node {
+    cursor: pointer;
 
-        .centered-text {
-          padding: 0 4px;
-          overflow: hidden;
+    .centered-text {
+      padding: 0 4px;
+      overflow: hidden;
 
-          display: flex;
-          align-items: center;
-          text-align: center;
-          border-radius: 50%;
-          height: inherit;
+      display: flex;
+      align-items: center;
+      text-align: center;
+      border-radius: 50%;
+      height: inherit;
 
-          .centered-text-inner {
-            width: 100%;
-          }
-          .ellipsis-3-lines {
-            display: -webkit-box;
-            -webkit-line-clamp: 3;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            line-height: 1.1em;
-          }
-        }
+      .centered-text-inner {
+        width: 100%;
+      }
+      .ellipsis-3-lines {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 1.1em;
       }
     }
   }

diff --git a/frontend/js/src/album/AlbumPage.tsx b/frontend/js/src/album/AlbumPage.tsx
@@ -12,6 +12,7 @@ import tinycolor from "tinycolor2";
 import { Helmet } from "react-helmet";
 import { useQuery } from "@tanstack/react-query";
 import { Link, useLocation, useParams } from "react-router-dom";
+import NiceModal from "@ebay/nice-modal-react";
 import {
   getRelIconLink,
   ListeningStats,
@@ -29,6 +30,7 @@ import ListenCard from "../common/listens/ListenCard";
 import OpenInMusicBrainzButton from "../components/OpenInMusicBrainz";
 import { RouteQuery } from "../utils/Loader";
 import { useBrainzPlayerDispatch } from "../common/brainzplayer/BrainzPlayerContext";
+import CBReviewModal from "../cb-review/CBReviewModal";
 
 // not the same format of tracks as what we get in the ArtistPage props
 type AlbumRecording = {
@@ -62,6 +64,7 @@ export default function AlbumPage(): JSX.Element {
   const { APIService } = React.useContext(GlobalAppContext);
   const location = useLocation();
   const params = useParams() as { albumMBID: string };
+  const { albumMBID } = params;
   const { data } = useQuery<AlbumPageProps>(
     RouteQuery(["album", params], location.pathname)
   );
@@ -457,7 +460,9 @@ export default function AlbumPage(): JSX.Element {
           <h3 className="header-with-line">Reviews</h3>
           {reviews?.length ? (
             <>
-              {reviews.slice(0, 3).map(getReviewEventContent)}
+              <div className="review-cards">
+                {reviews.slice(0, 3).map(getReviewEventContent)}
+              </div>
               <a
                 href={`https://critiquebrainz.org/release-group/${release_group_mbid}`}
                 className="critiquebrainz-button btn btn-link"
@@ -466,16 +471,32 @@ export default function AlbumPage(): JSX.Element {
               </a>
             </>
           ) : (
-            <>
-              <p>Be the first to review this album on CritiqueBrainz</p>
-              <a
-                href={`https://critiquebrainz.org/review/write/release_group/${release_group_mbid}`}
-                className="btn btn-outline"
-              >
-                Add my review
-              </a>
-            </>
+            <p>Be the first to review this album on CritiqueBrainz</p>
           )}
+          <button
+            type="button"
+            className="btn btn-info"
+            data-toggle="modal"
+            data-target="#CBReviewModal"
+            onClick={() => {
+              NiceModal.show(CBReviewModal, {
+                entityToReview: [
+                  {
+                    type: "release_group",
+                    mbid: albumMBID,
+                    name: album.name,
+                  },
+                  {
+                    type: "artist",
+                    mbid: artist.artists[0].artist_mbid,
+                    name: artist.artists[0].name,
+                  },
+                ],
+              });
+            }}
+          >
+            Add my review
+          </button>
         </div>
       </div>
     </div>