update styles and layout for Publish page
This commit is contained in:
Will Moyer
Alex Liebowitz
parent
683a3cd4b1
commit
c3754e7c56
3 changed files with 39 additions and 41 deletions
1
dist/index.html
vendored
1
dist/index.html
vendored
|
|
@ -5,6 +5,7 @@
|
|||
<title>LBRY</title>
|
||||
|
||||
<link href='https://fonts.googleapis.com/css?family=Raleway:600,300' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600italic,600' rel='stylesheet' type='text/css'>
|
||||
<link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
|
||||
<link href="./js/mediaelement/mediaelementplayer.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
|
||||
|
|
|
|||
|
|
@ -203,19 +203,19 @@ var PublishPage = React.createClass({
|
|||
<main className="page">
|
||||
<SubPageLogo />
|
||||
<h1>Publish Content</h1>
|
||||
<section>
|
||||
<h4>LBRY name</h4>
|
||||
<div className="help">What LBRY name would you like to claim for this file?</div>
|
||||
<section className="section-block">
|
||||
<h4>LBRY Name</h4>
|
||||
lbry://<input type="text" ref="name" onChange={this.handleNameChange} />
|
||||
{
|
||||
(!this.state.name ? '' :
|
||||
(this.state.nameResolved ? <em> This name is currently claimed for <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits</em>
|
||||
: <em> This name is available</em>))
|
||||
}
|
||||
<div className="help">What LBRY name would you like to claim for this file?</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Choose file</h4>
|
||||
<section className="section-block">
|
||||
<h4>Choose File</h4>
|
||||
<form>
|
||||
<input name="file" type="file" onChange={this.handleFileChange} />
|
||||
{ !this.state.fileInfo ? '' :
|
||||
|
|
@ -227,38 +227,39 @@ var PublishPage = React.createClass({
|
|||
</form>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Bid amount</h4>
|
||||
<section className="help">How much would you like to bid for this name?
|
||||
{ !this.state.nameResolved ? <span> Since this name is not currently resolved, you may bid as low as you want, but higher bids help prevent others from claiming your name.</span>
|
||||
: <span> You must bid over <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits to claim this name.</span> }
|
||||
</section>
|
||||
<section className="section-block">
|
||||
<h4>Bid Amount</h4>
|
||||
Credits <input style={publishNumberInputStyle} type="text" onChange={this.handleBidChange} value={this.state.bid} placeholder={this.state.nameResolved ? lbry.formatCredits(this.state.claimValue + 10) : 100} />
|
||||
{this.state.bid && isNaN(this.state.bid) ? <span className="warning"> Must be a number</span> : ''}
|
||||
<div className="help">How much would you like to bid for this name?
|
||||
{ !this.state.nameResolved ? <span> Since this name is not currently resolved, you may bid as low as you want, but higher bids help prevent others from claiming your name.</span>
|
||||
: <span> You must bid over <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits to claim this name.</span> }
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section className="section-block">
|
||||
<h4>Fee</h4>
|
||||
<section className="help">How much would you like to charge for this file? </section>
|
||||
<label style={settingsRadioOptionStyles}>
|
||||
<div className="spacer-bottom--sm">
|
||||
<label>
|
||||
<input type="radio" onChange={ () => { this.handleFeePrefChange(false) } } checked={!this.state.isFee} /> No fee
|
||||
</label>
|
||||
<label style={settingsRadioOptionStyles}>
|
||||
<label>
|
||||
<input type="radio" onChange={ () => { this.handleFeePrefChange(true) } } checked={this.state.isFee} /> { !this.state.isFee ? 'Choose fee...' : 'Fee (in LBRY credits) ' }
|
||||
<input className={ this.state.isFee ? '' : 'hidden '} onChange={this.handleFeeChange} placeholder="5.5" style={publishNumberInputStyle} />
|
||||
<input type="text" className={ this.state.isFee ? '' : 'hidden '} onChange={this.handleFeeChange} placeholder="5.5" style={publishNumberInputStyle} />
|
||||
{this.state.fee && isNaN(this.state.fee) ? <span className="warning"> Must be a number</span> : ''}
|
||||
</label>
|
||||
</div>
|
||||
<div className="help">How much would you like to charge for this file? </div>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<h4>Your content</h4>
|
||||
<section className="section-block">
|
||||
<h4>Your Content</h4>
|
||||
|
||||
<section><label for="title" style={publishFieldLabelStyle}>Title</label> <input ref="meta_title" name="title" placeholder="My Show, Episode 1" style={publishFieldStyle} /></section>
|
||||
<section><label for="author" style={publishFieldLabelStyle}>Author</label> <input ref="meta_author" name="author" placeholder="My Company, Inc." style={publishFieldStyle} /></section>
|
||||
<section><label for="license" style={publishFieldLabelStyle}>License info</label> <input ref="meta_license" name="license" placeholder={'Copyright My Company, Inc. ' + (new Date().getFullYear()) + '.'} style={publishFieldStyle} /></section>
|
||||
<section>
|
||||
<label for="language" style={publishFieldLabelStyle}>Language</label> <select ref="meta_language" name="language">
|
||||
<label for="title">Title</label><input type="text" ref="meta_title" name="title" placeholder="My Show, Episode 1" style={publishFieldStyle} />
|
||||
<label for="author">Author</label><input type="text" ref="meta_author" name="author" placeholder="My Company, Inc." style={publishFieldStyle} />
|
||||
<label for="license">License info</label><input type="text" ref="meta_license" name="license" placeholder={'Copyright My Company, Inc. ' + (new Date().getFullYear()) + '.'} style={publishFieldStyle} />
|
||||
<label for="language">Language</label> <select ref="meta_language" name="language">
|
||||
<option value="en" selected>English</option>
|
||||
<option value="zh">Chinese</option>
|
||||
<option value="fr">French</option>
|
||||
|
|
@ -267,23 +268,19 @@ var PublishPage = React.createClass({
|
|||
<option value="ru">Russian</option>
|
||||
<option value="es">Spanish</option>
|
||||
</select>
|
||||
|
||||
<label for="description">Description</label> <textarea ref="meta_description" name="description" placeholder="Description of your content" style={publishFieldStyle}></textarea>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<label for="description" style={publishFieldLabelStyle}>Description</label> <textarea ref="meta_description" name="description" placeholder="Description of your content" style={publishFieldStyle}></textarea>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<h4>Additional content information (optional)</h4>
|
||||
|
||||
<section><label for="meta_thumbnail" style={publishFieldLabelStyle}>Thumbnail URL</label> <input ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" style={publishFieldStyle} /></section>
|
||||
<section className="section-block"><h4>Additional Content Information (Optional)</h4>
|
||||
<label for="meta_thumbnail">Thumbnail URL</label> <input type="text" ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" style={publishFieldStyle} /></section>
|
||||
|
||||
<section>
|
||||
<div className="footer-buttons">
|
||||
<Link button="alt" href="/" label="Cancel"/>
|
||||
<Link button="primary" label="Publish" onClick={this.publish} disabled={!this.readyToPublish() || this.state.submitting} />
|
||||
</section>
|
||||
<section>
|
||||
<Link href="/" label="<< Return"/>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ $spacing-vertical: 24px;
|
|||
$color-primary: #155B4A;
|
||||
$color-light-alt: hsl(hue($color-primary), 15, 85);
|
||||
$color-text-dark: #000;
|
||||
$color-help: #666;
|
||||
$color-help: rgba(0,0,0,.6);
|
||||
$color-money: #216C2A;
|
||||
$color-meta-light: #505050;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue