Kiosk improve highlighting in reservations questions (#260)

* Improved required question star contrast. * Improved required question highlighting. Fixes #256 * Moving invalid form input style to new `dynamic_form` class. * Fixing required question line height. * Port required form improvements to admin preview. * Update NEMO/static/admin/dynamic_form_preview/dynamic_form_preview.css --------- Co-authored-by: Mathieu Rampant <[email protected]>
usnistgov · Nov 20, 2024 · 2481232 · 2481232
1 parent 527dea9
commit 2481232
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/NEMO/static/admin/dynamic_form_preview/dynamic_form_preview.css b/NEMO/static/admin/dynamic_form_preview/dynamic_form_preview.css
@@ -184,6 +184,27 @@ div.dynamic_form_preview:empty
 .dynamic_form_preview input:invalid, .dynamic_form_preview select:invalid, .dynamic_form_preview textarea:invalid
 {
     border-color: #dc3545!important;
+    border-width: 2px!important;
+    background: #ffebeb!important;
+}
+
+.dynamic_form_preview input:invalid::placeholder
+{
+    color: #505050!important;
+}
+
+.dynamic_form_preview button
+{
+    border-image-width: 1;
+    border-width: 1px;
+}
+
+.required-question-star
+{
+    color:red;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: .75;
 }
 
 .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9

diff --git a/NEMO/static/nemo.css b/NEMO/static/nemo.css
@@ -1045,10 +1045,24 @@ li.area-tree-node a, li.area-tree-node a:hover, li.area-tree-node a:focus
 }
 
 /* Invalid input for post usage/reservation questions and additional event parameters */
-#tool_control input:invalid, #tool_control select:invalid, #tool_control textarea:invalid,
-#additional_event_parameters input:invalid, #additional_event_parameters select:invalid, #additional_event_parameters textarea:invalid
+.dynamic_form input:invalid
 {
 	border-color: #dc3545!important;
+	border-width: 2px;
+	background: #ffebeb;
+}
+
+.dynamic_form input:invalid::placeholder
+{
+    color: #505050  ;
+}
+
+.required-question-star
+{
+    color:red;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: .75;
 }
 
 /* Make form-control look like plain text */

diff --git a/NEMO/widgets/dynamic_form.py b/NEMO/widgets/dynamic_form.py
@@ -31,7 +31,7 @@
 class PostUsageQuestion:
     question_type = "Question"
 
-    required_span = '<span style="color:red">*</span>'
+    required_span = '<span class="required-question-star">*</span>'
 
     def __init__(self, properties: Dict, index: int = None, initial_data=None):
         self.properties = properties
@@ -613,7 +613,7 @@ def render(self, group_question_url: str, group_item_id: int, virtual_inputs: bo
         result = ""
         if self.questions:
             result += "<script>if (!$) { $ = django.jQuery; }</script>"
-        result += render_grid_questions(self.questions, group_question_url, group_item_id, virtual_inputs)
+        result += f'<div class="dynamic_form">{render_grid_questions(self.questions, group_question_url, group_item_id, virtual_inputs)}</div>'
         return mark_safe(result)
 
     def validate(self, group_question_url: str, group_item_id: int):