Merge branch 'bug_fix/427_unresponsive_form' into 'develop'

Bug fix/427 unresponsive form

Closes FDM/rdm-system/antleaf-projectmanagement#427

See merge request !360

hyrax/app/assets/javascripts/work_show.js

@@ -28,9 +28,9 @@ $(document).on("ready", function () {
       if ($("#overlay").length === 0) {
         // Create overlay element
         $("body").append(`
-                <div id="overlay" class="overlay" style="display: flex;">
-                </div>
-            `);
+          <div id="overlay" class="overlay" style="display: flex;">
+          </div>
+        `);
 
         // Add CSS styles dynamically
         $("<style>")
@@ -38,32 +38,39 @@ $(document).on("ready", function () {
           .html(
             `
             #overlay {
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background-color: rgba(0, 0, 0, 0.1); 
-                justify-content: center;                 
-                align-items: center;
-                z-index: 1000; 
-                display: flex;
-                pointer-events: none;
+              position: fixed;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              background-color: rgba(0, 0, 0, 0.1); 
+              justify-content: center;                 
+              align-items: center;
+              z-index: 1000; 
+              display: flex;
+              pointer-events: auto; /* Allow pointer events on overlay */
+            }
+            body.disable-clicks > *:not(#overlay) {
+              pointer-events: none; /* Disable pointer events on everything except the overlay */
             }
             `
           )
           .appendTo("head");
       }
 
+      // Disable background clicks
+      $("body").addClass("disable-clicks");
+
       // Show the overlay
-      $("#overlay").fadeIn(); // Show the overlay when the button is clicked
+      $("#overlay").fadeIn();
 
-      // Hide the overlay when clicking on it
-      $("#overlay").click(function () {
-        $(this).fadeOut(function () {
-          $(this).remove(); // Remove the overlay from the DOM after fading out
-        });
-      });
+      // Hide the overlay and re-enable clicks when clicking on it
+      // $("#overlay").click(function () {
+      //   $(this).fadeOut(function () {
+      //     $(this).remove(); // Remove the overlay from the DOM after fading out
+      //     $("body").removeClass("disable-clicks"); // Re-enable clicks on background elements
+      //   });
+      // });
     });
   });
 

hyrax/app/assets/stylesheets/rdms.scss

@@ -51,7 +51,7 @@ form .field-wrapper label[required="required"]::after {
     list-style-type: none;
     padding-left: 5px;
     height: 100%;
-    border-right: 1px solid #DDD;
+    border-right: 1px solid #ddd;
 
     .child-item:nth-child(2) {
       margin-left: 20px;
@@ -101,13 +101,13 @@ form .field-wrapper label[required="required"]::after {
       width: fit-content;
       color: #333;
       padding: 5px 10px;
-      background-color: #FFF;
+      background-color: #fff;
       margin-bottom: 2px;
       display: inline-block;
 
       &:hover,
       &.active {
-        background-color: #F5F5F5;
+        background-color: #f5f5f5;
         border-radius: 2px;
         text-decoration: none;
       }
@@ -151,7 +151,7 @@ form .field-wrapper label[required="required"]::after {
     }
   }
 
-  .show-actions{
+  .show-actions {
     display: flex;
 
     .download-all {
@@ -191,16 +191,16 @@ form .field-wrapper label[required="required"]::after {
     &:hover,
     &.active {
       text-decoration: none;
-      background-color: #FFF;
+      background-color: #fff;
       border-radius: 2px;
     }
   }
 }
 .public-colection-sidebar {
   a:hover,
-    a.active {
-      background-color: #F5F5F5;
-    }
+  a.active {
+    background-color: #f5f5f5;
+  }
 }
 
 .sub-collections-wrapper,
@@ -247,7 +247,7 @@ form .field-wrapper label[required="required"]::after {
 
 .per-page-box {
   margin: 23px 10px 0px 0px;
-  #per_page{
+  #per_page {
     height: 30px;
   }
 }
@@ -275,7 +275,7 @@ form .field-wrapper label[required="required"]::after {
 }
 
 .border-dark {
-  border: 1px solid #1E2022;
+  border: 1px solid #1e2022;
   margin: 10px;
   padding: 10px;
 }
@@ -288,9 +288,8 @@ form .field-wrapper label[required="required"]::after {
   margin-bottom: 50px;
 }
 
-
 .rails-default-error-page {
-  color: #2E2F30;
+  color: #2e2f30;
   text-align: center;
   font-family: arial, sans-serif;
   margin: 0;
@@ -299,7 +298,7 @@ form .field-wrapper label[required="required"]::after {
 .dialog-heading .heading-title {
   font-size: 100%;
   font-weight: 600;
-  color: #730E15;
+  color: #730e15;
   line-height: 1.5em;
 }
 
@@ -308,7 +307,8 @@ form .field-wrapper label[required="required"]::after {
   justify-content: space-between;
 }
 
-.download-all, .download-filtered {
+.download-all,
+.download-filtered {
   margin-top: 10px;
 }
 
@@ -323,7 +323,7 @@ form .field-wrapper label[required="required"]::after {
   margin-left: 10px;
 }
 
-.search-download-buttons{
+.search-download-buttons {
   padding-bottom: 10px;
   border-bottom: 1px solid #ddd;
   margin: 0px 0px 10px 0px !important;
@@ -338,7 +338,7 @@ form .field-wrapper label[required="required"]::after {
   margin-bottom: 10px;
 }
 
-#agreementModal{
+#agreementModal {
   .modal-body {
     overflow: auto;
     height: 450px;
@@ -346,18 +346,20 @@ form .field-wrapper label[required="required"]::after {
   }
 }
 
-.subject-parents, .session-parents, .modality-parents {
+.subject-parents,
+.session-parents,
+.modality-parents {
   margin-top: 20px;
 }
 
-#savewidget{
+#savewidget {
   position: sticky;
   z-index: 1000;
   top: 100px;
 }
 
 .progress-bar {
-  width: 100%
+  width: 100%;
 }
 
 .save-warning {
@@ -376,4 +378,4 @@ form .field-wrapper label[required="required"]::after {
     display: flex;
     gap: 10px;
   }
-}
\ No newline at end of file
+}