Changed Horizontal Split to be vertical + Whitespace to linebreak descriptions.

This commit is contained in:
Minesh Mitha 2018-10-04 21:05:34 +01:00
parent 02b82240dd
commit 542107db78
3 changed files with 15 additions and 10 deletions

View file

@ -20,3 +20,7 @@
.vertical-split .asset-display { .vertical-split .asset-display {
height: 90vh; height: 90vh;
} }
.asset-description {
white-space: pre-line;
}

View file

@ -12,6 +12,13 @@ class AssetInfo extends React.Component {
const { asset: { shortId, claimData : { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } } } = this.props; const { asset: { shortId, claimData : { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } } } = this.props;
return ( return (
<div> <div>
{description && (
<Row>
<p class='asset-description'>{description}</p>
</Row>
)}
{channelName && ( {channelName && (
<Row> <Row>
<RowLabeled <RowLabeled
@ -104,12 +111,6 @@ class AssetInfo extends React.Component {
</SpaceBetween> </SpaceBetween>
</Row> </Row>
{description && (
<Row>
<p>{description}</p>
</Row>
)}
<Row> <Row>
<p> <p>
Hosted via the <a className={'link--primary'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain Hosted via the <a className={'link--primary'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain

View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import PageLayout from '@components/PageLayout'; import PageLayout from '@components/PageLayout';
import HorizontalSplit from '@components/HorizontalSplit'; import VerticalSplit from '@components/VerticalSplit';
import AssetTitle from '@containers/AssetTitle'; import AssetTitle from '@containers/AssetTitle';
import AssetDisplay from '@containers/AssetDisplay'; import AssetDisplay from '@containers/AssetDisplay';
import AssetInfo from '@containers/AssetInfo'; import AssetInfo from '@containers/AssetInfo';
@ -18,9 +18,9 @@ class ShowAssetDetails extends React.Component {
asset={asset} asset={asset}
> >
<AssetTitle /> <AssetTitle />
<HorizontalSplit <VerticalSplit
leftSide={<AssetDisplay />} top={<AssetDisplay />}
rightSide={<AssetInfo />} bottom={<AssetInfo />}
/> />
</PageLayout> </PageLayout>
); );