From 27bd383f002eecbe611ef2c0750b26870abbfa98 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Sun, 30 Jan 2022 02:21:47 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=AE=20Using=20Masonry=20to=20grid=20ou?=
 =?UTF-8?q?t=20the=20issue=20covers=20in=20VolumeDetails?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/assets/scss/App.scss               | 40 +++++++++++++------
 src/client/components/RecentlyImported.tsx    |  7 +---
 .../components/VolumeDetail/VolumeDetail.tsx  | 30 +++++++++++---
 src/client/components/VolumeGroups.tsx        |  1 -
 4 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index c4bf6e9..70d906e 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -323,7 +323,7 @@ $size-8: 0.9rem;
 
 .comic-vine-match-drawer {
   // comic detail drawer
- 
+
   .search-criteria-card {
     width: 100%;
     .card-content {
@@ -339,6 +339,25 @@ $size-8: 0.9rem;
   }
 }
 
+// Volume detail
+.volume-details {
+  .issues-container {
+    display: -webkit-box; /* Not needed if autoprefixing */
+    display: -ms-flexbox; /* Not needed if autoprefixing */
+    display: flex;
+    width: auto;
+    .issues-column {
+      padding: 10px;
+      background-clip: padding-box;
+      & > div {
+        /* change div to reference your elements you put in <Masonry> */
+        margin-bottom: 20px;
+      }
+    }
+    
+  }
+}
+
 // comicvine search results
 .search-results-container {
   margin: 15px 0 0 0;
@@ -348,13 +367,11 @@ $size-8: 0.9rem;
     margin: 0 0 10px 0;
     padding: 1em;
     border-radius: 10px;
-    background: #F2F1F9;
+    background: #f2f1f9;
     .cover-image {
       border-radius: 5px;
     }
     .search-result-details {
-      
-
       .score {
         float: right;
       }
@@ -362,21 +379,20 @@ $size-8: 0.9rem;
     .volume-information {
       margin-top: -2.5em;
       width: 80%;
-      background: #FDECD1;
+      background: #fdecd1;
       border-radius: 10px;
     }
     .vertical-line {
       position: relative;
       top: -25px;
       left: 1.5rem;
-      border: 2px dotted #CCC;
-      width:20px;
-      min-height:35px;
-      
-    border-color: transparent transparent #F3A22D #F3A22D;
+      border: 2px dotted #ccc;
+      width: 20px;
+      min-height: 35px;
+
+      border-color: transparent transparent #f3a22d #f3a22d;
       border-bottom-left-radius: 10px;
-  }
-  
+    }
   }
 }
 
diff --git a/src/client/components/RecentlyImported.tsx b/src/client/components/RecentlyImported.tsx
index 8c7f4c5..f2865cc 100644
--- a/src/client/components/RecentlyImported.tsx
+++ b/src/client/components/RecentlyImported.tsx
@@ -2,10 +2,7 @@ import React, { ReactElement } from "react";
 import Card from "./Carda";
 import { Link } from "react-router-dom";
 import ellipsize from "ellipsize";
-import {
-  removeLeadingPeriod,
-  escapePoundSymbol,
-} from "../shared/utils/formatting.utils";
+import { escapePoundSymbol } from "../shared/utils/formatting.utils";
 import { isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../shared/utils/tradepaperback.utils";
 import Masonry from "react-masonry-css";
@@ -22,7 +19,7 @@ export const RecentlyImported = ({
     default: 5,
     1100: 4,
     700: 2,
-    500: 1,
+    600: 1,
   };
   return (
     <>
diff --git a/src/client/components/VolumeDetail/VolumeDetail.tsx b/src/client/components/VolumeDetail/VolumeDetail.tsx
index 2cac574..a1764a1 100644
--- a/src/client/components/VolumeDetail/VolumeDetail.tsx
+++ b/src/client/components/VolumeDetail/VolumeDetail.tsx
@@ -6,9 +6,16 @@ import {
   getComicBookDetailById,
   getIssuesForSeries,
 } from "../../actions/comicinfo.actions";
+import Masonry from "react-masonry-css";
 import { Card } from "../Carda";
 
 const VolumeDetails = (props): ReactElement => {
+  const breakpointColumnsObj = {
+    default: 5,
+    1100: 4,
+    700: 2,
+    600: 1,
+  };
   const comicBookDetails = useSelector(
     (state: RootState) => state.comicInfo.comicBookDetail,
   );
@@ -28,13 +35,13 @@ const VolumeDetails = (props): ReactElement => {
     !isUndefined(comicBookDetails.sourcedMetadata.comicvine)
   ) {
     return (
-      <div className="container">
+      <div className="container volume-details">
         <div className="section">
           <h1 className="title">
             {comicBookDetails.sourcedMetadata.comicvine.volumeInformation.name}
           </h1>
           <div className="columns is-multiline">
-            <div className="column is-narrow">
+            <div className="column is-narrow is-full">
               <Card
                 imageUrl={
                   comicBookDetails.sourcedMetadata.comicvine.volumeInformation
@@ -44,11 +51,22 @@ const VolumeDetails = (props): ReactElement => {
                 hasDetails={false}
               />
             </div>
-            <div>
-              {issues.map((issue, idx) => {
-                return <img key={idx} src={issue.image.thumb_url} />;
+            <Masonry
+              breakpointCols={breakpointColumnsObj}
+              className="issues-container"
+              columnClassName="issues-column"
+            >
+              {issues.map((issue) => {
+                return (
+                  <Card
+                    key={issue.id}
+                    imageUrl={issue.image.thumb_url}
+                    orientation={"vertical"}
+                    hasDetails={false}
+                  />
+                );
               })}
-            </div>
+            </Masonry>
             {/* <pre>{JSON.stringify(comicBookDetails, undefined, 2)}</pre> */}
           </div>
         </div>
diff --git a/src/client/components/VolumeGroups.tsx b/src/client/components/VolumeGroups.tsx
index 268a406..e05c544 100644
--- a/src/client/components/VolumeGroups.tsx
+++ b/src/client/components/VolumeGroups.tsx
@@ -35,7 +35,6 @@ export const VolumeGroups = (): ReactElement => {
           volumeGroups &&
           map(volumeGroups.data, (group) => {
             if (!isNil(group)) {
-              console.log(group);
               return (
                 <div className="stack" key={group.results.id}>
                   <img src={group.results.image.small_url} />