Merge pull request #361 from lbryio/321-image-overflows
321 image overflows
This commit is contained in:
commit
0c0d463d86
3 changed files with 39 additions and 32 deletions
|
@ -540,26 +540,14 @@ table {
|
|||
margin : 0px
|
||||
}
|
||||
|
||||
/* show */
|
||||
|
||||
.asset {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#show-body #asset-boilerpate {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#showlite-body #asset-display-component {
|
||||
max-width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* video */
|
||||
|
||||
#video-asset {
|
||||
background-color: #000000;
|
||||
#video {
|
||||
cursor: pointer;
|
||||
}
|
||||
#showlite-body #video-asset {
|
||||
background-color: #ffffff;
|
||||
width: calc(100% - 12px - 12px - 2px);
|
||||
margin: 6px;
|
||||
|
@ -567,6 +555,25 @@ table {
|
|||
border: 1px solid #d0d0d0;
|
||||
}
|
||||
|
||||
/* show lite */
|
||||
#show-lite-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#show-lite-container #asset-display-component {
|
||||
max-height: calc(100vh - 3em);
|
||||
}
|
||||
|
||||
#show-lite-container #asset-display-component .asset {
|
||||
max-height: calc(100vh - 3em);
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
#asset-boilerplate {
|
||||
max-height: 3em;
|
||||
}
|
||||
|
||||
|
||||
/* item lists */
|
||||
|
||||
.content-list-item-asset {
|
||||
|
|
|
@ -10,7 +10,7 @@ class AssetDisplay extends React.Component {
|
|||
render () {
|
||||
const { status, error, asset: { claimData: { name, claimId, contentType, fileExt, thumbnail } } } = this.props;
|
||||
return (
|
||||
<div id="asset-display-component">
|
||||
<div id='asset-display-component'>
|
||||
{(status === LOCAL_CHECK) &&
|
||||
<div>
|
||||
<p>Checking to see if Spee.ch has your asset locally...</p>
|
||||
|
@ -19,14 +19,14 @@ class AssetDisplay extends React.Component {
|
|||
{(status === UNAVAILABLE) &&
|
||||
<div>
|
||||
<p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
|
||||
<ProgressBar size={12}/>
|
||||
<p>Curious what magic is happening here? <a className="link--primary" target="blank" href="https://lbry.io/faq/what-is-lbry">Learn more.</a></p>
|
||||
<ProgressBar size={12} />
|
||||
<p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
|
||||
</div>
|
||||
}
|
||||
{(status === ERROR) &&
|
||||
<div>
|
||||
<p>Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the below error message in the <a className="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">LBRY discord</a>.</p>
|
||||
<i><p id="error-message">{error}</p></i>
|
||||
<p>Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the below error message in the <a className='link--primary' href='https://discord.gg/YjYbwhS' target='_blank'>LBRY discord</a>.</p>
|
||||
<i><p id='error-message'>{error}</p></i>
|
||||
</div>
|
||||
}
|
||||
{(status === AVAILABLE) &&
|
||||
|
@ -37,21 +37,21 @@ class AssetDisplay extends React.Component {
|
|||
case 'image/png':
|
||||
return (
|
||||
<img
|
||||
className="asset"
|
||||
className='asset'
|
||||
src={`/${claimId}/${name}.${fileExt}`}
|
||||
alt={name}/>
|
||||
alt={name} />
|
||||
);
|
||||
case 'image/gif':
|
||||
return (
|
||||
<img
|
||||
className="asset"
|
||||
className='asset'
|
||||
src={`/${claimId}/${name}.${fileExt}`}
|
||||
alt={name}
|
||||
/>
|
||||
);
|
||||
case 'video/mp4':
|
||||
return (
|
||||
<video id="video" className="asset" controls poster={thumbnail}>
|
||||
<video id='video' className='asset' controls poster={thumbnail}>
|
||||
<source
|
||||
src={`/${claimId}/${name}.${fileExt}`}
|
||||
/>
|
||||
|
|
|
@ -9,18 +9,18 @@ class ShowLite extends React.Component {
|
|||
if (asset) {
|
||||
const { name, claimId } = asset.claimData;
|
||||
return (
|
||||
<div className='row row--tall flex-container--column flex-container--center-center'>
|
||||
<div id='show-lite-container' className='row row--tall flex-container--column flex-container--center-center'>
|
||||
<SEO pageTitle={name} asset={asset} />
|
||||
<div>
|
||||
<AssetDisplay />
|
||||
<Link id='asset-boilerpate' className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted
|
||||
via Spee.ch</Link>
|
||||
</div>
|
||||
<AssetDisplay />
|
||||
<Link id='asset-boilerpate' className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted
|
||||
via Spee.ch</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<p>loading asset data...</p>
|
||||
<div className='row row--tall row--padded flex-container--column flex-container--center-center'>
|
||||
<p>loading asset data...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue