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>
/* Scoped styles for primary answer edit control */
.primary-answer-wrap .edit-primary-btn {
opacity: 0.55;
transition: opacity 120ms ease, color 120ms ease;
}
.primary-answer-wrap:hover .edit-primary-btn {
opacity: 1;
color: inherit;
}
.primary-answer-wrap .edit-primary-btn {
opacity: 0.55;
transition: opacity 120ms ease, color 120ms ease;
}
.primary-answer-wrap:hover .edit-primary-btn {
opacity: 1;
color: inherit;
}
</style>
</div>
@@ -4,7 +4,7 @@
{% csrf_token %}
<div class="mb-2">
<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 %}
<option value="{{ val }}" {% if val == form.initial.existing_answer %}selected{% endif %}>{{ text }}</option>
{% endfor %}
@@ -15,39 +15,39 @@
<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>
<script>
(function(){
const sel = document.getElementById('id_existing_answer');
const ta = document.getElementById('id_new_answer');
if(!sel || !ta) return;
<script>
(function(){
const sel = document.getElementById('id_existing_answer');
const ta = document.getElementById('id_new_answer');
if(!sel || !ta) return;
function update() {
try {
if (ta.value && ta.value.trim().length > 0) {
sel.disabled = true;
} else {
sel.disabled = false;
}
} catch(e) {
function update() {
try {
if (ta.value && ta.value.trim().length > 0) {
sel.disabled = true;
} else {
sel.disabled = false;
}
} catch(e) {
// ignore
}
}
}
}
// initial state
update();
update();
// listeners
sel.addEventListener('change', function(){
if(this.value && this.value !== '') {
ta.disabled = true;
} else {
ta.disabled = false;
}
});
sel.addEventListener('change', function(){
if(this.value && this.value !== '') {
ta.disabled = true;
} else {
ta.disabled = false;
}
});
ta.addEventListener('input', update);
})();
</script>
ta.addEventListener('input', update);
})();
</script>
</div>
<div class="d-flex gap-2">