diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx index 626dc39fc..8674c15a1 100644 --- a/src/renderer/component/fileTile/view.jsx +++ b/src/renderer/component/fileTile/view.jsx @@ -68,6 +68,7 @@ class FileTile extends React.PureComponent { const uri = normalizeURI(this.props.uri); const isClaimed = !!claim; + const description = isClaimed && metadata && metadata.description ? metadata.description : ''; const title = isClaimed && metadata && metadata.title ? metadata.title : parseURI(uri).contentName; const thumbnail = metadata && metadata.thumbnail ? metadata.thumbnail : null; @@ -97,16 +98,19 @@ class FileTile extends React.PureComponent { {isResolvingUri &&
{__('Loading...')}
} {!isResolvingUri && ( +
+ +
{title || name}
+
+ {description} +
{showUri ? uri : channel || __('Anonymous')} {isRewardContent && } {showLocal && isDownloaded && } -
- -
{!name && ( diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index a30c51765..2b5fbbeec 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -150,8 +150,8 @@ $large-breakpoint: 1760px; --success-msg-bg: var(--color-green-light); /* File Tile Card */ - --file-tile--media-height: 60px; - --file-tile--media-width: 94px; // 60 * (1 + 9/16) + --file-tile--media-height: 150px; + --file-tile--media-width: 200px; // 60 * (1 + 9/16) /* Modal */ --modal-width: 440px; diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss index e9f38fbd1..93fb135ec 100644 --- a/src/renderer/scss/component/_card.scss +++ b/src/renderer/scss/component/_card.scss @@ -103,6 +103,7 @@ .card__title--file { font-family: 'metropolis-bold'; font-size: 28px; + margin-bottom: 0; line-height: 36px; padding-top: 20px; } @@ -119,6 +120,7 @@ } .card__subtitle { + margin: 0; font-size: 14px; font-family: 'metropolis-medium'; color: var(--card-text-color); diff --git a/src/renderer/scss/component/_file-list.scss b/src/renderer/scss/component/_file-list.scss index 30b2de303..719947f35 100644 --- a/src/renderer/scss/component/_file-list.scss +++ b/src/renderer/scss/component/_file-list.scss @@ -13,7 +13,7 @@ .file-list__header { margin-top: $spacing-vertical * 4/3; - font-size: 18px; + font-size: 40px; .tooltip { margin-left: 5px; @@ -23,7 +23,6 @@ .file-tile { display: flex; margin-top: $spacing-vertical; - max-width: 260px; .card__media { height: var(--file-tile--media-height); @@ -40,7 +39,10 @@ } .file-tile__info { + display: flex; + flex-direction: column; margin-left: $spacing-vertical * 1/3; + max-width: 500px; } .file-tile__uri { diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss index ea3234369..23b484a21 100644 --- a/src/renderer/scss/component/_search.scss +++ b/src/renderer/scss/component/_search.scss @@ -98,9 +98,10 @@ .search__results { display: flex; padding-bottom: $spacing-vertical; + flex-flow: wrap column; .search-result__column { - flex: 0 0 270px; + flex: 0 0 500px; .card__media { background-color: var(--color-search-placeholder); }