Merge pull request #6735 from samvera/6733_file_upload_progress_bars

fix blueimp file upload progress bars

Author: dlpierce

app/assets/stylesheets/hyrax/_file_upload.scss

@@ -34,3 +34,9 @@
     padding-bottom: 10px;
   }
 }
+
+// fix blueimp jQuery-File-Upload display problems under Bootstrap 4+
+// found here: https://stackoverflow.com/a/48162651
+.fade.in {
+  opacity: 1
+}

app/views/hyrax/uploads/_js_templates.html.erb

@@ -1,20 +1,20 @@
 <!-- The template to display files available for upload -->
-<% fade_class_if_not_test = Rails.env.test? ? 'show' : 'fade show' %>
+<% fade_class_if_not_test = Rails.env.test? ? '' : 'fade' %>
 <script id="template-upload" type="text/x-tmpl">
 {% for (var i=0, file; file=o.files[i]; i++) { %}
     <tr class="template-upload <%= fade_class_if_not_test %>">
-        <span>
+        <td>
             <span class="preview"></span>
-        </span>
-        <span>
+        </td>
+        <td>
             <p class="name">{%=file.name%}</p>
             <strong class="error text-danger"></strong>
-        </span>
-        <span>
+        </td>
+        <td>
             <p class="size">Processing...</p>
             <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width:0%;"></div></div>
-        </span>
-        <span class="text-right">
+        </td>
+        <td class="text-right">
             {% if (!i && !o.options.autoUpload) { %}
                 <button class="btn btn-primary start" disabled>
                     <span class="fa fa-upload"></span>
@@ -27,7 +27,7 @@
                     <span><%= t('helpers.action.cancel') %></span>
                 </button>
             {% } %}
-        </span>
+        </td>
     </tr>
 {% } %}
 </script>

app/views/hyrax/uploads/_js_templates_branding.html.erb

@@ -1,7 +1,7 @@
 <!-- The template to display files available for upload -->
 <script id="template-upload" type="text/x-tmpl">
 {% for (var i=0, file; file=o.files[i]; i++) { %}
-    <tr class="template-upload fade show">
+    <tr class="template-upload fade">
       <td>
         <span class="preview"></span>
       </td>
@@ -37,7 +37,7 @@
 <!-- The template to display the banner once upload is complete -->
 <script id="template-download" type="text/x-tmpl">
 {% for (var i=0, file; file=o.files[i]; i++) { %}
-        <span class="template-download fade show">
+        <span class="template-download fade">
           <div id="banner">
             <div class="row branding-banner-row">
               <div class="col-sm-3">
@@ -69,7 +69,7 @@
 <!-- The template to display logo in the table once upload is complete -->
 <script id="logo-template-download" type="text/x-tmpl">
 {% for (var i=0, file; file=o.files[i]; i++) { %}
-            <span class="template-download fade show">
+            <span class="template-download fade">
             <div class="row branding-logo-row">
               <div class="col-sm-3">
                 <span class="preview">

app/views/hyrax/uploads/_js_templates_versioning.html.erb

@@ -1,5 +1,5 @@
 <!-- The template to display files available for upload -->
-<% fade_class_if_not_test = Rails.env.test? ? 'show' : 'fade show' %>
+<% fade_class_if_not_test = Rails.env.test? ? '' : 'fade' %>
 <script id="versioning-template-upload" type="text/x-tmpl">
 {% for (var i=0, file; file=o.files[i]; i++) { %}
     <tr class="template-upload <%= fade_class_if_not_test %>">