Unknot (and maybe reknot) layouting for FileDragAndDrop

js/components/ascribe_forms/form_register_piece.js

@@ -154,7 +154,8 @@ let RegisterPieceForm = React.createClass({
                 </div>
                 <Property
                     name="digital_work_key"
-                    ignoreFocus={true}>
+                    ignoreFocus={true}
+                    label={'Your Work'}>
                     <InputFineUploader
                         keyRoutine={{
                             url: AppConstants.serverUrl + 's3/key/',

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_iterator.js

@@ -29,28 +29,27 @@ let FileDragAndDropPreviewIterator = React.createClass({
             areAssetsDownloadable,
             areAssetsEditable
         } = this.props;
-
         files = files.filter(displayValidFilesFilter);
 
+        const style = files && files.length > 1 ? {marginTop: '2.5em'} : null;
+
         if(files && files.length > 0) {
             return (
-                <div className="file-drag-and-drop-preview-iterator">
-                    <div className="file-drag-and-drop-preview-iterator-spacing">
-                        {files.map((file, i) => {
-                            return (
-                                <FileDragAndDropPreview
-                                    key={i}
-                                    file={file}
-                                    handleDeleteFile={handleDeleteFile}
-                                    handleCancelFile={handleCancelFile}
-                                    handlePauseFile={handlePauseFile}
-                                    handleResumeFile={handleResumeFile}
-                                    areAssetsDownloadable={areAssetsDownloadable}
-                                    areAssetsEditable={areAssetsEditable}
-                                    numberOfDisplayedFiles={files.length}/>
-                            );
-                        })}
-                    </div>
+                <div style={style}>
+                    {files.map((file, i) => {
+                        return (
+                            <FileDragAndDropPreview
+                                key={i}
+                                file={file}
+                                handleDeleteFile={handleDeleteFile}
+                                handleCancelFile={handleCancelFile}
+                                handlePauseFile={handlePauseFile}
+                                handleResumeFile={handleResumeFile}
+                                areAssetsDownloadable={areAssetsDownloadable}
+                                areAssetsEditable={areAssetsEditable}
+                                numberOfDisplayedFiles={files.length}/>
+                        );
+                    })}
                     <FileDragAndDropPreviewProgress files={files} />
                 </div>
             );

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js

@@ -43,7 +43,7 @@ const FileDragAndDropPreviewOther = React.createClass({
                 downloadUrl,
                 type,
                 showProgress } = this.props;
-        const style = !showProgress ? { visibility: 'hidden' }: null;
+        const style = !showProgress ? { visibility: 'hidden' } : null;
         let actionSymbol;
 
         // only if assets are actually downloadable, there should be a

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js

@@ -55,11 +55,13 @@ let FileDragAndDropPreviewProgress = React.createClass({
         }
 
         return (
-            <ProgressBar
-                now={Math.ceil(overallProgress)}
-                label={getLangText('Overall progress%s', ': %(percent)s%')}
-                className="ascribe-progress-bar"
-                style={style} />
+            <div style={{marginTop: '2em'}}>
+                <ProgressBar
+                    now={Math.ceil(overallProgress)}
+                    label={getLangText('Overall progress%s', ': %(percent)s%')}
+                    className="ascribe-progress-bar"
+                    style={style} />
+            </div>
         );
     }
 });

sass/ascribe_property.scss

@@ -89,6 +89,10 @@ $ascribe-red-error: rgb(169, 68, 66);
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
 
+    > .file-drag-and-drop {
+        margin-top: .5em;
+    }
+
     > p {
         height: 20px;
         margin-bottom: 0;

sass/ascribe_uploader.scss

@@ -8,14 +8,7 @@
     overflow: auto;
     text-align: center;
     vertical-align: middle;
-    padding: 1.5em 0 1.5em 0;
-
-    .file-drag-and-drop-dialog > p:first-child {
-        font-size: 1.5em !important;
-        margin-bottom: 0;
-        margin-top: 0;
-        padding-bottom: 0;
-    }
+    padding-top: 1.5em;
 }
 
 .inactive-dropzone {
@@ -34,25 +27,19 @@
     }
 }
 
-.file-drag-and-drop-preview-iterator {
-    margin: 2.5em 0 0 0;
-    text-align: right;
-
-    > div:first-child {
-        text-align: center;
-    }
-}
-
-.file-drag-and-drop-preview-iterator-spacing {
-    margin-bottom: 1em;
-
-    .file-name {
-        font-size: 1.1em;
-    }
-}
-
 .file-drag-and-drop-dialog {
     margin: 1.5em 0 1.5em 0;
+    
+    > p:first-child {
+        font-size: 1.5em !important;
+        margin-bottom: 0;
+        margin-top: 0;
+        padding-bottom: 0;
+    }
+
+    > .btn {
+        margin-bottom: 2em;
+    }
 }
 
 .file-drag-and-drop-hashing-dialog {
@@ -150,7 +137,7 @@
     width: 104px;
 
     .action-file, .spinner-file {
-        margin-top: .8em;
+        margin-top: 1em;
     }
 
     .ascribe-progress-bar + .action-file, .ascribe-progress-bar + .spinner-file {