Update to bootstrap 5 classes.

3 files changed, 20 insertions, 20 deletions

diff --git a/uploader/static/js/files.js b/uploader/static/js/files.js
index 9d6bca1..0bde6f7 100644
--- a/uploader/static/js/files.js
+++ b/uploader/static/js/files.js
@@ -84,8 +84,8 @@ var errorHandler = makeResumableHandler("error");
 var markResumableDragAndDropElement = (resumable, fileinput, droparea, browsebutton) => {
     if(resumable.support) {
         //Hide file input element and display drag&drop UI
-        add_class(fileinput, "hidden");
-        remove_class(droparea, "hidden");
+        add_class(fileinput, "visually-hidden");
+        remove_class(droparea, "visually-hidden");
 
         // Define UI elements for browse and drag&drop
         resumable.assignDrop(droparea);
diff --git a/uploader/templates/phenotypes/add-phenotypes-raw-files.html b/uploader/templates/phenotypes/add-phenotypes-raw-files.html
index 7f8d8b0..8a2e2f7 100644
--- a/uploader/templates/phenotypes/add-phenotypes-raw-files.html
+++ b/uploader/templates/phenotypes/add-phenotypes-raw-files.html
@@ -429,9 +429,9 @@
       });
 
       if(table.find("tbody tr.data-row").length > 0) {
-          add_class(table.find(".data-row-template"), "hidden");
+          add_class(table.find(".data-row-template"), "visually-hidden");
       } else {
-          remove_class(table.find(".data-row-template"), "hidden");
+          remove_class(table.find(".data-row-template"), "visually-hidden");
       }
   };
 
@@ -506,7 +506,7 @@
           var display_element = display_area
               .find(".file-display-template")
               .clone();
-          remove_class(display_element, "hidden");
+          remove_class(display_element, "visually-hidden");
           remove_class(display_element, "file-display-template");
           add_class(display_element, "file-display");
           display_element.find(".filename").text(file.name
@@ -526,7 +526,7 @@
       return () => {/*Has no event!*/
           var progress = (resumable.progress() * 100).toFixed(2);
           var pbar = progress_bar.find(".progress-bar");
-          remove_class(progress_bar, "hidden");
+          remove_class(progress_bar, "visually-hidden");
           pbar.css("width", progress+"%");
           pbar.attr("aria-valuenow", progress);
           pbar.text("Uploading: " + progress + "%");
@@ -536,9 +536,9 @@
   var retryUpload = (retry_button, cancel_button) => {
       retry_button.on("click", (event) => {
           resumable.files.forEach((file) => {file.retry();});
-          add_class(retry_button, "hidden");
-          remove_class(cancel_button, "hidden");
-          add_class(browse_button, "hidden");
+          add_class(retry_button, "visually-hidden");
+          remove_class(cancel_button, "visually-hidden");
+          add_class(browse_button, "visually-hidden");
       });
   };
 
@@ -549,18 +549,18 @@
                   file.abort();
               }
           });
-          add_class(cancel_button, "hidden");
-          remove_class(retry_button, "hidden");
-          remove_class(browse_button, "hidden");
+          add_class(cancel_button, "visually-hidden");
+          remove_class(retry_button, "visually-hidden");
+          remove_class(browse_button, "visually-hidden");
       });
   };
 
 
   var startUpload = (browse_button, retry_button, cancel_button) => {
       return (event) => {
-          remove_class(cancel_button, "hidden");
-          add_class(retry_button, "hidden");
-          add_class(browse_button, "hidden");
+          remove_class(cancel_button, "visually-hidden");
+          add_class(retry_button, "visually-hidden");
+          add_class(browse_button, "visually-hidden");
       };
   };
 
diff --git a/uploader/templates/phenotypes/macro-display-resumable-elements.html b/uploader/templates/phenotypes/macro-display-resumable-elements.html
index b0bf1b5..7cf3a87 100644
--- a/uploader/templates/phenotypes/macro-display-resumable-elements.html
+++ b/uploader/templates/phenotypes/macro-display-resumable-elements.html
@@ -1,6 +1,6 @@
 {%macro display_resumable_elements(id, title, help)%}
 <div id="{{id}}"
-     class="resumable-elements hidden"
+     class="resumable-elements visually-hidden"
      style="background:#D4D4EE;border-radius: 5px;;padding: 1em;border-left: solid #B2B2CC 1px;border-bottom: solid #B2B2CC 2px;margin-top:0.3em;">
   <strong style="line-height: 1.2em;">{{title | title}}</strong>
 
@@ -9,7 +9,7 @@
   <div id="{{id}}-selected-files"
        class="resumable-selected-files"
        style="display:flex;flex-direction:row;flex-wrap: wrap;justify-content:space-around;gap:10px 20px;">
-    <div class="panel panel-info file-display-template hidden">
+    <div class="panel panel-info file-display-template visually-hidden">
       <div class="panel-heading filename">The Filename Goes Here!</div>
       <div class="panel-body">
         <ul>
@@ -36,7 +36,7 @@
      href="#"
      style="margin-left: 80%;">Browse</a>
 
-  <div id="{{id}}-progress-bar" class="progress hidden">
+  <div id="{{id}}-progress-bar" class="progress visually-hidden">
     <div class="progress-bar"
          role="progress-bar"
          aria-valuenow="60"
@@ -49,11 +49,11 @@
 
   <div id="{{id}}-cancel-resume-buttons">
     <a id="{{id}}-resume-button"
-       class="resumable-resume-button btn btn-info hidden"
+       class="resumable-resume-button btn btn-info visually-hidden"
        href="#">resume upload</a>
 
     <a id="{{id}}-cancel-button"
-       class="resumable-cancel-button btn btn-danger hidden"
+       class="resumable-cancel-button btn btn-danger visually-hidden"
        href="#">cancel upload</a>
   </div>
 </div>