From 7258c14008b785a67bc7bb8384b00eb5fe0b7905 Mon Sep 17 00:00:00 2001
From: Kushagra Varade <kushagra@cottagelabs.com>
Date: Fri, 31 Jan 2025 10:11:33 +0100
Subject: [PATCH] Bug fix/427 unresponsive form
---
hyrax/app/assets/javascripts/work_show.js | 49 +++++++++++++----------
hyrax/app/assets/stylesheets/rdms.scss | 42 ++++++++++---------
2 files changed, 50 insertions(+), 41 deletions(-)
diff --git a/hyrax/app/assets/javascripts/work_show.js b/hyrax/app/assets/javascripts/work_show.js
index e69d7b08..a3b78139 100644
--- a/hyrax/app/assets/javascripts/work_show.js
+++ b/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
+ // });
+ // });
});
});
diff --git a/hyrax/app/assets/stylesheets/rdms.scss b/hyrax/app/assets/stylesheets/rdms.scss
index cb871418..8f4814c4 100644
--- a/hyrax/app/assets/stylesheets/rdms.scss
+++ b/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
+}
--
GitLab