From b3d05c7b82997f18600aeba7ad0b61ffb2cfecd4 Mon Sep 17 00:00:00 2001
From: Minesh Mitha <minesh@Mineshs-MacBook-Pro.local>
Date: Thu, 11 Oct 2018 21:36:16 +0100
Subject: [PATCH] Collapse Logic and styling in place

---
 client/scss/asset-display/_asset-display.scss |  3 +--
 .../scss/vertical-split/_vertical-split.scss  | 17 +++++++++++++++
 .../VerticalCollapsibleSplit/index.jsx        | 21 ++++++++++++++++---
 client/src/pages/ShowAssetDetails/view.jsx    |  1 +
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/client/scss/asset-display/_asset-display.scss b/client/scss/asset-display/_asset-display.scss
index 7887a0c8..b756ccbd 100644
--- a/client/scss/asset-display/_asset-display.scss
+++ b/client/scss/asset-display/_asset-display.scss
@@ -61,15 +61,14 @@
 
 .asset-information-wrap {
   max-width: 800px;
-
   p.asset-description {
     white-space: pre-line;
     font-size: 14px;
     color: #2E2F31;
     letter-spacing: 0;
     line-height: 18px;
+    width: 360px;
   }
-
   .asset-information {
     width: 320px;
   }
diff --git a/client/scss/vertical-split/_vertical-split.scss b/client/scss/vertical-split/_vertical-split.scss
index ac100b08..665e4c80 100644
--- a/client/scss/vertical-split/_vertical-split.scss
+++ b/client/scss/vertical-split/_vertical-split.scss
@@ -5,3 +5,20 @@
   justify-content: space-between;
   align-items    : center;
 };
+
+.collapse-content.hidden{
+  display: none;
+}
+
+.collapse-button {
+  outline: none;
+  background: none;
+  border: none;
+  display: block;
+  margin: 15px auto 0;
+  width: 24px;
+  height: 24px;
+  svg {
+    stroke: $brand-color;
+  }
+}
\ No newline at end of file
diff --git a/client/src/components/VerticalCollapsibleSplit/index.jsx b/client/src/components/VerticalCollapsibleSplit/index.jsx
index a194f7c0..6602b108 100644
--- a/client/src/components/VerticalCollapsibleSplit/index.jsx
+++ b/client/src/components/VerticalCollapsibleSplit/index.jsx
@@ -1,18 +1,33 @@
 import React from 'react';
-
+import * as Icon from 'react-feather';
 class VerticalCollapsibleSplit extends React.Component {
+
+  constructor (props) {
+    super(props);
+    this.collapse = this.collapse.bind(this);
+    this.state = { open: true };
+  }
+
+  collapse () {
+    this.setState({ open: !this.state.open });
+    document.getElementById(this.props.name).classList.toggle('hidden');
+  }
+
   render () {
     return (
       <div className={'vertical-split'}>
         <div className='visible-content'>
           {this.props.top}
+          <button className='collapse-button' onClick={this.collapse}>
+            {this.state.open ? <Icon.PlusSquare /> : <Icon.MinusSquare /> }
+          </button>
         </div>
-        <div className='collapse-content'>
+        <div className='collapse-content' id={this.props.name}>
           {this.props.bottom}
         </div>
       </div>
     );
   }
-}
+};
 
 export default VerticalCollapsibleSplit;
diff --git a/client/src/pages/ShowAssetDetails/view.jsx b/client/src/pages/ShowAssetDetails/view.jsx
index f3eef3c8..9a7d7739 100644
--- a/client/src/pages/ShowAssetDetails/view.jsx
+++ b/client/src/pages/ShowAssetDetails/view.jsx
@@ -19,6 +19,7 @@ class ShowAssetDetails extends React.Component {
           asset={asset}
         >
           <VerticalCollapsibleSplit
+            name={'asset-display-collapse'}
             top={<AssetDisplay />}
             bottom={<AssetInfo />}
           />