🎛 Switched the layout on dashboard to masonry

src/client/assets/scss/App.scss

@@ -27,13 +27,27 @@ $border-color: red;
 }
 
 // Dashboard
-.stack-card-container {
+.recent-comics-container {
-  display: grid;
+    display: -webkit-box; /* Not needed if autoprefixing */
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    display: -ms-flexbox; /* Not needed if autoprefixing */
-  column-gap: 0.5em;
+    display: flex;
-  row-gap: 1.2em;
+    margin-left: -30px; /* gutter size offset */
+    width: auto;
+
+  .recent-comics-column {
+    padding-left: 25px; /* gutter size */
+    background-clip: padding-box;
+    & > div {
+      /* change div to reference your elements you put in <Masonry> */
+      margin-bottom: 20px;
+    }
+  }
+}
+.volumes-container {
+  margin-top: 3rem;
+
   .stack {
-    width: 200px;
+    max-width: 200px;
     border-radius: 0.3rem;
     box-shadow:
     /* The top layer shadow */ 0 -1px 1px rgba(0, 0, 0, 0.15),
@@ -48,6 +62,9 @@ $border-color: red;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
+    .stack-title {
+      margin-bottom: 0.4rem;
+    }
     .content {
       margin: -5px 0 0 0;
       padding: 0.5rem 1rem;
@@ -56,7 +73,24 @@ $border-color: red;
       border-bottom-right-radius: 0.25rem;
     }
   }
+
+  .volumes-grid {
+    display: -webkit-box; /* Not needed if autoprefixing */
+    display: -ms-flexbox; /* Not needed if autoprefixing */
+    display: flex;
+    margin-left: -30px; /* gutter size offset */
+    width: auto;
   }
+  .volumes-grid-column {
+    padding-left: 25px; /* gutter size */
+    background-clip: padding-box;
+    & > div {
+      /* change div to reference your elements you put in <Masonry> */
+      margin-bottom: 20px;
+    }
+  }  
+}
+
 
 .min {
   overflow: visible;
@@ -209,6 +243,7 @@ $border-color: red;
     }
   }
 }
+
 // Search
 .search {
   .main-search-bar {

src/client/components/RecentlyImported.tsx

@@ -8,6 +8,7 @@ import {
 } from "../shared/utils/formatting.utils";
 import { isEmpty, isNil, map } from "lodash";
 import { detectTradePaperbacks } from "../shared/utils/tradepaperback.utils";
+import Masonry from "react-masonry-css";
 
 type RecentlyImportedProps = {
   comicBookCovers: any;
@@ -15,16 +16,30 @@ type RecentlyImportedProps = {
 
 export const RecentlyImported = ({
   comicBookCovers,
-}: RecentlyImportedProps): ReactElement => (
+}: RecentlyImportedProps): ReactElement => {
+  const breakpointColumnsObj = {
+    default: 5,
+    1100: 4,
+    700: 2,
+    500: 1,
+  };
+  return (
     <>
       <h2 className="subtitle">Recently Imported</h2>
-    <section className="card-container">
+      <Masonry
-      {map(comicBookCovers.docs, ({ _id, rawFileDetails, sourcedMetadata }) => {
+        breakpointCols={breakpointColumnsObj}
+        className="recent-comics-container"
+        columnClassName="recent-comics-column"
+      >
+        {map(
+          comicBookCovers.docs,
+          ({ _id, rawFileDetails, sourcedMetadata }) => {
             let imagePath = "";
             let comicName = "";
             if (!isNil(rawFileDetails)) {
               const encodedFilePath = encodeURI(
-            "http://localhost:3000" + removeLeadingPeriod(rawFileDetails.path),
+                "http://localhost:3000" +
+                  removeLeadingPeriod(rawFileDetails.path),
               );
               imagePath = escapePoundSymbol(encodedFilePath);
               comicName = rawFileDetails.name;
@@ -33,7 +48,9 @@ export const RecentlyImported = ({
               comicName = sourcedMetadata.comicvine.name;
             }
             const titleElement = (
-          <Link to={"/comic/details/" + _id}>{ellipsize(comicName, 18)}</Link>
+              <Link to={"/comic/details/" + _id}>
+                {ellipsize(comicName, 18)}
+              </Link>
             );
             return (
               <Card
@@ -65,7 +82,9 @@ export const RecentlyImported = ({
                 </div>
               </Card>
             );
-      })}
+          },
-    </section>
+        )}
+      </Masonry>
     </>
   );
+};

src/client/components/VolumeGroups.tsx

@@ -3,8 +3,15 @@ import React, { ReactElement, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import ellipsize from "ellipsize";
 import { fetchVolumeGroups } from "../actions/fileops.actions";
+import Masonry from "react-masonry-css";
 
 export const VolumeGroups = (): ReactElement => {
+  const breakpointColumnsObj = {
+    default: 5,
+    1100: 4,
+    700: 2,
+    500: 1,
+  };
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(fetchVolumeGroups());
@@ -13,9 +20,13 @@ export const VolumeGroups = (): ReactElement => {
     (state: RootState) => state.fileOps.comicVolumeGroups,
   );
   return (
-    <>
+    <section className="volumes-container">
       <h2 className="subtitle">Volumes</h2>
-      <div className="stack-card-container">
+      <Masonry
+        breakpointCols={breakpointColumnsObj}
+        className="volumes-grid"
+        columnClassName="volumes-grid-column"
+      >
         {!isNil(volumeGroups) &&
           volumeGroups &&
           map(volumeGroups.data, (group) => {
@@ -24,7 +35,9 @@ export const VolumeGroups = (): ReactElement => {
                 <div className="stack">
                   <img src={group.results.image.small_url} />
                   <div className="content">
+                    <div className="stack-title">
                       {ellipsize(group.results.name, 18)}
+                    </div>
                     <div className="control">
                       <span className="tags has-addons">
                         <span className="tag is-primary is-light">Issues</span>
@@ -38,8 +51,8 @@ export const VolumeGroups = (): ReactElement => {
               );
             }
           })}
-      </div>
+      </Masonry>
-    </>
+    </section>
   );
 };