Forgot to stage the rest of my code, thanks VS Code.

This commit is contained in:
Minesh Mitha 2018-10-06 18:57:11 +01:00
parent 81f97c1331
commit e0b15691b9
3 changed files with 124 additions and 99 deletions

View file

@ -6,6 +6,10 @@ a, a:visited {
color: $interactive-color; color: $interactive-color;
} }
.link--brand, .link--brand:visited {
color: $brand-color;
}
.link--secondary, .link--secondary:visited { .link--secondary, .link--secondary:visited {
margin: 0px; margin: 0px;
padding: 0.3em; padding: 0.3em;

View file

@ -18,6 +18,23 @@
width: 70%; width: 70%;
} }
.row-labeled-alt {
display: column;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
.row-labeled-label {
align-self: flex-start;
width: 100%;
}
.row-labeled-content {
align-self: center;
width: 100%;
}
}
@media (max-width: $break-point-medium ) { @media (max-width: $break-point-medium ) {

View file

@ -12,7 +12,7 @@ class AssetInfo extends React.Component {
render () { render () {
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 className='asset-information'> <div className='asset-information-wrap'>
<HorizontalSplit <HorizontalSplit
leftSide={ leftSide={
<div className='asset-description'> <div className='asset-description'>
@ -21,18 +21,17 @@ class AssetInfo extends React.Component {
)} )}
</div> </div>
} }
rightSide={''} rightSide={
/> <div className='asset-information'>
{channelName && ( {channelName && (
<Row> <Row>
<RowLabeled <RowLabeled
label={ label={
<Label value={'Channel:'} /> <Label value={'Channel'} />
} }
content={ content={
<span className='text'> <span className='text'>
<Link to={`/${channelName}:${certificateId}`}>{channelName}</Link> <Link className='link--brand' to={`/${channelName}:${certificateId}`}>{channelName}</Link>
</span> </span>
} }
/> />
@ -42,7 +41,7 @@ class AssetInfo extends React.Component {
<Row> <Row>
<RowLabeled <RowLabeled
label={ label={
<Label value={'Share:'} /> <Label value={'Share'} />
} }
content={ content={
<AssetShareButtons <AssetShareButtons
@ -57,7 +56,7 @@ class AssetInfo extends React.Component {
<Row> <Row>
<RowLabeled <RowLabeled
label={ label={
<Label value={'Link:'} /> <Label value={'Link'} />
} }
content={ content={
<ClickToCopy <ClickToCopy
@ -71,7 +70,7 @@ class AssetInfo extends React.Component {
<Row> <Row>
<RowLabeled <RowLabeled
label={ label={
<Label value={'Embed:'} /> <Label value={'Embed'} />
} }
content={ content={
<div> <div>
@ -94,20 +93,20 @@ class AssetInfo extends React.Component {
<Row> <Row>
<SpaceBetween> <SpaceBetween>
<a <a
className='link--primary' className='link--brand'
href={`${host}/${claimId}/${name}.${fileExt}`} href={`${host}/${claimId}/${name}.${fileExt}`}
> >
Direct Link Direct Link
</a> </a>
<a <a
className={'link--primary'} className={'link--brand'}
href={`${host}/${claimId}/${name}.${fileExt}`} href={`${host}/${claimId}/${name}.${fileExt}`}
download={name} download={name}
> >
Download Download
</a> </a>
<a <a
className={'link--primary'} className={'link--brand'}
target='_blank' target='_blank'
href='https://lbry.io/dmca' href='https://lbry.io/dmca'
> >
@ -118,10 +117,15 @@ class AssetInfo extends React.Component {
<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--brand'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
</p> </p>
</Row> </Row>
</div>
}
/>
</div> </div>
); );
} }