From 00bebfaa8a2b3a3f22a72a4e19d5f171b1084df4 Mon Sep 17 00:00:00 2001
From: Minesh Mitha <minesh@Mineshs-MacBook-Pro.local>
Date: Thu, 11 Oct 2018 20:51:34 +0100
Subject: [PATCH] Design cleanup

---
 client/scss/asset-display/_asset-display.scss |  39 +++++--
 client/scss/page-layout/_page-layout.scss     |   1 -
 .../VerticalCollapsibleSplit/index.jsx        |  18 +++
 client/src/containers/AssetDisplay/view.jsx   | 104 +++++++++---------
 client/src/pages/ShowAssetDetails/view.jsx    |   6 +-
 5 files changed, 106 insertions(+), 62 deletions(-)
 create mode 100644 client/src/components/VerticalCollapsibleSplit/index.jsx

diff --git a/client/scss/asset-display/_asset-display.scss b/client/scss/asset-display/_asset-display.scss
index a3f84b26..7887a0c8 100644
--- a/client/scss/asset-display/_asset-display.scss
+++ b/client/scss/asset-display/_asset-display.scss
@@ -3,11 +3,32 @@
   flex: 1 0 auto;
   flex-direction: column;
   justify-content: center;
+
+  background: #E9E8E8;
+  width: 100%;
+  position: relative;
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    box-shadow: inset 0 1px 3px 2px rgba(169, 173, 186, 0.2);
+    width: 100%;
+    height: 1px;
+    background: transparent;
+    left: 0;
+    top: 0;
+  }
+
+  &:after {
+    top: auto;
+    bottom: 0;
+  }
+
 }
 
-.asset-title-wrap {
-  margin-top: 90px;
+
   .asset-title {
+    margin-top: 40px;
     font-weight: normal;
     font-size: 26px;
     color: #2E2F31;
@@ -15,10 +36,9 @@
     text-align: center;
     line-height: 32px;
   }
-}
 
 .asset-image, .asset-video {
-  margin : 0;
+  margin : 60px 0;
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
@@ -29,10 +49,15 @@
   margin: 16px;
   padding: 6px;
 }
-.vertical-split .asset-display {
-    height: 90vh;
-}
 
+// .vertical-split .asset-display {
+//     height: 90vh;
+// }
+
+.visible-content {
+  width: 100%;
+  margin: 0 0 40px;
+}
 
 .asset-information-wrap {
   max-width: 800px;
diff --git a/client/scss/page-layout/_page-layout.scss b/client/scss/page-layout/_page-layout.scss
index f94645a5..06f6dae7 100644
--- a/client/scss/page-layout/_page-layout.scss
+++ b/client/scss/page-layout/_page-layout.scss
@@ -7,6 +7,5 @@
     display: flex;
     -webkit-flex-direction: column;
     flex-direction: column;
-    margin: $primary-padding;
   }
 }
