Design cleanup
This commit is contained in:
parent
57fab11316
commit
00bebfaa8a
5 changed files with 106 additions and 62 deletions
|
@ -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;
|
||||
|
|
|
@ -7,6 +7,5 @@
|
|||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
margin: $primary-padding;
|
||||
}
|
||||
}
|
||||
|
|
18
client/src/components/VerticalCollapsibleSplit/index.jsx
Normal file
18
client/src/components/VerticalCollapsibleSplit/index.jsx
Normal file
|
@ -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;
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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 />}
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue