Issue #1063. Use small loader for issue image uploads.

webcompat · May 26, 2016 · 0bd1c97 · 0bd1c97
1 parent 2c83ead
commit 0bd1c97
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/webcompat/static/css/development/components/loader.css b/webcompat/static/css/development/components/loader.css
@@ -26,4 +26,9 @@
 
 .wc-Upload-Loader.is-active {
   display: block;
+}
+
+.wc-Issue-Loader {
+  right: 1%;
+  top: 12%;
 }
diff --git a/webcompat/static/js/lib/issues.js b/webcompat/static/js/lib/issues.js
@@ -180,7 +180,7 @@ issues.ImageUploadView = Backbone.View.extend({
     'change .js-buttonUpload': 'validateAndUpload'
   },
   _submitButton: $('.js-Issue-comment-button'),
-  _loaderImage: $('.js-Loader'),
+  _loaderImage: $('.js-Upload-Loader'),
   template: _.template($('#upload-input-tmpl').html()),
   render: function() {
     this.$el.html(this.template()).insertAfter($('textarea'));

diff --git a/webcompat/templates/issue/issue-comment-submit.html b/webcompat/templates/issue/issue-comment-submit.html
@@ -13,11 +13,12 @@
               <label class="wc-UploadForm-label wc-UploadForm-label--uploadForm">Attach images by <span class="wc-UploadForm-label--link">selecting them</span></label>
               <input accept=".jpe,.jpg,.jpeg,.gif,.png,.bmp" class="wc-ButtonUpload js-buttonUpload" id="image" name="image" type="file">
             </div>
-          </div>
+            <img class="wc-Upload-Loader wc-Issue-Loader js-Upload-Loader"
+                 src="/img/upload-loader.svg" alt="Uploading image">
+          </label>
         </form>
       </script>
     </div>
-    <div class="wc-Loader js-Loader"></div>
     <div class="wc-Comment-button">
       <button class="wc-Button wc-Button--action js-Issue-state-button">
         <script type="text/template" id="state-button-tmpl">