LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/scss/link/_link.scss
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;

17
client/scss/row/_row.scss
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 ) {

202
client/src/containers/AssetInfo/view.jsx
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,106 +21,110 @@ class AssetInfo extends React.Component {
)} )}
</div> </div>
} }
rightSide={''} rightSide={
<div className='asset-information'>
{channelName && (
<Row>
<RowLabeled
label={
<Label value={'Channel'} />
}
content={
<span className='text'>
<Link className='link--brand' to={`/${channelName}:${certificateId}`}>{channelName}</Link>
</span>
}
/>
</Row>
)}
<Row>
<RowLabeled
label={
<Label value={'Share'} />
}
content={
<AssetShareButtons
host={host}
name={name}
shortId={shortId}
/>
}
/>
</Row>
<Row>
<RowLabeled
label={
<Label value={'Link'} />
}
content={
<ClickToCopy
id={'short-link'}
value={`${host}/${shortId}/${name}`}
/>
}
/>
</Row>
<Row>
<RowLabeled
label={
<Label value={'Embed'} />
}
content={
<div>
{(contentType === 'video/mp4') ? (
<ClickToCopy
id={'embed-text-video'}
value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}
/>
) : (
<ClickToCopy
id={'embed-text-image'}
value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
/>
)}
</div>
}
/>
</Row>
<Row>
<SpaceBetween>
<a
className='link--brand'
href={`${host}/${claimId}/${name}.${fileExt}`}
>
Direct Link
</a>
<a
className={'link--brand'}
href={`${host}/${claimId}/${name}.${fileExt}`}
download={name}
>
Download
</a>
<a
className={'link--brand'}
target='_blank'
href='https://lbry.io/dmca'
>
Report
</a>
</SpaceBetween>
</Row>
<Row>
<p>
Hosted via the <a className={'link--brand'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
</p>
</Row>
</div>
}
/> />
{channelName && (
<Row>
<RowLabeled
label={
<Label value={'Channel:'} />
}
content={
<span className='text'>
<Link to={`/${channelName}:${certificateId}`}>{channelName}</Link>
</span>
}
/>
</Row>
)}
<Row>
<RowLabeled
label={
<Label value={'Share:'} />
}
content={
<AssetShareButtons
host={host}
name={name}
shortId={shortId}
/>
}
/>
</Row>
<Row>
<RowLabeled
label={
<Label value={'Link:'} />
}
content={
<ClickToCopy
id={'short-link'}
value={`${host}/${shortId}/${name}`}
/>
}
/>
</Row>
<Row>
<RowLabeled
label={
<Label value={'Embed:'} />
}
content={
<div>
{(contentType === 'video/mp4') ? (
<ClickToCopy
id={'embed-text-video'}
value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}
/>
) : (
<ClickToCopy
id={'embed-text-image'}
value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
/>
)}
</div>
}
/>
</Row>
<Row>
<SpaceBetween>
<a
className='link--primary'
href={`${host}/${claimId}/${name}.${fileExt}`}
>
Direct Link
</a>
<a
className={'link--primary'}
href={`${host}/${claimId}/${name}.${fileExt}`}
download={name}
>
Download
</a>
<a
className={'link--primary'}
target='_blank'
href='https://lbry.io/dmca'
>
Report
</a>
</SpaceBetween>
</Row>
<Row>
<p>
Hosted via the <a className={'link--primary'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
</p>
</Row>
</div> </div>
); );