From 2dd6529d82fad8574ca9bdddccdab9d7b60489f3 Mon Sep 17 00:00:00 2001
From: Mark Beamer Jr <markbeamerjr@gmail.com>
Date: Fri, 25 May 2018 22:38:06 -0400
Subject: [PATCH] -Added description and changed css so the search screen is
 more presentable to the user.

---
 src/renderer/component/fileTile/view.jsx    | 10 +++++++---
 src/renderer/scss/_vars.scss                |  4 ++--
 src/renderer/scss/component/_card.scss      |  2 ++
 src/renderer/scss/component/_file-list.scss |  6 ++++--
 src/renderer/scss/component/_search.scss    |  3 ++-
 5 files changed, 17 insertions(+), 8 deletions(-)

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<Props> {
 
     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<Props> {
           {isResolvingUri && <div className="card__title--small">{__('Loading...')}</div>}
           {!isResolvingUri && (
             <React.Fragment>
+              <div className="card__subtitle-price">
+                <FilePrice uri={uri} />
+              </div>
               <div className="card__title--small card__title--file">
                 <TruncatedText lines={2}>{title || name}</TruncatedText>
               </div>
+              <div className="card__subtext">
+                <TruncatedText lines={3}>{description}</TruncatedText>
+              </div>
               <div className="card__subtitle">
                 {showUri ? uri : channel || __('Anonymous')}
                 {isRewardContent && <Icon icon={icons.FEATURED} />}
                 {showLocal && isDownloaded && <Icon icon={icons.LOCAL} />}
-                <div className="card__subtitle-price">
-                  <FilePrice uri={uri} />
-                </div>
               </div>
               {!name && (
                 <React.Fragment>
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);
     }