style progress bar

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -169,6 +169,7 @@ let FileDragAndDrop = React.createClass({
         if(this.props.hashingProgress !== -2) {
             return (
                 <div className={className}>
+                    <div className="file-drag-and-drop-hashing-dialog">
                         <p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
                         <p>
                             <a onClick={this.props.handleCancelHashing}> {getLangText('Cancel hashing')}</a>
@@ -178,6 +179,7 @@ let FileDragAndDrop = React.createClass({
                             label="%(percent)s%"
                             className="ascribe-progress-bar"/>
                     </div>
+                </div>
             );
         } else {
             return (

js/components/ascribe_uploader/file_drag_and_drop_dialog.js

@@ -32,7 +32,7 @@ let FileDragAndDropDialog = React.createClass({
                 queryParamsUpload.method = 'upload';
 
                 return (
-                    <span className="file-drag-and-drop-dialog present-options">
+                    <div className="file-drag-and-drop-dialog present-options">
                         <p>{getLangText('Would you rather')}</p>
                         <Link
                             to={this.getPath()}
@@ -51,12 +51,12 @@ let FileDragAndDropDialog = React.createClass({
                                 {getLangText('Upload and hash your work')}
                             </span>
                         </Link>
-                    </span>
+                    </div>
                 );
             } else {
                 if(this.props.multipleFiles) {
                     return (
-                        <span className="file-drag-and-drop-dialog">
+                        <div className="file-drag-and-drop-dialog">
                             <p>{getLangText('Drag files here')}</p>
                             <p>{getLangText('or')}</p>
                             <span
@@ -64,13 +64,13 @@ let FileDragAndDropDialog = React.createClass({
                                 onClick={this.props.onClick}>
                                     {getLangText('choose files to upload')}
                             </span>
-                        </span>
+                        </div>
                     );
                 } else {
                     let dialog = queryParams.method === 'hash' ? getLangText('choose a file to hash') : getLangText('choose a file to upload');
 
                     return (
-                        <span className="file-drag-and-drop-dialog">
+                        <div className="file-drag-and-drop-dialog">
                             <p>{getLangText('Drag a file here')}</p>
                             <p>{getLangText('or')}</p>
                             <span
@@ -78,7 +78,7 @@ let FileDragAndDropDialog = React.createClass({
                                 onClick={this.props.onClick}>
                                     {dialog}
                             </span>
-                        </span>
+                        </div>
                     );
                 }
             }

js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js

@@ -18,29 +18,41 @@ let FileDragAndDropPreviewIterator = React.createClass({
     },
 
     render() {
-        if(this.props.files && this.props.files.length > 0) {
+        let {
+            files,
+            handleDeleteFile,
+            handleCancelFile,
+            handlePauseFile,
+            handleResumeFile,
+            areAssetsDownloadable,
+            areAssetsEditable
+        } = this.props;
+
+        files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
+
+        if(files && files.length > 0) {
             return (
                 <div className="file-drag-and-drop-preview-iterator">
-                    <div>
+                    <div className="file-drag-and-drop-preview-iterator-spacing">
-                        {this.props.files.map((file, i) => {
+                        {files.map((file, i) => {
                             if(file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1) {
                                 return (
                                     <FileDragAndDropPreview
                                         key={i}
                                         file={file}
-                                        handleDeleteFile={this.props.handleDeleteFile}
+                                        handleDeleteFile={handleDeleteFile}
-                                        handleCancelFile={this.props.handleCancelFile}
+                                        handleCancelFile={handleCancelFile}
-                                        handlePauseFile={this.props.handlePauseFile}
+                                        handlePauseFile={handlePauseFile}
-                                        handleResumeFile={this.props.handleResumeFile}
+                                        handleResumeFile={handleResumeFile}
-                                        areAssetsDownloadable={this.props.areAssetsDownloadable}
+                                        areAssetsDownloadable={areAssetsDownloadable}
-                                        areAssetsEditable={this.props.areAssetsEditable}/>
+                                        areAssetsEditable={areAssetsEditable}/>
                                 );
                             } else {
                                 return null;
                             }
                         })}
                     </div>
-                    <FileDragAndDropPreviewProgress files={this.props.files} />
+                    <FileDragAndDropPreviewProgress files={files} />
                 </div>
             );
         } else {

js/components/ascribe_uploader/file_drag_and_drop_preview_progress.js

@@ -22,23 +22,28 @@ let FileDragAndDropPreviewProgress = React.createClass({
             overallProgress += files[i].size / sizeOfAllFiles * files[i].progress;
         }
 
-
         return overallProgress;
     },
 
     render() {
         let overallProgress = this.calcOverallProgress();
+        let style = {
+            visibility: 'hidden'
+        };
 
         if(overallProgress !== 0) {
+            style.visibility = 'visible';
+        }
+
+        console.log(overallProgress, style);
+
         return (
             <ProgressBar
                 now={Math.ceil(overallProgress)}
                 label="Overall progress: %(percent)s%"
-                    className="ascribe-progress-bar" />
+                className="ascribe-progress-bar"
+                style={style} />
         );
-        } else {
-            return null;
-        }
     }
 });
 

sass/ascribe_uploader.scss

@@ -10,7 +10,6 @@
 
     cursor: default !important;
 
-    padding: 1.5em 0 1.5em 0;
 }
 
 .inactive-dropzone {
@@ -30,6 +29,7 @@
 }
 
 .file-drag-and-drop-preview-iterator {
+    margin: 2.5em 0 0 0;
     text-align: right;
 
     > div:first-child {
@@ -37,6 +37,18 @@
     }
 }
 
+.file-drag-and-drop-preview-iterator-spacing {
+    margin-bottom: 1em;
+}
+
+.file-drag-and-drop-dialog {
+    margin: 1.5em 0 1.5em 0;
+}
+
+.file-drag-and-drop-hashing-dialog {
+    margin: 1.5em 0 0 0;
+}
+
 .file-drag-and-drop .file-drag-and-drop-dialog > p:first-child {
     font-size: 1.5em !important;