Enhance QuestionReviewForm layout with Bootstrap styling for status buttons and improve comment field presentation

generic/forms.py

@@ -31,7 +31,7 @@ from generic.models import (
 )
 
 from django.contrib.admin.widgets import FilteredSelectMultiple
-from django.forms.widgets import RadioSelect, TextInput, Textarea
+from django.forms.widgets import RadioSelect, Textarea
 
 from rapids.models import Rapid
 from anatomy.models import AnatomyQuestion
@@ -840,8 +840,9 @@ class QuestionReviewForm(ModelForm):
         model = QuestionReview
         fields = ["status", "comment"]
         widgets = {
-                "status": RadioSelect(attrs={"class": "form-check-input"}),
+                # Use Bootstrap "btn-check" inputs so we can style labels as button toggles
-                "comment": TextInput(attrs={"class": "form-control form-control-sm", "placeholder": "Comment (optional)"}),
+                "status": RadioSelect(attrs={"class": "btn-check", "autocomplete": "off"}),
+                "comment": Textarea(attrs={"class": "form-control form-control-sm", "placeholder": "Comment (optional)", "rows": 2}),
             }
 
     def __init__(self, *args, **kwargs):

generic/templates/generic/partials/question_review_form.html

@@ -2,23 +2,44 @@
       hx-post="{% url app_name|add:':question_set_review' question.pk %}?edit=1"
       hx-target="#question-review-block"
       hx-swap="innerHTML"
-      class="d-flex gap-2 align-items-start">
+      class="w-100">
     {% csrf_token %}
 
-    <div class="d-flex gap-2 align-items-center">
+    <div class="row g-2 align-items-start">
-        {% for radio in form.status %}
+        <div class="col-auto">
-            <div class="form-check form-check-inline">
+            <label class="form-label mb-1">Status</label>
-                {{ radio.tag }}
+            <div>
-                <label class="form-check-label" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
+                {% for radio in form.status %}
+                    {% comment %} Render colored button for each choice by checking value {% endcomment %}
+                    {{ radio.tag }}
+                    {% if radio.choice_value == 'AC' %}
+                        <label class="btn btn-outline-success me-1 mb-1" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
+                    {% elif radio.choice_value == 'OD' %}
+                        <label class="btn btn-outline-secondary me-1 mb-1" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
+                    {% elif radio.choice_value == 'ER' %}
+                        <label class="btn btn-outline-warning me-1 mb-1" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
+                    {% elif radio.choice_value == 'RJ' %}
+                        <label class="btn btn-outline-danger me-1 mb-1" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
+                    {% else %}
+                        <label class="btn btn-outline-primary me-1 mb-1" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
+                    {% endif %}
+                {% endfor %}
             </div>
-        {% endfor %}
+            {% if form.status.errors %}
-    </div>
+                <div class="invalid-feedback d-block">{{ form.status.errors|join:", " }}</div>
+            {% endif %}
+        </div>
 
-    <div>
+        <div class="col">
-    {{ form.comment }}
+            <label for="{{ form.comment.id_for_label }}" class="form-label mb-1">Comment</label>
-    </div>
+            {{ form.comment }}
+            {% if form.comment.errors %}
+                <div class="invalid-feedback d-block">{{ form.comment.errors|join:", " }}</div>
+            {% endif %}
+        </div>
 
-    <div>
+        <div class="col-auto d-flex align-items-end">
-        <button class="btn btn-sm btn-primary" type="submit">Save</button>
+            <button class="btn btn-primary" type="submit">Save</button>
+        </div>
     </div>
 </form>