Forgot to stage the rest of my code, thanks VS Code.
This commit is contained in:
parent
81f97c1331
commit
e0b15691b9
3 changed files with 124 additions and 99 deletions
|
@ -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;
|
||||||
|
|
|
@ -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 ) {
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue