refactor: Entity Review Component

metabrainz · Sep 9, 2024 · f1f8002 · f1f8002
1 parent 812a94c
commit f1f8002
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 20 deletions.
diff --git a/frontend/css/entity-pages.less b/frontend/css/entity-pages.less
@@ -151,6 +151,11 @@
       flex-basis: 300px;
     }
     .reviews {
+      .review-cards {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
       .critiquebrainz-button {
         margin-top: 2em;
       }
@@ -191,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/js/src/album/AlbumPage.tsx b/frontend/js/src/album/AlbumPage.tsx
@@ -457,7 +457,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"

diff --git a/frontend/js/src/artist/ArtistPage.tsx b/frontend/js/src/artist/ArtistPage.tsx
@@ -421,7 +421,7 @@ export default function ArtistPage(): JSX.Element {
         )}
       </div>
 
-      {similarArtists && similarArtists.artists && (
+      {similarArtists && similarArtists.artists.length > 0 ? (
         <>
           <h3 className="header-with-line">Similar Artists</h3>
           <div className="similarity">
@@ -436,15 +436,19 @@ export default function ArtistPage(): JSX.Element {
             />
           </div>
         </>
-      )}
+      ) : null}
       <div className="reviews">
         <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/artist/${artist?.artist_mbid}`}
               className="critiquebrainz-button btn btn-link"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               More on CritiqueBrainz…
             </a>
@@ -455,6 +459,8 @@ export default function ArtistPage(): JSX.Element {
             <a
               href={`https://critiquebrainz.org/review/write/artist/${artist?.artist_mbid}`}
               className="btn btn-outline"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               Add my review
             </a>

diff --git a/frontend/js/src/utils/types.d.ts b/frontend/js/src/utils/types.d.ts
@@ -539,6 +539,7 @@ type CritiqueBrainzReview = {
   languageCode?: string;
   rating?: number;
   user_name?: string;
+  published_on?: string;
 };
 
 type CritiqueBrainzReviewAPI = {

diff --git a/frontend/js/src/utils/utils.tsx b/frontend/js/src/utils/utils.tsx
@@ -1005,20 +1005,27 @@ export function getReviewEventContent(
   const userName =
     _.get(eventMetadata, "user_name") ??
     _.get(eventMetadata, "user.display_name");
+  const publishedOn = _.get(eventMetadata, "published_on");
   return (
     <div className="review">
       {!isUndefined(eventMetadata.rating) && isFinite(eventMetadata.rating) && (
-        <div className="rating-container">
-          <b>Rating: </b>
-          <Rating
-            readonly
-            onClick={() => {}}
-            className="rating-stars"
-            ratingValue={eventMetadata.rating}
-            transition
-            size={20}
-            iconsCount={5}
-          />
+        <div className="review-card-header">
+          <div>
+            <b>Rating: </b>
+            <Rating
+              readonly
+              onClick={() => {}}
+              className="rating-stars"
+              ratingValue={eventMetadata.rating}
+              transition
+              size={20}
+              iconsCount={5}
+            />
+          </div>
+          <span className="review-card-header-author">
+            {publishedOn &&
+              ` on ${preciseTimestamp(publishedOn, "includeYear")}`}
+          </span>
         </div>
       )}
       <div className="text">
@@ -1029,13 +1036,13 @@ export function getReviewEventContent(
           {additionalContent}
         </ReactMarkdown>
       </div>
-      <div className="author read-more">
+      <div className="review-card-footer">
         by {userName}
         <a
           href={`https://critiquebrainz.org/review/${reviewID}`}
           target="_blank"
           rel="noopener noreferrer"
-          className="pull-right"
+          className="pull-right read-more-link"
         >
           Read on CritiqueBrainz
         </a>