From ba49aff9c50f025f89d3e316577a5da26f86da1b Mon Sep 17 00:00:00 2001
From: Travis Eden <daovist@gmail.com>
Date: Thu, 11 Oct 2018 13:00:23 -0400
Subject: [PATCH 1/6] do not show channel info for home channels

---
 client/src/pages/ShowChannel/index.js |  9 +++++----
 client/src/pages/ShowChannel/view.jsx | 18 ++++++++++--------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/client/src/pages/ShowChannel/index.js b/client/src/pages/ShowChannel/index.js
index 120f75b4..e741d3da 100644
--- a/client/src/pages/ShowChannel/index.js
+++ b/client/src/pages/ShowChannel/index.js
@@ -1,19 +1,20 @@
 import { connect } from 'react-redux';
 import View from './view';
 
-const mapStateToProps = ({ show }) => {
+const mapStateToProps = ({ show, site, channel }) => {
   // select request info
   const requestId = show.request.id;
   // select request
   const previousRequest = show.requestList[requestId] || null;
   // select channel
-  let channel;
+  let thisChannel;
   if (previousRequest) {
     const channelKey = previousRequest.key;
-    channel = show.channelList[channelKey] || null;
+    thisChannel = show.channelList[channelKey] || null;
   }
   return {
-    channel,
+    channel    : thisChannel,
+    homeChannel: site.publishOnlyApproved && !channel.loggedInChannel.name ? `${site.approvedChannels[0].name}:${site.approvedChannels[0].longId}` : null,
   };
 };
 
diff --git a/client/src/pages/ShowChannel/view.jsx b/client/src/pages/ShowChannel/view.jsx
index 1805d3da..b77300a8 100644
--- a/client/src/pages/ShowChannel/view.jsx
+++ b/client/src/pages/ShowChannel/view.jsx
@@ -7,7 +7,7 @@ import Row from '@components/Row';
 
 class ShowChannel extends React.Component {
   render () {
-    const { channel } = this.props;
+    const { channel, homeChannel } = this.props;
     if (channel) {
       const { name, longId, shortId } = channel;
       return (
@@ -15,13 +15,15 @@ class ShowChannel extends React.Component {
           pageTitle={name}
           channel={channel}
         >
-          <Row>
-            <ChannelInfoDisplay
-              name={name}
-              longId={longId}
-              shortId={shortId}
-            />
-          </Row>
+          {!homeChannel && (
+            <Row>
+              <ChannelInfoDisplay
+                name={name}
+                longId={longId}
+                shortId={shortId}
+              />
+            </Row>
+          )}
           <ChannelClaimsDisplay />
         </PageLayout>
       );
-- 
2.45.2


From b87a76880321ef4ef7b97e84177f4abe96160693 Mon Sep 17 00:00:00 2001
From: Travis Eden <daovist@gmail.com>
Date: Thu, 11 Oct 2018 13:03:39 -0400
Subject: [PATCH 2/6] show title on asset previews

---
 client/scss/asset-preview/_asset-preview.scss |  9 ++++++
 client/src/components/AssetPreview/index.jsx  | 28 +++++++++++--------
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/client/scss/asset-preview/_asset-preview.scss b/client/scss/asset-preview/_asset-preview.scss
index 9b4043cc..ea33e354 100644
--- a/client/scss/asset-preview/_asset-preview.scss
+++ b/client/scss/asset-preview/_asset-preview.scss
@@ -9,3 +9,12 @@
   background-color: #ffffff;
   width: calc(100% - 12px - 12px - 2px);
 }
+
+h6.list-title {
+  margin: 0;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  overflow: hidden;
+  line-height: 1em;
+  max-height: 2em;
+}
diff --git a/client/src/components/AssetPreview/index.jsx b/client/src/components/AssetPreview/index.jsx
index be09c200..08295930 100644
--- a/client/src/components/AssetPreview/index.jsx
+++ b/client/src/components/AssetPreview/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, contentType, thumbnail } }) => {
+const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, contentType, thumbnail, title } }) => {
   const embedUrl = `/${claimId}/${name}.${fileExt}`;
   const showUrl = `/${claimId}/${name}`;
   return (
@@ -13,19 +13,25 @@ const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, c
           case 'image/png':
           case 'image/gif':
             return (
-              <img
-                className={'asset-preview-image'}
-                src={embedUrl}
-                alt={name}
-              />
+              <div>
+                <h6 class='list-title'>{title}</h6>
+                <img
+                  className={'asset-preview-image'}
+                  src={embedUrl}
+                  alt={name}
+                />
+              </div>
             );
           case 'video/mp4':
             return (
-              <img
-                className={'asset-preview-video'}
-                src={thumbnail || defaultThumbnail}
-                alt={name}
-              />
+              <div>
+                <h6 class='list-title'>{title}</h6>
+                <img
+                  className={'asset-preview-video'}
+                  src={thumbnail || defaultThumbnail}
+                  alt={name}
+                />
+              </div>
             );
           default:
             return (
-- 
2.45.2


From e17c8c936e50d26ea32edeec47cc9aedc0392c6d Mon Sep 17 00:00:00 2001
From: Travis Eden <daovist@gmail.com>
Date: Thu, 11 Oct 2018 15:01:17 -0400
Subject: [PATCH 3/6] move title below image; h6 -> h3

---
 client/scss/asset-preview/_asset-preview.scss | 2 +-
 client/src/components/AssetPreview/index.jsx  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/scss/asset-preview/_asset-preview.scss b/client/scss/asset-preview/_asset-preview.scss
index ea33e354..fe2eb06c 100644
--- a/client/scss/asset-preview/_asset-preview.scss
+++ b/client/scss/asset-preview/_asset-preview.scss
@@ -10,7 +10,7 @@
   width: calc(100% - 12px - 12px - 2px);
 }
 
-h6.list-title {
+h3.list-title {
   margin: 0;
   text-overflow: ellipsis;
   word-wrap: break-word;
diff --git a/client/src/components/AssetPreview/index.jsx b/client/src/components/AssetPreview/index.jsx
index 08295930..d89f0bba 100644
--- a/client/src/components/AssetPreview/index.jsx
+++ b/client/src/components/AssetPreview/index.jsx
@@ -14,23 +14,23 @@ const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, c
           case 'image/gif':
             return (
               <div>
-                <h6 class='list-title'>{title}</h6>
                 <img
                   className={'asset-preview-image'}
                   src={embedUrl}
                   alt={name}
                 />
+                <h3 className='list-title'>{title}</h3>
               </div>
             );
           case 'video/mp4':
             return (
               <div>
-                <h6 class='list-title'>{title}</h6>
                 <img
                   className={'asset-preview-video'}
                   src={thumbnail || defaultThumbnail}
                   alt={name}
                 />
+                <h3 className='list-title'>{title}</h3>
               </div>
             );
           default:
-- 
2.45.2


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 4/6] 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
-- 
2.45.2


From 167806bd0e39a243c595f4185bcb62ef3dcda6d1 Mon Sep 17 00:00:00 2001
From: Travis Eden <daovist@gmail.com>
Date: Mon, 15 Oct 2018 10:50:26 -0400
Subject: [PATCH 5/6] separate assets from buttons

---
 .../_channel-claims-display.scss              |  5 +----
 .../containers/ChannelClaimsDisplay/view.jsx  | 20 +++++++++++--------
 client/src/pages/ShowChannel/view.jsx         |  4 +++-
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/client/scss/channel-claims-display/_channel-claims-display.scss b/client/scss/channel-claims-display/_channel-claims-display.scss
index 7a550713..e605dde8 100644
--- a/client/scss/channel-claims-display/_channel-claims-display.scss
+++ b/client/scss/channel-claims-display/_channel-claims-display.scss
@@ -1,10 +1,7 @@
 .channel-claims-display {
+  width: 100%;
   display: grid;
   grid-gap: 16px;
-
-  .button--secondary {
-    margin-right: $secondary-padding;
-  }
 }
 
 @media (min-width: 1040px) {
diff --git a/client/src/containers/ChannelClaimsDisplay/view.jsx b/client/src/containers/ChannelClaimsDisplay/view.jsx
index 6f136047..1f29b65b 100644
--- a/client/src/containers/ChannelClaimsDisplay/view.jsx
+++ b/client/src/containers/ChannelClaimsDisplay/view.jsx
@@ -29,14 +29,18 @@ class ChannelClaimsDisplay extends React.Component {
     const {channel: {claimsData: {claims, currentPage, totalPages}}, defaultThumbnail} = this.props;
     if (claims.length > 0) {
       return (
-        <div className={'channel-claims-display'}>
-          {claims.map(claim => (
-            <AssetPreview
-              defaultThumbnail={defaultThumbnail}
-              claimData={claim}
-              key={`${claim.name}-${claim.id}`}
-            />
-          ))}
+        <div>
+          <div>
+            <div className={'channel-claims-display'}>
+              {claims.map(claim => (
+                <AssetPreview
+                  defaultThumbnail={defaultThumbnail}
+                  claimData={claim}
+                  key={`${claim.name}-${claim.id}`}
+                />
+              ))}
+            </div>
+          </div>
           <Row>
             {(currentPage > 1) &&
             <ButtonSecondary
diff --git a/client/src/pages/ShowChannel/view.jsx b/client/src/pages/ShowChannel/view.jsx
index b77300a8..34a23b3a 100644
--- a/client/src/pages/ShowChannel/view.jsx
+++ b/client/src/pages/ShowChannel/view.jsx
@@ -24,7 +24,9 @@ class ShowChannel extends React.Component {
               />
             </Row>
           )}
-          <ChannelClaimsDisplay />
+          <Row>
+            <ChannelClaimsDisplay />
+          </Row>
         </PageLayout>
       );
     }
-- 
2.45.2


From bd3b43646ed96198f6b1ad89b1d1216c173cc77b Mon Sep 17 00:00:00 2001
From: Travis Eden <daovist@gmail.com>
Date: Mon, 15 Oct 2018 12:24:53 -0400
Subject: [PATCH 6/6] h6 -> h3

---
 client/scss/asset-preview/_asset-preview.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/scss/asset-preview/_asset-preview.scss b/client/scss/asset-preview/_asset-preview.scss
index 26647703..5ad362d7 100644
--- a/client/scss/asset-preview/_asset-preview.scss
+++ b/client/scss/asset-preview/_asset-preview.scss
@@ -10,7 +10,7 @@
   width: 100%;
 }
 
-h6.list-title {
+h3.list-title {
   margin: 0;
   text-overflow: ellipsis;
   word-wrap: break-word;
-- 
2.45.2