Collapse Logic and styling in place
This commit is contained in:
parent
00bebfaa8a
commit
b3d05c7b82
4 changed files with 37 additions and 5 deletions
|
@ -61,15 +61,14 @@
|
||||||
|
|
||||||
.asset-information-wrap {
|
.asset-information-wrap {
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
|
|
||||||
p.asset-description {
|
p.asset-description {
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #2E2F31;
|
color: #2E2F31;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
|
width: 360px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.asset-information {
|
.asset-information {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,3 +5,20 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items : center;
|
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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,18 +1,33 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import * as Icon from 'react-feather';
|
||||||
class VerticalCollapsibleSplit extends React.Component {
|
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 () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<div className={'vertical-split'}>
|
<div className={'vertical-split'}>
|
||||||
<div className='visible-content'>
|
<div className='visible-content'>
|
||||||
{this.props.top}
|
{this.props.top}
|
||||||
|
<button className='collapse-button' onClick={this.collapse}>
|
||||||
|
{this.state.open ? <Icon.PlusSquare /> : <Icon.MinusSquare /> }
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className='collapse-content'>
|
<div className='collapse-content' id={this.props.name}>
|
||||||
{this.props.bottom}
|
{this.props.bottom}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
export default VerticalCollapsibleSplit;
|
export default VerticalCollapsibleSplit;
|
||||||
|
|
|
@ -19,6 +19,7 @@ class ShowAssetDetails extends React.Component {
|
||||||
asset={asset}
|
asset={asset}
|
||||||
>
|
>
|
||||||
<VerticalCollapsibleSplit
|
<VerticalCollapsibleSplit
|
||||||
|
name={'asset-display-collapse'}
|
||||||
top={<AssetDisplay />}
|
top={<AssetDisplay />}
|
||||||
bottom={<AssetInfo />}
|
bottom={<AssetInfo />}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in a new issue