🧮 Using Masonry to grid out the issue covers in VolumeDetails

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;
+      border: 2px dotted #ccc;
-      width:20px;
+      width: 20px;
-      min-height:35px;
+      min-height: 35px;
-      
+
-    border-color: transparent transparent #F3A22D #F3A22D;
+      border-color: transparent transparent #f3a22d #f3a22d;
       border-bottom-left-radius: 10px;
-  }
+    }
-  
   }
 }
 

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 {
+import { escapePoundSymbol } from "../shared/utils/formatting.utils";
-  removeLeadingPeriod,
-  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 (
     <>

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>
+            <Masonry
-              {issues.map((issue, idx) => {
+              breakpointCols={breakpointColumnsObj}
-                return <img key={idx} src={issue.image.thumb_url} />;
+              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>

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} />