Patch publish tool reset and asset details css #366
5 changed files with 22 additions and 25 deletions
|
@ -542,10 +542,6 @@ table {
|
||||||
|
|
||||||
/* show */
|
/* show */
|
||||||
|
|
||||||
.asset {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#video {
|
#video {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
|
@ -556,15 +552,19 @@ table {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* show lite */
|
/* show lite */
|
||||||
#show-lite-container {
|
.show-lite-container {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#show-lite-container #asset-display-component {
|
.show-lite-container #asset-display-component {
|
||||||
max-height: calc(100vh - 3em);
|
max-height: calc(100vh - 3em);
|
||||||
}
|
}
|
||||||
|
|
||||||
#show-lite-container #asset-display-component .asset {
|
.show-details-container #asset-display-component .asset {
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-lite-container #asset-display-component .asset {
|
||||||
max-height: calc(100vh - 3em);
|
max-height: calc(100vh - 3em);
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,39 +5,39 @@ import * as publishStates from 'constants/publish_claim_states';
|
||||||
|
|
||||||
function PublishStatus ({ status, message }) {
|
function PublishStatus ({ status, message }) {
|
||||||
return (
|
return (
|
||||||
<div className="row row--tall flex-container--column flex-container--center-center">
|
<div className='row row--tall flex-container--column flex-container--center-center'>
|
||||||
{(status === publishStates.LOAD_START) &&
|
{(status === publishStates.LOAD_START) &&
|
||||||
<div className="row align-content-center">
|
<div className='row align-content-center'>
|
||||||
<p>File is loading to server</p>
|
<p>File is loading to server</p>
|
||||||
<p className="blue">{message}</p>
|
<p className='blue'>{message}</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
{(status === publishStates.LOADING) &&
|
{(status === publishStates.LOADING) &&
|
||||||
<div>
|
<div>
|
||||||
<div className="row align-content-center">
|
<div className='row align-content-center'>
|
||||||
<p>File is loading to server</p>
|
<p>File is loading to server</p>
|
||||||
<p className="blue">{message}</p>
|
<p className='blue'>{message}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
{(status === publishStates.PUBLISHING) &&
|
{(status === publishStates.PUBLISHING) &&
|
||||||
<div className="row align-content-center">
|
<div className='row align-content-center'>
|
||||||
<p>Upload complete. Your file is now being published on the blockchain...</p>
|
<p>Upload complete. Your file is now being published on the blockchain...</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 === publishStates.SUCCESS) &&
|
{(status === publishStates.SUCCESS) &&
|
||||||
<div className="row align-content-center">
|
<div className='row align-content-center'>
|
||||||
<p>Your publish is complete! You are being redirected to it now.</p>
|
<p>Your publish is complete! You are being redirected to it now.</p>
|
||||||
<p>If you are not automatically redirected, <a className="link--primary" target="_blank" href={message}>click here.</a></p>
|
<p>If you are not automatically redirected, <a className='link--primary' target='_blank' href={message}>click here.</a></p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
{(status === publishStates.FAILED) &&
|
{(status === publishStates.FAILED) &&
|
||||||
<div className="row align-content-center">
|
<div className='row align-content-center'>
|
||||||
<p>Something went wrong...</p>
|
<p>Something went wrong...</p>
|
||||||
<p><strong>{message}</strong></p>
|
<p><strong>{message}</strong></p>
|
||||||
<p>For help, post the above error text in the #speech channel on the <a className="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">lbry discord</a></p>
|
<p>For help, post the above error text in the #speech channel on the <a className='link--primary' href='https://discord.gg/YjYbwhS' target='_blank'>lbry discord</a></p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -20,7 +20,7 @@ class ShowAssetDetails extends React.Component {
|
||||||
<AssetTitle />
|
<AssetTitle />
|
||||||
</div>
|
</div>
|
||||||
<div className='column column--5 column--sml-10 align-content-top'>
|
<div className='column column--5 column--sml-10 align-content-top'>
|
||||||
<div className='row row--padded'>
|
<div className='row row--padded show-details-container'>
|
||||||
<AssetDisplay />
|
<AssetDisplay />
|
||||||
</div>
|
</div>
|
||||||
</div><div className='column column--5 column--sml-10 align-content-top'>
|
</div><div className='column column--5 column--sml-10 align-content-top'>
|
||||||
|
|
|
@ -9,7 +9,7 @@ class ShowLite extends React.Component {
|
||||||
if (asset) {
|
if (asset) {
|
||||||
const { name, claimId } = asset.claimData;
|
const { name, claimId } = asset.claimData;
|
||||||
return (
|
return (
|
||||||
<div id='show-lite-container' className='row row--tall flex-container--column flex-container--center-center'>
|
<div className='row row--tall flex-container--column flex-container--center-center show-lite-container'>
|
||||||
<SEO pageTitle={name} asset={asset} />
|
<SEO pageTitle={name} asset={asset} />
|
||||||
<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
|
||||||
|
|
|
@ -72,7 +72,7 @@ class PublishForm extends React.Component {
|
||||||
console.log('publish response:', response);
|
console.log('publish response:', response);
|
||||||
if ((xhr.status === 200) && response.success) {
|
if ((xhr.status === 200) && response.success) {
|
||||||
this.props.history.push(`/${response.data.claimId}/${response.data.name}`);
|
this.props.history.push(`/${response.data.claimId}/${response.data.name}`);
|
||||||
this.props.onPublishStatusChange(publishStates.SUCCESS, response.data.url);
|
this.props.onFileClear();
|
||||||
} else {
|
} else {
|
||||||
this.props.onPublishStatusChange(publishStates.FAILED, response.message);
|
this.props.onPublishStatusChange(publishStates.FAILED, response.message);
|
||||||
}
|
}
|
||||||
|
@ -119,9 +119,6 @@ class PublishForm extends React.Component {
|
||||||
// publish the claim
|
// publish the claim
|
||||||
return this.makePublishRequest(this.props.file, metadata);
|
return this.makePublishRequest(this.props.file, metadata);
|
||||||
})
|
})
|
||||||
.then(() => {
|
|
||||||
this.props.onPublishStatusChange('publish request made');
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
this.props.onPublishSubmitError(error.message);
|
this.props.onPublishSubmitError(error.message);
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue