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

Merge pull request #361 from lbryio/321-image-overflows

Browse source 
321 image overflows
This commit is contained in:
Bill Bittner 2018-02-25 17:51:55 -08:00 committed by GitHub
commit 0c0d463d86
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
public/assets/css/general.css
View file

@ -540,26 +540,14 @@ table {
margin : 0px margin : 0px
} }
/* show */
.asset { .asset {
width: 100%; max-width: 100%;
} }
#show-body #asset-boilerpate { #video {
display: none;
}
#showlite-body #asset-display-component {
max-width: 50%;
text-align: center;
}
/* video */
#video-asset {
background-color: #000000;
cursor: pointer; cursor: pointer;
}
#showlite-body #video-asset {
background-color: #ffffff; background-color: #ffffff;
width: calc(100% - 12px - 12px - 2px); width: calc(100% - 12px - 12px - 2px);
margin: 6px; margin: 6px;
@ -567,6 +555,25 @@ table {
border: 1px solid #d0d0d0; 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 */ /* item lists */
.content-list-item-asset { .content-list-item-asset {

18
react/components/AssetDisplay/view.jsx
View file

@ -10,7 +10,7 @@ class AssetDisplay extends React.Component {
render () { render () {
const { status, error, asset: { claimData: { name, claimId, contentType, fileExt, thumbnail } } } = this.props; const { status, error, asset: { claimData: { name, claimId, contentType, fileExt, thumbnail } } } = this.props;
return ( return (
<div id="asset-display-component"> <div id='asset-display-component'>
{(status === LOCAL_CHECK) && {(status === LOCAL_CHECK) &&
<div> <div>
<p>Checking to see if Spee.ch has your asset locally...</p> <p>Checking to see if Spee.ch has your asset locally...</p>
@ -19,14 +19,14 @@ class AssetDisplay extends React.Component {
{(status === UNAVAILABLE) && {(status === UNAVAILABLE) &&
<div> <div>
<p>Sit tight, we're searching the LBRY blockchain for your asset!</p> <p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
<ProgressBar size={12}/> <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> <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> </div>
} }
{(status === ERROR) && {(status === ERROR) &&
<div> <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> <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> <i><p id='error-message'>{error}</p></i>
</div> </div>
} }
{(status === AVAILABLE) && {(status === AVAILABLE) &&
@ -37,21 +37,21 @@ class AssetDisplay extends React.Component {
case 'image/png': case 'image/png':
return ( return (
<img <img
className="asset" className='asset'
src={`/${claimId}/${name}.${fileExt}`} src={`/${claimId}/${name}.${fileExt}`}
alt={name}/> alt={name} />
); );
case 'image/gif': case 'image/gif':
return ( return (
<img <img
className="asset" className='asset'
src={`/${claimId}/${name}.${fileExt}`} src={`/${claimId}/${name}.${fileExt}`}
alt={name} alt={name}
/> />
); );
case 'video/mp4': case 'video/mp4':
return ( return (
<video id="video" className="asset" controls poster={thumbnail}> <video id='video' className='asset' controls poster={thumbnail}>
<source <source
src={`/${claimId}/${name}.${fileExt}`} src={`/${claimId}/${name}.${fileExt}`}
/> />

6
react/components/ShowAssetLite/view.jsx
View file

@ -9,18 +9,18 @@ class ShowLite extends React.Component {
if (asset) { if (asset) {
const { name, claimId } = asset.claimData; const { name, claimId } = asset.claimData;
return ( 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} /> <SEO pageTitle={name} asset={asset} />
<div>
<AssetDisplay /> <AssetDisplay />
<Link id='asset-boilerpate' className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted <Link id='asset-boilerpate' className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted
via Spee.ch</Link> via Spee.ch</Link>
</div> </div>
</div>
); );
} }
return ( return (
<div className='row row--tall row--padded flex-container--column flex-container--center-center'>
<p>loading asset data...</p> <p>loading asset data...</p>
</div>
); );
} }
}; };