diff --git a/client/scss/_asset-preview.scss b/client/scss/_asset-preview.scss
index 78f26e4b..a9d0cb48 100644
--- a/client/scss/_asset-preview.scss
+++ b/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;
-}
diff --git a/client/scss/_channel-claims-display.scss b/client/scss/_channel-claims-display.scss
index 3ca6baba..ebca63d8 100644
--- a/client/scss/_channel-claims-display.scss
+++ b/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;
diff --git a/client/src/components/AssetPreview/index.jsx b/client/src/components/AssetPreview/index.jsx
index 79060417..2105a56a 100644
--- a/client/src/components/AssetPreview/index.jsx
+++ b/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 (
-
+
{title}
+{title}