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

This commit is contained in:
Ross
2025-10-22 22:05:33 +01:00
parent fa68034f03
commit d19e937bd4
2 changed files with 38 additions and 16 deletions
@@ -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">
{% for radio in form.status %}
<div class="form-check form-check-inline">
{{ radio.tag }}
<label class="form-check-label" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
<div class="row g-2 align-items-start">
<div class="col-auto">
<label class="form-label mb-1">Status</label>
<div>
{% 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 %}
</div>
{% if form.status.errors %}
<div class="invalid-feedback d-block">{{ form.status.errors|join:", " }}</div>
{% endif %}
</div>
<div>
{{ form.comment }}
</div>
<div class="col">
<label for="{{ form.comment.id_for_label }}" class="form-label mb-1">Comment</label>
{{ form.comment }}
{% if form.comment.errors %}
<div class="invalid-feedback d-block">{{ form.comment.errors|join:", " }}</div>
{% endif %}
</div>
<div>
<button class="btn btn-sm btn-primary" type="submit">Save</button>
<div class="col-auto d-flex align-items-end">
<button class="btn btn-primary" type="submit">Save</button>
</div>
</div>
</form>