diff --git a/client/src/components/VerticalCollapsibleSplit/index.jsx b/client/src/components/VerticalCollapsibleSplit/index.jsx
new file mode 100644
index 00000000..a194f7c0
--- /dev/null
+++ b/client/src/components/VerticalCollapsibleSplit/index.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+class VerticalCollapsibleSplit extends React.Component {
+  render () {
+    return (
+      <div className={'vertical-split'}>
+        <div className='visible-content'>
+          {this.props.top}
+        </div>
+        <div className='collapse-content'>
+          {this.props.bottom}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default VerticalCollapsibleSplit;
diff --git a/client/src/containers/AssetDisplay/view.jsx b/client/src/containers/AssetDisplay/view.jsx
index 4259719b..4de29bb3 100644
--- a/client/src/containers/AssetDisplay/view.jsx
+++ b/client/src/containers/AssetDisplay/view.jsx
@@ -12,58 +12,60 @@ class AssetDisplay extends React.Component {
     const { status, error, asset: { claimData: { name, claimId, contentType, fileExt, thumbnail } } } = this.props;
     const sourceUrl = `/${claimId}/${name}.${fileExt}`;
     return (
-      <div className={'asset-display'}>
-        {(status === LOCAL_CHECK) &&
-        <div>
-          <p>Checking to see if Spee.ch has your asset locally...</p>
-        </div>
-        }
-        {(status === UNAVAILABLE) &&
-        <div>
-          <p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
-          <ProgressBar size={12} />
-          <p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
-        </div>
-        }
-        {(status === ERROR) &&
-        <div>
-          <p>Unfortunately, we couldn't download your asset from LBRY.  You can help us out by sharing the below error message in the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>LBRY discord</a>.</p>
-          <i><p id='error-message'>{error}</p></i>
-        </div>
-        }
-        {(status === AVAILABLE) &&
-        (() => {
-          switch (contentType) {
-            case 'image/jpeg':
-            case 'image/jpg':
-            case 'image/png':
-            case 'image/gif':
-              return (
-                <img
-                  className='asset-image'
-                  src={sourceUrl}
-                  alt={name}
-                />
-              );
-            case 'video/mp4':
-              return (
-                <video
-                  className='asset-video'
-                  controls poster={thumbnail}
-                >
-                  <source
-                    src={sourceUrl}
-                  />
-                  <p>Your browser does not support the <code>video</code> element.</p>
-                </video>
-              );
-            default:
-              return (
-                <p>Unsupported content type</p>
-              );
+      <div className={'asset-display-wrap'}>
+        <div className={'asset-display'}>
+          {(status === LOCAL_CHECK) &&
+          <div>
+            <p>Checking to see if Spee.ch has your asset locally...</p>
+          </div>
           }
-        })()
-        }
+          {(status === UNAVAILABLE) &&
+          <div>
+            <p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
+            <ProgressBar size={12} />
+            <p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
+          </div>
+          }
+          {(status === ERROR) &&
+          <div>
+            <p>Unfortunately, we couldn't download your asset from LBRY.  You can help us out by sharing the below error message in the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>LBRY discord</a>.</p>
+            <i><p id='error-message'>{error}</p></i>
+          </div>
+          }
+          {(status === AVAILABLE) &&
+          (() => {
+            switch (contentType) {
+              case 'image/jpeg':
+              case 'image/jpg':
+              case 'image/png':
+              case 'image/gif':
+                return (
+                  <img
+                    className='asset-image'
+                    src={sourceUrl}
+                    alt={name}
+                  />
+                );
+              case 'video/mp4':
+                return (
+                  <video
+                    className='asset-video'
+                    controls poster={thumbnail}
+                  >
+                    <source
+                      src={sourceUrl}
+                    />
+                    <p>Your browser does not support the <code>video</code> element.</p>
+                  </video>
+                );
+              default:
+                return (
+                  <p>Unsupported content type</p>
+                );
+            }
+          })()
+          }
+        </div>
         <AssetTitle />
       </div>
 
diff --git a/client/src/pages/ShowAssetDetails/view.jsx b/client/src/pages/ShowAssetDetails/view.jsx
index ed6bea8b..f3eef3c8 100644
--- a/client/src/pages/ShowAssetDetails/view.jsx
+++ b/client/src/pages/ShowAssetDetails/view.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import PageLayout from '@components/PageLayout';
 
-import VerticalSplit from '@components/VerticalSplit';
+import VerticalCollapsibleSplit from '@components/VerticalCollapsibleSplit';
+// import VerticalSplit from '@components/VerticalSplit';
 // import AssetTitle from '@containers/AssetTitle';
 import AssetDisplay from '@containers/AssetDisplay';
 import AssetInfo from '@containers/AssetInfo';
@@ -17,8 +18,7 @@ class ShowAssetDetails extends React.Component {
           pageTitle={`${name} - details`}
           asset={asset}
         >
-          
-          <VerticalSplit
+          <VerticalCollapsibleSplit
             top={<AssetDisplay />}
             bottom={<AssetInfo />}
           />