Merge pull request #956 from jessopb/previewCards

improves preview cards, no logic changes

client/scss/_asset-preview.scss

@@ -1,29 +1,89 @@
 .asset-preview {
-  position: relative;
+  display: flex;
+  flex-direction: column;
   background: $card-color;
-  padding: $thin-padding;
   color: $text-color;
   width: 240px;
   border: $subtle-border;
-  height: 280px;
+  height: 256px;
   &:hover {
-    border: 1px solid $highlight-border-color;
+    border-color: $highlight-border-color;
     color: $primary-color;
   }
 }
 
+.asset-preview__image {
+  height  : 180px;
+  width   : 240px;
+  overflow: hidden;
+  object-fit: cover;
+  padding: 0;
+  margin : 0;
+  box-sizing: border-box;
+
+}
+
+.asset-preview__image-box {
+  width  : 240px;
+  height : 180px;
+  padding: 0;
+  margin : 0;
+  box-sizing: border-box;
+}
+
 .asset-preview__label {
+  height: 100%;
+  padding: $thin-padding;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 7.3em;
 }
 
 .asset-preview__label-text {
-  height: 4.5em;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  box-sizing: border-box;
+  font-size: $text-small;
+  font-weight: bold;
+  height: 54px;
+}
+
+.asset-preview__label-info {
+  width: 100%;
+  height: 15px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   overflow: hidden;
   text-overflow: ellipsis;
   box-sizing: border-box;
+  align-items: center;
+}
+
+.asset-preview__label-info-datum {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+  box-sizing: border-box;
+  font-size: $text-small;
+  max-width: 40%;
+}
+
+.asset-preview__label-info-datum svg{
+  height: 1.2em;
+  width: 1.2em;
+  padding: 0;
+  padding-right: $thin-padding;
+  margin: 0;
+}
+
+.asset-preview__label-info-datum .svg-icon{
+  padding: 0px;
+  margin: 0;
+  height: 15px;
 }
 
 .asset-preview__blocked {
@@ -34,22 +94,3 @@
   padding: $thin-padding;
   margin-bottom: $thin-padding;
 }
-
-.asset-preview__image {
-  width  : 240px;
-  height : 180px;
-  overflow: hidden;
-  object-fit: cover;
-  padding: 0;
-  margin : 0;
-  box-sizing: border-box;
-}
-
-h3.asset-preview__title {
-  margin: 0;
-  text-overflow: ellipsis;
-  word-wrap: break-word;
-  overflow: hidden;
-  max-height: 4em;
-  font-size: $text-large;
-}

client/scss/_channel-claims-display.scss

@@ -1,7 +1,7 @@
 .channel-claims-display {
   width: 100%;
   display: grid;
-  grid-gap: $thin-padding;
+  grid-gap: $tertiary-padding;
   align-content: space-around;
   @media (min-width: $break-point-x-large) {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

client/src/components/AssetPreview/index.jsx

@@ -4,9 +4,23 @@ import createCanonicalLink from '@globalutils/createCanonicalLink';
 import * as Icon from 'react-feather';
 
 const AssetPreview = ({ defaultThumbnail, claimData }) => {
-  const {name, fileExt, contentType, thumbnail, title, blocked} = claimData;
+  const {name, fileExt, contentType, thumbnail, title, blocked, transactionTime} = claimData;
   const showUrl = createCanonicalLink({asset: {...claimData}});
+  console.log(transactionTime)
   const embedUrl = `${showUrl}.${fileExt}`;
+  const ago = Date.now()/1000 - transactionTime;
+  const dayInSeconds = 60 * 60 * 24;
+  const monthInSeconds = dayInSeconds * 30;
+  const yearInSeconds = dayInSeconds * 365;
+  let when;
+
+  if (ago < dayInSeconds) {
+    when = 'Just today';
+  } else if (ago < monthInSeconds) {
+    when = `${Math.floor(ago / dayInSeconds)} d ago`;
+  } else {
+    when = `${Math.floor(ago / monthInSeconds)} mo ago`;
+  }
   /*
   we'll be assigning media icon based on supported type / mime types
   */
@@ -37,21 +51,32 @@ const AssetPreview = ({ defaultThumbnail, claimData }) => {
   } else {
     return (
       <Link to={showUrl} className='asset-preview'>
-        <img
-          className={'asset-preview__image'}
-          src={thumb || defaultThumbnail}
-          alt={name}
-        />
+        <div className='asset-preview__image-box'>
+          <img
+            className={'asset-preview__image'}
+            src={thumb || defaultThumbnail}
+            alt={name}
+          />
+        </div>
+
         <div className={'asset-preview__label'}>
+
           <div className={'asset-preview__label-text'}>
-            <p className='asset-preview__title text--medium'>{title}</p>
+            <p>{title}</p>
           </div>
-          <div className={'asset-preview__label-info'}>
-            <div className={'text--medium'}>
-              { media === 'image' && <Icon.Image />}
-              { media === 'text' && <Icon.FileText />}
-              { media === 'video' && contentType === 'video/mp4' && <Icon.Video />}
-              { media !== 'image' && media !== 'text' && contentType !== 'video/mp4' && <Icon.File />}
+          <div className={'asset-preview__label-info '}>
+            <div className={'asset-preview__label-info-datum'}>
+              <div className={'svg-icon'}>
+                { media === 'image' && <Icon.Image />}
+                { media === 'text' && <Icon.FileText />}
+                { media === 'video' && contentType === 'video/mp4' && <Icon.Video />}
+                { media !== 'image' && media !== 'text' && contentType !== 'video/mp4' && <Icon.File />}
+              </div>
+              <div>{fileExt}</div>
+            </div>
+
+            <div className={'asset-preview__label-info-datum'}>
+              <div>{when}</div>
             </div>
           </div>
         </div>