Refactor HTML structure and JavaScript indentation in primary answer templates for improved readability

This commit is contained in:
Ross
2026-02-16 09:47:03 +00:00
parent 17d3b4206a
commit 4cdddcf288
2 changed files with 35 additions and 35 deletions
@@ -13,13 +13,13 @@
<style> <style>
/* Scoped styles for primary answer edit control */ /* Scoped styles for primary answer edit control */
.primary-answer-wrap .edit-primary-btn { .primary-answer-wrap .edit-primary-btn {
opacity: 0.55; opacity: 0.55;
transition: opacity 120ms ease, color 120ms ease; transition: opacity 120ms ease, color 120ms ease;
} }
.primary-answer-wrap:hover .edit-primary-btn { .primary-answer-wrap:hover .edit-primary-btn {
opacity: 1; opacity: 1;
color: inherit; color: inherit;
} }
</style> </style>
</div> </div>
@@ -4,7 +4,7 @@
{% csrf_token %} {% csrf_token %}
<div class="mb-2"> <div class="mb-2">
<label for="id_existing_answer" class="form-label">Select existing answer</label> <label for="id_existing_answer" class="form-label">Select existing answer</label>
<select name="existing_answer" id="id_existing_answer" class="form-select"> <select name="existing_answer" id="id_existing_answer" class="form-select">
{% for val, text in form.existing_answer.field.choices %} {% for val, text in form.existing_answer.field.choices %}
<option value="{{ val }}" {% if val == form.initial.existing_answer %}selected{% endif %}>{{ text }}</option> <option value="{{ val }}" {% if val == form.initial.existing_answer %}selected{% endif %}>{{ text }}</option>
{% endfor %} {% endfor %}
@@ -15,39 +15,39 @@
<label for="id_new_answer" class="form-label">Or add a new primary answer</label> <label for="id_new_answer" class="form-label">Or add a new primary answer</label>
<textarea name="new_answer" id="id_new_answer" class="form-control" rows="3"></textarea> <textarea name="new_answer" id="id_new_answer" class="form-control" rows="3"></textarea>
<script> <script>
(function(){ (function(){
const sel = document.getElementById('id_existing_answer'); const sel = document.getElementById('id_existing_answer');
const ta = document.getElementById('id_new_answer'); const ta = document.getElementById('id_new_answer');
if(!sel || !ta) return; if(!sel || !ta) return;
function update() { function update() {
try { try {
if (ta.value && ta.value.trim().length > 0) { if (ta.value && ta.value.trim().length > 0) {
sel.disabled = true; sel.disabled = true;
} else { } else {
sel.disabled = false; sel.disabled = false;
} }
} catch(e) { } catch(e) {
// ignore // ignore
} }
} }
// initial state // initial state
update(); update();
// listeners // listeners
sel.addEventListener('change', function(){ sel.addEventListener('change', function(){
if(this.value && this.value !== '') { if(this.value && this.value !== '') {
ta.disabled = true; ta.disabled = true;
} else { } else {
ta.disabled = false; ta.disabled = false;
} }
}); });
ta.addEventListener('input', update); ta.addEventListener('input', update);
})(); })();
</script> </script>
</div> </div>
<div class="d-flex gap-2"> <div class="d-flex gap-2">