From 622cbcfb7480e46da95cf81ff80930923b9f1924 Mon Sep 17 00:00:00 2001
From: Travis Eden <daovist@gmail.com>
Date: Fri, 12 Oct 2018 08:00:03 -0400
Subject: [PATCH] use grid for asset preview layout

---
 client/scss/asset-preview/_asset-preview.scss |  8 +--
 .../_channel-claims-display.scss              | 21 +++++++
 client/src/components/AssetPreview/index.jsx  |  2 +-
 .../containers/ChannelClaimsDisplay/view.jsx  | 57 +++----------------
 4 files changed, 33 insertions(+), 55 deletions(-)

diff --git a/client/scss/asset-preview/_asset-preview.scss b/client/scss/asset-preview/_asset-preview.scss
index fe2eb06c..26647703 100644
--- a/client/scss/asset-preview/_asset-preview.scss
+++ b/client/scss/asset-preview/_asset-preview.scss
@@ -1,16 +1,16 @@
 .asset-preview-image {
   width  : 100%;
-  padding: 0px;
-  margin : 0px
+  padding: 0;
+  margin : 0;
 }
 
 .asset-preview-video {
   cursor: pointer;
   background-color: #ffffff;
-  width: calc(100% - 12px - 12px - 2px);
+  width: 100%;
 }
 
-h3.list-title {
+h6.list-title {
   margin: 0;
   text-overflow: ellipsis;
   word-wrap: break-word;
diff --git a/client/scss/channel-claims-display/_channel-claims-display.scss b/client/scss/channel-claims-display/_channel-claims-display.scss
index 8d907e9b..7a550713 100644
--- a/client/scss/channel-claims-display/_channel-claims-display.scss
+++ b/client/scss/channel-claims-display/_channel-claims-display.scss
@@ -1,5 +1,26 @@
 .channel-claims-display {
+  display: grid;
+  grid-gap: 16px;
+
   .button--secondary {
     margin-right: $secondary-padding;
   }
 }
+
+@media (min-width: 1040px) {
+  .channel-claims-display {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1039px) {
+  .channel-claims-display {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 767px) {
+  .channel-claims-display {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/client/src/components/AssetPreview/index.jsx b/client/src/components/AssetPreview/index.jsx
index d89f0bba..17a26f1f 100644
--- a/client/src/components/AssetPreview/index.jsx
+++ b/client/src/components/AssetPreview/index.jsx
@@ -5,7 +5,7 @@ const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, c
   const embedUrl = `/${claimId}/${name}.${fileExt}`;
   const showUrl = `/${claimId}/${name}`;
   return (
-    <Link to={showUrl} >
+    <Link to={showUrl} className='asset-preview'>
       {(() => {
         switch (contentType) {
           case 'image/jpeg':
diff --git a/client/src/containers/ChannelClaimsDisplay/view.jsx b/client/src/containers/ChannelClaimsDisplay/view.jsx
index 83cfad9e..6f136047 100644
--- a/client/src/containers/ChannelClaimsDisplay/view.jsx
+++ b/client/src/containers/ChannelClaimsDisplay/view.jsx
@@ -27,59 +27,16 @@ class ChannelClaimsDisplay extends React.Component {
   }
   render () {
     const {channel: {claimsData: {claims, currentPage, totalPages}}, defaultThumbnail} = this.props;
-    const groupedClaimsList = createGroupedList(claims, 4);
     if (claims.length > 0) {
       return (
         <div className={'channel-claims-display'}>
-          <div>
-            {groupedClaimsList.map((group, index) => {
-              const itemA = group[0];
-              const itemB = group[1];
-              const itemC = group[2];
-              const itemD = group[3];
-              return (
-                <HorizontalQuadSplit
-                  key={`claims-row-${index}`}
-                  columnA={
-                    itemA && (
-                      <AssetPreview
-                        defaultThumbnail={defaultThumbnail}
-                        claimData={itemA}
-                        key={`${itemA.name}-${itemA.id}`}
-                      />
-                    )
-                  }
-                  columnB={
-                    itemB && (
-                      <AssetPreview
-                        defaultThumbnail={defaultThumbnail}
-                        claimData={itemB}
-                        key={`${itemB.name}-${itemB.id}`}
-                      />
-                    )
-                  }
-                  columnC={
-                    itemC && (
-                      <AssetPreview
-                        defaultThumbnail={defaultThumbnail}
-                        claimData={itemC}
-                        key={`${itemC.name}-${itemC.id}`}
-                      />
-                    )
-                  }
-                  columnD={
-                    itemD && (
-                      <AssetPreview
-                        defaultThumbnail={defaultThumbnail}
-                        claimData={itemD}
-                        key={`${itemD.name}-${itemD.id}`}
-                      />
-                    )
-                  }
-                />
-              );
-            })}
-          </div>
+          {claims.map(claim => (
+            <AssetPreview
+              defaultThumbnail={defaultThumbnail}
+              claimData={claim}
+              key={`${claim.name}-${claim.id}`}
+            />
+          ))}
           <Row>
             {(currentPage > 1) &&
             <ButtonSecondary