Refactor HTML structure and JavaScript indentation in primary answer templates for improved readability
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user