🎛 Switched the layout on dashboard to masonry

src/client/assets/scss/App.scss

@@ -27,13 +27,27 @@ $border-color: red;
 }
 
 // Dashboard
-.stack-card-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  column-gap: 0.5em;
-  row-gap: 1.2em;
+.recent-comics-container {
+    display: -webkit-box; /* Not needed if autoprefixing */
+    display: -ms-flexbox; /* Not needed if autoprefixing */
+    display: flex;
+    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,8 +73,25 @@ $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;
   margin: auto;
@@ -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,57 +16,75 @@ type RecentlyImportedProps = {
 
 export const RecentlyImported = ({
   comicBookCovers,
-}: RecentlyImportedProps): ReactElement => (
-  <>
-    <h2 className="subtitle">Recently Imported</h2>
-    <section className="card-container">
-      {map(comicBookCovers.docs, ({ _id, rawFileDetails, sourcedMetadata }) => {
-        let imagePath = "";
-        let comicName = "";
-        if (!isNil(rawFileDetails)) {
-          const encodedFilePath = encodeURI(
-            "http://localhost:3000" + removeLeadingPeriod(rawFileDetails.path),
-          );
-          imagePath = escapePoundSymbol(encodedFilePath);
-          comicName = rawFileDetails.name;
-        } else if (!isNil(sourcedMetadata)) {
-          imagePath = sourcedMetadata.comicvine.image.small_url;
-          comicName = sourcedMetadata.comicvine.name;
-        }
-        const titleElement = (
-          <Link to={"/comic/details/" + _id}>{ellipsize(comicName, 18)}</Link>
-        );
-        return (
-          <Card
-            key={_id}
-            orientation={"vertical"}
-            imageUrl={imagePath}
-            hasDetails
-            title={comicName ? titleElement : null}
-          >
-            <div className="content is-flex is-flex-direction-row">
-              {!isNil(sourcedMetadata.comicvine) && (
-                <span className="icon cv-icon is-small">
-                  <img src="/dist/img/cvlogo.svg" />
-                </span>
-              )}
-              {isNil(rawFileDetails) && (
-                <span className="icon has-text-info">
-                  <i className="fas fa-adjust" />
-                </span>
-              )}
-              {!isNil(sourcedMetadata.comicvine) &&
-              !isEmpty(
-                detectTradePaperbacks(
-                  sourcedMetadata.comicvine.volumeInformation.description,
-                ),
-              ) ? (
-                <span className="tag is-warning">TPB</span>
-              ) : null}
-            </div>
-          </Card>
-        );
-      })}
-    </section>
-  </>
-);
+}: RecentlyImportedProps): ReactElement => {
+  const breakpointColumnsObj = {
+    default: 5,
+    1100: 4,
+    700: 2,
+    500: 1,
+  };
+  return (
+    <>
+      <h2 className="subtitle">Recently Imported</h2>
+      <Masonry
+        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),
+              );
+              imagePath = escapePoundSymbol(encodedFilePath);
+              comicName = rawFileDetails.name;
+            } else if (!isNil(sourcedMetadata)) {
+              imagePath = sourcedMetadata.comicvine.image.small_url;
+              comicName = sourcedMetadata.comicvine.name;
+            }
+            const titleElement = (
+              <Link to={"/comic/details/" + _id}>
+                {ellipsize(comicName, 18)}
+              </Link>
+            );
+            return (
+              <Card
+                key={_id}
+                orientation={"vertical"}
+                imageUrl={imagePath}
+                hasDetails
+                title={comicName ? titleElement : null}
+              >
+                <div className="content is-flex is-flex-direction-row">
+                  {!isNil(sourcedMetadata.comicvine) && (
+                    <span className="icon cv-icon is-small">
+                      <img src="/dist/img/cvlogo.svg" />
+                    </span>
+                  )}
+                  {isNil(rawFileDetails) && (
+                    <span className="icon has-text-info">
+                      <i className="fas fa-adjust" />
+                    </span>
+                  )}
+                  {!isNil(sourcedMetadata.comicvine) &&
+                  !isEmpty(
+                    detectTradePaperbacks(
+                      sourcedMetadata.comicvine.volumeInformation.description,
+                    ),
+                  ) ? (
+                    <span className="tag is-warning">TPB</span>
+                  ) : null}
+                </div>
+              </Card>
+            );
+          },
+        )}
+      </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">
-                    {ellipsize(group.results.name, 18)}
+                    <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>
   );
 };