🧮 Using Masonry to grid out the issue covers in VolumeDetails

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 (
     <>

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>

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