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={ rightSide={
<div className='asset-information'> <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> <Row>
<RowLabeledAlt <RowLabeledAlt
label={ label={
<Label value={'Channel'} /> <Label value={'Share'} />
} }
content={ content={
<span className='text'> <AssetShareButtons
<Link className='link--brand link--hover' to={`/${channelName}:${certificateId}`}>{channelName}</Link> host={host}
</span> 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>
)}
<Row> <Row>
<RowLabeledAlt <RowLabeledAlt
label={ label={
<Label value={'Share'} /> <Label value={'Embed'} />
} }
content={ content={
<AssetShareButtons <div>
host={host} {(contentType === 'video/mp4') ? (
name={name} <ClickToCopy
shortId={shortId} id={'embed-text-video'}
/> value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}
} />
/> ) : (
</Row> <ClickToCopy
id={'embed-text-image'}
<Row> value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
<RowLabeledAlt />
label={ )}
<Label value={'Link'} /> </div>
} }
content={ />
<ClickToCopy </Row>
id={'short-link'} </div>
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> <Row>
<SpaceBetween> <SpaceBetween>