publish and form tweaks

js/component/menu.js

@@ -1,8 +1,6 @@
 // Generic menu styles
 var menuStyle = {
-  border: '1px solid #aaa',
+  whiteSpace: 'nowrap'
-  padding: '4px',
-  whiteSpace: 'nowrap',
 };
 
 var Menu = React.createClass({

js/page/my_files.js

@@ -24,9 +24,11 @@ var MyFilesRowMoreMenu = React.createClass({
     return (
       <div style={moreMenuStyle}>
         <Menu {...this.props}>
-          <MenuItem onClick={this.onRevealClicked} label="Reveal file" /> {/* @TODO: Switch to OS specific wording */}
+          <section className="card">
-          <MenuItem onClick={this.onRemoveClicked} label="Remove from LBRY" />
+            <MenuItem onClick={this.onRevealClicked} label="Reveal file" /> {/* @TODO: Switch to OS specific wording */}
-          <MenuItem onClick={this.onDeleteClicked} label="Remove and delete file" />
+            <MenuItem onClick={this.onRemoveClicked} label="Remove from LBRY" />
+            <MenuItem onClick={this.onDeleteClicked} label="Remove and delete file" />
+          </section>
         </Menu>
       </div>
     );
@@ -92,35 +94,37 @@ var MyFilesRow = React.createClass({
     }
 
     return (
-      <div className="row-fluid">
+      <section className="card">
-        <div className="span3">
+        <div className="row-fluid">
-          {this.props.imgUrl ? <img src={this.props.imgUrl} alt={'Photo for ' + this.props.title} style={artStyle} /> : null}
+          <div className="span3">
-        </div>
+            {this.props.imgUrl ? <img src={this.props.imgUrl} alt={'Photo for ' + this.props.title} style={artStyle} /> : null}
-        <div className="span6">
+          </div>
-          <h2>{this.props.pending ? this.props.title : <a href={'/?show=' + this.props.lbryUri}>{this.props.title}</a>}</h2>
+          <div className="span8">
-          {this.props.pending ? <em>This file is pending confirmation</em>
+            <h3>{this.props.pending ? this.props.title : <a href={'/?show=' + this.props.lbryUri}>{this.props.title}</a>}</h3>
-            : (
+            {this.props.pending ? <em>This file is pending confirmation</em>
-             <div>
+              : (
-               <div className={this.props.completed ? 'hidden' : ''} style={curProgressBarStyle}></div>
+               <div>
-               { ' ' }
+                 <div className={this.props.completed ? 'hidden' : ''} style={curProgressBarStyle}></div>
-               {this.props.completed ? 'Download complete' : (parseInt(this.props.ratioLoaded * 100) + '%')}
+                 { ' ' }
-               <div>{ pauseLink }</div>
+                 {this.props.completed ? 'Download complete' : (parseInt(this.props.ratioLoaded * 100) + '%')}
-               <div>{ watchButton }</div>
+                 <div>{ pauseLink }</div>
+                 <div>{ watchButton }</div>
+               </div>
+             )
+            }
+          </div>
+          <div className="span1" style={moreButtonColumnStyle}>
+            {this.props.pending ? null :
+             <div style={moreButtonContainerStyle}>
+               <Link style={moreButtonStyle} ref="moreButton" icon="icon-ellipsis-h" title="More Options" />
+               <MyFilesRowMoreMenu toggleButton={this.refs.moreButton} title={this.props.title}
+                                   lbryUri={this.props.lbryUri} fileName={this.props.fileName}
+                                   path={this.props.path}/>
              </div>
-           )
+            }
-          }
+          </div>
         </div>
-        <div className="span1" style={moreButtonColumnStyle}>
+      </section>
-          {this.props.pending ? null :
-           <div style={moreButtonContainerStyle}>
-             <Link style={moreButtonStyle} ref="moreButton" icon="icon-ellipsis-h" title="More Options" />
-             <MyFilesRowMoreMenu toggleButton={this.refs.moreButton} title={this.props.title}
-                                 lbryUri={this.props.lbryUri} fileName={this.props.fileName}
-                                 path={this.props.path}/>
-           </div>
-          }
-        </div>
-      </div>
     );
   }
 });
@@ -195,9 +199,7 @@ var MyFilesPage = React.createClass({
     }
     return (
       <main className="page">
-        <section>
+        {content}
-          {content}
-        </section>
       </main>
     );
   }

js/page/publish.js

@@ -263,20 +263,22 @@ var PublishPage = React.createClass({
   },
   render: function() {
     return (
-      <main className="page" ref="page">
+      <main ref="page">
-        <section className="section-block">
+        <section className="card">
           <h4>LBRY Name</h4>
-          lbry://<FormField type="text" ref="name" onChange={this.handleNameChange} />
+          <div className="form-row">
-          {
+            lbry://<FormField type="text" ref="name" onChange={this.handleNameChange} />
-            (!this.state.name ? '' :
+            {
-              (! this.state.nameResolved ? <em> This name is available</em>
+              (!this.state.name ? '' :
-                                         : (this.state.nameIsMine ? <em> You already control this name. You can use this page to update your claim.</em>
+                (! this.state.nameResolved ? <em> This name is available</em>
-                                                                  : <em> This name is currently claimed for <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits.</em>)))
+                                           : (this.state.nameIsMine ? <em> You already control this name. You can use this page to update your claim.</em>
-          }
+                                                                    : <em> This name is currently claimed for <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits.</em>)))
-          <div className="help">What LBRY name would you like to claim for this file?</div>
+            }
+            <div className="help">What LBRY name would you like to claim for this file?</div>
+          </div>
         </section>
 
-        <section className="section-block">
+        <section className="card">
           <h4>Choose File</h4>
           <form>
             <FormField name="file" ref="file" type="file" onChange={this.handleFileChange} />
@@ -290,19 +292,21 @@ var PublishPage = React.createClass({
           { this.state.nameIsMine ? <div className="help">If you don't choose a file, the file from your existing claim will be used.</div> : null }
         </section>
 
-        <section className="section-block">
+        <section className="card">
           <h4>Bid Amount</h4>
-          Credits <FormField ref="bid" style={publishNumberStyle} type="text" onChange={this.handleBidChange} value={this.state.bid} placeholder={this.state.nameResolved ? lbry.formatCredits(this.state.claimValue + 10) : 100} />
+          <div className="form-row">
-          <div className="help">How much would you like to bid for this name?
+            Credits <FormField ref="bid" style={publishNumberStyle} type="text" onChange={this.handleBidChange} value={this.state.bid} placeholder={this.state.nameResolved ? lbry.formatCredits(this.state.claimValue + 10) : 100} />
-          { !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>
+            <div className="help">How much would you like to bid for this name?
-                                     : (this.state.nameIsMine ? <span> Your current bid is <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits.</span>
+            { !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>) }
+                                       : (this.state.nameIsMine ? <span> Your current bid is <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits.</span>
+                                                                : <span> You must bid over <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits to claim this name.</span>) }
+            </div>
           </div>
         </section>
 
-        <section className="section-block">
+        <section className="card">
           <h4>Fee</h4>
-          <div className="spacer-bottom--sm">
+          <div className="form-row">
             <label>
              <FormField type="radio" onChange={ () => { this.handleFeePrefChange(false) } } checked={!this.state.isFee} /> No fee
             </label>
@@ -315,20 +319,27 @@ var PublishPage = React.createClass({
                </FormField>
                </span>
             </label>
-          </div>
+            <div className="help">
-          <div className="help">
+              <p>How much would you like to charge for this file?</p>
-            <p>How much would you like to charge for this file?</p>
+              If you choose to price this content in dollars, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.
-            If you choose to price this content in dollars, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.
+            </div>
           </div>
         </section>
 
 
-        <section className="section-block">
+        <section className="card">
           <h4>Your Content</h4>
 
-          <label htmlFor="title">Title</label><FormField type="text" ref="meta_title" name="title" placeholder="My Show, Episode 1" style={publishFieldStyle} />
+          <div className="form-row">
-          <label htmlFor="author">Author</label><FormField type="text" ref="meta_author" name="author" placeholder="My Company, Inc." style={publishFieldStyle} />
+            <label htmlFor="title">Title</label><FormField type="text" ref="meta_title" name="title" placeholder="My Show, Episode 1" style={publishFieldStyle} />
+          </div>
+          <div className="form-row">
+            <label htmlFor="author">Author</label><FormField type="text" ref="meta_author" name="author" placeholder="My Company, Inc." style={publishFieldStyle} />
+          </div>
+          <div className="form-row">
           <label htmlFor="license">License info</label><FormField type="text" ref="meta_license" name="license" defaultValue="Creative Commons Attribution 3.0 United States" style={publishFieldStyle} />
+          </div>
+          <div className="form-row">
           <label htmlFor="language">Language</label> <FormField type="select" defaultValue="en" ref="meta_language" name="language">
                <option value="en">English</option>
                <option value="zh">Chinese</option>
@@ -338,24 +349,30 @@ var PublishPage = React.createClass({
                <option value="ru">Russian</option>
                <option value="es">Spanish</option>
             </FormField>
-
+          </div>
-          <label htmlFor="description">Description</label> <FormField type="textarea" ref="meta_description" name="description" placeholder="Description of your content" style={publishFieldStyle} />
+          <div className="form-row">
-
+            <label htmlFor="description">Description</label> <FormField type="textarea" ref="meta_description" name="description" placeholder="Description of your content" style={publishFieldStyle} />
-           <div><label><FormField type="checkbox" ref="meta_nsfw" name="nsfw" placeholder="Description of your content" /> Not Safe For Work</label></div>
+          </div>
+          <div className="form-row">
+            <label><FormField type="checkbox" ref="meta_nsfw" name="nsfw" placeholder="Description of your content" /> Not Safe For Work</label>
+          </div>
         </section>
 
 
 
-        <section className="section-block">
+        <section className="card">
           <h4>Additional Content Information (Optional)</h4>
-          <label htmlFor="meta_thumbnail">Thumbnail URL</label> <FormField type="text" ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" style={publishFieldStyle} />
+          <div className="form-row">
-          <label htmlFor="meta_license_url">License URL</label> <FormField type="text" ref="meta_license_url" name="license_url" defaultValue="https://creativecommons.org/licenses/by/3.0/us/legalcode" style={publishFieldStyle} />
+            <label htmlFor="meta_thumbnail">Thumbnail URL</label> <FormField type="text" ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" style={publishFieldStyle} />
+          </div>
+          <div className="form-row">
+            <label htmlFor="meta_license_url">License URL</label> <FormField type="text" ref="meta_license_url" name="license_url" defaultValue="https://creativecommons.org/licenses/by/3.0/us/legalcode" style={publishFieldStyle} />
+          </div>
         </section>
 
-        <div className="footer-buttons">
+        <div className="card-series-submit">
-          <Link button="alt" href="/" label="Cancel"/>
-          { ' ' }
           <Link button="primary" label={!this.state.submitting ? 'Publish' : 'Publishing...'} onClick={this.handleSubmit} disabled={this.state.submitting} />
+          <Link button="cancel" href="/" label="Cancel"/>
          </div>
        </main>
     );

js/page/settings.js

@@ -90,22 +90,26 @@ var SettingsPage = React.createClass({
         </section>
         <section className="card">
           <h3>Bandwidth Limits</h3>
-          <h4>Max Upload</h4>
+          <div className="form-row">
-          <label style={settingsRadioOptionStyles}>
+            <h4>Max Upload</h4>
-            <input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxUpload}/> Unlimited
+            <label style={settingsRadioOptionStyles}>
-          </label>
+              <input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxUpload}/> Unlimited
-          <label style={settingsRadioOptionStyles}>
+            </label>
-            <input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxUpload}/> { this.state.isMaxUpload ? 'Up to' : 'Choose limit...' }
+            <label style={settingsRadioOptionStyles}>
-            <span className={ this.state.isMaxUpload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_upload} style={settingsNumberFieldStyles} onChange={this.onMaxUploadFieldChange}/> MB/s</span>
+              <input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxUpload}/> { this.state.isMaxUpload ? 'Up to' : 'Choose limit...' }
-          </label>
+              <span className={ this.state.isMaxUpload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_upload} style={settingsNumberFieldStyles} onChange={this.onMaxUploadFieldChange}/> MB/s</span>
-          <h4>Max Download</h4>
+            </label>
-          <label style={settingsRadioOptionStyles}>
+          </div>
-            <input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxDownload}/> Unlimited
+          <div className="form-row">
-          </label>
+            <h4>Max Download</h4>
-          <label style={settingsRadioOptionStyles}>
+            <label style={settingsRadioOptionStyles}>
-            <input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxDownload}/> { this.state.isMaxDownload ? 'Up to' : 'Choose limit...' }
+              <input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxDownload}/> Unlimited
-            <span className={ this.state.isMaxDownload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_download} style={settingsNumberFieldStyles} onChange={this.onMaxDownloadFieldChange}/> MB/s</span>
+            </label>
-          </label>
+            <label style={settingsRadioOptionStyles}>
+              <input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxDownload}/> { this.state.isMaxDownload ? 'Up to' : 'Choose limit...' }
+              <span className={ this.state.isMaxDownload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_download} style={settingsNumberFieldStyles} onChange={this.onMaxDownloadFieldChange}/> MB/s</span>
+            </label>
+          </div>
         </section>
         <section className="card">
           <h3>Share Diagnostic Data</h3>

js/page/wallet.js

@@ -82,19 +82,24 @@ var SendToAddressSection = React.createClass({
     return (
       <section className="card">
         <h3>Send Credits</h3>
-        <section>
+        <div className="form-row">
           <label htmlFor="amount">Amount <input id="amount" type="text" size="10" onChange={this.setAmount}></input></label>
+        </div>
+        <div className="form-row">
           <label htmlFor="address">Recipient address <input id="address" type="text" size="60" onChange={this.setAddress}></input></label>
+        </div>
+        <div className="form-row">
           <Link button="primary" label="Send" onClick={this.sendToAddress} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
-        </section>
+        </div>
         {
           this.state.results ?
-          <section>
+          <div className="form-row">
             <h4>Results</h4>
             {this.state.results}
-          </section>
+          </div>
           : ''
         }
+      </section>
     );
   }
 });

scss/_canvas.scss

@@ -148,7 +148,14 @@ $header-icon-size: 1.5em;
   background: $color-bg;
   box-shadow: $default-box-shadow;
   border-radius: 2px;
+}
 
+.card-series-submit
+{
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 800px;
+  padding: $spacing-vertical / 2;
 }
 
 .full-screen

scss/_gui.scss

@@ -19,13 +19,6 @@ section
   }
 }
 
-.section-block {
-  background-color: rgba(0,0,0,.05);
-  padding: $spacing-vertical;
-  border-radius: 2px;
-  margin-bottom: $spacing-vertical;
-}
-
 main h1 {
   font-size: 2.0em;
   margin-bottom: $spacing-vertical;
@@ -78,17 +71,7 @@ textarea {
   opacity: 0.7;
 }
 
-input[type="search"]
+input[type="text"], input[type="search"], textarea
-{
-  border: 0 none;
-  border: 2px solid rgba(160,160,160,.5);
-  padding-left: 5px;
-  padding-right: 5px;
-  line-height: $spacing-vertical * 1.5;
-  margin-bottom: $spacing-vertical/2;
-}
-
-input[type="text"], textarea
 {
   @include placeholder {
     color: lighten($color-text-dark, 60%);
@@ -97,12 +80,9 @@ input[type="text"], textarea
   border: 2px solid rgba(160,160,160,.5);
   padding-left: 5px;
   padding-right: 5px;
-  line-height: $spacing-vertical;
+  height: $spacing-vertical * 1.5;
-  margin-bottom: $spacing-vertical/2;
+  line-height: $spacing-vertical - 4;
-}
+  box-sizing: border-box;
-
-select {
-  margin-bottom: $spacing-vertical/2;
 }
 
 .busy-indicator
@@ -135,7 +115,6 @@ select {
   border: 0 none;
   text-align: center;
   border-radius: 2px;
-  box-shadow: $default-box-shadow;
   text-transform: uppercase;
   + .button-block
   {
@@ -159,11 +138,12 @@ select {
 {
   color: white;
   background-color: $color-primary;
-
+  box-shadow: $default-box-shadow;
 }
 .button-alt
 {
   background-color: rgba(0,0,0,.15);
+  box-shadow: $default-box-shadow;
 }
 .button-text
 {
@@ -195,28 +175,24 @@ select {
   }
 }
 
-.footer-buttons {
-  display: flex;
-  justify-content: center;
-}
-
 .icon:only-child {
   position: relative;
   top: 0.16em;
 }
 
-.fade-in-link {
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
 .help {
   font-size: .85em;
   color: $color-help;
 }
 
-.spacer-bottom--sm {
+.form-row
-  margin-bottom: $spacing-vertical/2;
+{
+  + .form-row
+  {
+    margin-top: $spacing-vertical / 2;
+  }
+  .help
+  {
+    margin-top: $spacing-vertical / 2;
+  }
 }