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

Moved inline row into a new class inside row.scss and applied same rule for channel and share

Browse source
This commit is contained in:
Minesh Mitha 2018-10-22 21:57:39 +01:00
parent 954bc189d7
commit 22a5b2581d
3 changed files with 82 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/scss/click-to-copy/_click-to-copy.scss
View file

@ -33,4 +33,3 @@
}
}
}

22
client/scss/row/_row.scss
View file

@ -58,3 +58,25 @@
}
}
@media (max-width: $break-point-tablet) and (min-width: $break-point-phone) {
.tablet-inline-row {
display: flex;
justify-content: space-between;
width: 100%;
>.row {
flex: 1;
margin: 0 15px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
}

117
client/src/containers/AssetInfo/view.jsx
View file

@ -24,72 +24,75 @@ class AssetInfo extends React.Component {
}
rightSide={
<div className='asset-information'>
{channelName && (
<div className='tablet-inline-row'>
{channelName && (
<Row>
<RowLabeledAlt
label={
<Label value={'Channel'} />
}
content={
<span className='text'>
<Link className='link--brand link--hover' to={`/${channelName}:${certificateId}`}>{channelName}</Link>
</span>
}
/>
</Row>
)}
<Row>
<RowLabeledAlt
label={
<Label value={'Channel'} />
<Label value={'Share'} />
}
content={
<span className='text'>
<Link className='link--brand link--hover' to={`/${channelName}:${certificateId}`}>{channelName}</Link>
</span>
<AssetShareButtons
host={host}
name={name}
shortId={shortId}
/>
}
/>
</Row>
</div>
<div className='tablet-inline-row'>
<Row>
<RowLabeledAlt
label={
<Label value={'Link'} />
}
content={
<ClickToCopy
id={'short-link'}
value={`${host}/${shortId}/${name}`}
/>
}
/>
</Row>
)}
<Row>
<RowLabeledAlt
label={
<Label value={'Share'} />
}
content={
<AssetShareButtons
host={host}
name={name}
shortId={shortId}
/>
}
/>
</Row>
<Row>
<RowLabeledAlt
label={
<Label value={'Link'} />
}
content={
<ClickToCopy
id={'short-link'}
value={`${host}/${shortId}/${name}`}
/>
}
/>
</Row>
<Row>
<RowLabeledAlt
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>
<RowLabeledAlt
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>
</div>
<Row>
<SpaceBetween>