styling for mobile

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -109,9 +109,9 @@ var FileDragAndDrop = React.createClass({
     render: function () {
         // has files only is true if there are files that do not have the status deleted or canceled
         let hasFiles = this.props.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0;
-        let className = hasFiles ? 'file-drag-and-drop has-files ' : 'file-drag-and-drop ';
+        let className = hasFiles ? 'has-files ' : '';
         className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';
-        className += ' ' + this.props.className;
+        className += this.props.className ? ' ' + this.props.className : '';
 
         return (
             <div

js/components/ascribe_uploader/file_drag_and_drop_preview_image.js

@@ -3,6 +3,8 @@
 import React from 'react';
 import ProgressBar from 'react-progressbar';
 
+import AppConstants from '../../constants/application_constants';
+
 let FileDragAndDropPreviewImage = React.createClass({
     propTypes: {
         progress: React.PropTypes.number,
@@ -10,23 +12,33 @@ let FileDragAndDropPreviewImage = React.createClass({
         onClick: React.PropTypes.func
     },
 
+    getInitialState() {
+        return {
+            loading: false
+        };
+    },
+
+    onClick(e) {
+        this.setState({
+            loading: true
+        });
+
+        this.props.onClick(e);
+    },
+
     render() {
         let imageStyle = {
             backgroundImage: 'url("' + this.props.url + '")',
             backgroundSize: 'cover'
         };
 
+        let actionSymbol = this.state.loading ? <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> : <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete or cancel upload" onClick={this.onClick} />;
         return (
             <div
                 className="file-drag-and-drop-preview-image"
                 style={imageStyle}>
                     <ProgressBar completed={this.props.progress} color="black"/>
-                    <span 
-                        className="glyphicon glyphicon-remove delete-file"
-                        aria-hidden="true"
-                        title="Delete"
-                        onClick={this.props.onClick}>
-                    </span>
+                    {actionSymbol}
             </div>
         );
     }

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -141,7 +141,7 @@ var ReactS3FineUploader = React.createClass({
                 }
                 return name;
             },
-            multiple: false
+            multiple: true
         };
     },
 
@@ -425,6 +425,7 @@ var ReactS3FineUploader = React.createClass({
     render() {
         return (
             <FileDragAndDrop
+                className="file-drag-and-drop"
                 onDrop={this.handleUploadFile}
                 filesToUpload={this.state.filesToUpload}
                 handleDeleteFile={this.handleDeleteFile}

sass/ascribe_settings.scss

@@ -71,10 +71,11 @@
     padding-right: 1.5em;
 
     cursor:pointer;
-
-   /*  input, div, span, pre, textarea, select {
+    
+    input, div, span:not(.glyphicon), pre, textarea, select {
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    } */
+    }
+   
     span {
         font-weight: normal;
         font-size: 0.9em;
@@ -83,7 +84,7 @@
 
     div {
         /* margin-top: 10px; */
-        div {
+        div:not(.file-drag-and-drop div) {
           padding-left: 0;
           font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
           font-weight: normal;

sass/ascribe_uploader.scss

@@ -1,15 +1,15 @@
 .file-drag-and-drop {
-    position: relative;
     display: block;
     outline: 1px dashed #616161;
     cursor: pointer;
     vertical-align: middle;
     text-align: center;
-    height:185px;
+    height: auto;
     background-color: #FAFAFA;
-    transition: .1s linear background-color;
-
+    overflow: auto;
     margin-top: 1em;
+
+    padding: 3em;
 }
 
 .inactive-dropzone {
@@ -27,6 +27,8 @@
 .file-drag-and-drop .file-drag-and-drop-dialog {
     font-size: 1.25em !important;
 
+    margin-top: 1em;
+
     &:before {
         content: ' ';
         display: inline-block;
@@ -37,19 +39,19 @@
 
 .has-files {
     text-align: left;
-    padding: 3em 0 0 0;
+    padding: 4% 0 0 0;
 }
 
 .file-drag-and-drop-position {
     display: inline-block;
-    margin: 0 0 3em 3em;
+    margin: 0 0 4% 4%;
     float:left;
 }
 
 .file-drag-and-drop-preview-table-wrapper {
     display: table;
-    height:94px;
-    width:104px;
+    height:64px;
+    width:74px;
 }
 
 .file-drag-and-drop-preview {
@@ -61,15 +63,15 @@
 
 .file-drag-and-drop-preview-image {
     display: table;
-    height:104px;
-    width:104px;
+    height:74px;
+    width:74px;
     overflow:hidden;
     border: 1px solid #616161;
     text-align: center;
 }
 
 .file-drag-and-drop-preview-image .delete-file {
-    font-size: 3em;
+    font-size: 2.5em;
     margin-top: .3em;
     color: white;
     text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
@@ -82,9 +84,9 @@
 
 .file-drag-and-drop-preview-other .delete-file {
     position: relative;
-    top: .45em;
+    top: .3em;
     margin-top: 0;
-    font-size: 3em;
+    font-size: 2.5em;
     color: white;
     text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
     cursor: pointer;
@@ -103,5 +105,5 @@
 
 .file-drag-and-drop-preview-other span:not(:first-child) {
     display: block;
-    margin-top: 1.5em;
+    margin-top: .5em;
 }