Design cleanup

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;

client/scss/page-layout/_page-layout.scss

@@ -7,6 +7,5 @@
     display: flex;
     -webkit-flex-direction: column;
     flex-direction: column;
-    margin: $primary-padding;
   }
 }

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;

client/src/containers/AssetDisplay/view.jsx

@@ -12,6 +12,7 @@ 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-wrap'}>
         <div className={'asset-display'}>
           {(status === LOCAL_CHECK) &&
           <div>
@@ -64,6 +65,7 @@ class AssetDisplay extends React.Component {
             }
           })()
           }
+        </div>
         <AssetTitle />
       </div>
 

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 />}
           />