improves preview cards #956
3 changed files with 105 additions and 39 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue