Refactor image annotation help section for improved readability and conditional rendering

This commit is contained in:
Ross
2026-02-16 10:35:28 +00:00
parent 647081a7d6
commit 726057b51e
+12 -12
View File
@@ -16,22 +16,22 @@
<div class="small">If important markers or arrows are not burned onto the image, please add annotations using the image annotation tool and click <em>Save Annotations</em>. Please note not all questions required image annotations in which case you can ignore this message.</div>
</div>
{% endif %}
<div class="mt-3 align-items-start">
<div class="col" style="min-width:0;">
<details class="mb-0">
<summary class="small text-muted"><i class="bi bi-info-circle"></i> Image annotation help</summary>
<div class="small text-muted mt-2">Annotate the image using the right mouse button to click and drag an arrow. To remove an arrow drag it out of the image boundaries. Click <strong>Save Annotations</strong> to persist. If required use the middle button to zoom and the left button to pan.</div>
</details>
</div>
<div class="col-auto">
<div class="d-flex gap-2">
{% if can_edit %}
{% if can_edit %}
<div class="mt-3 align-items-start">
<div class="col" style="min-width:0;">
<details class="mb-0">
<summary class="small text-muted"><i class="bi bi-info-circle"></i> Image annotation help</summary>
<div class="small text-muted mt-2">Annotate the image using the right mouse button to click and drag an arrow. To remove an arrow drag it out of the image boundaries. Click <strong>Save Annotations</strong> to persist. If required use the middle button to zoom and the left button to pan.</div>
</details>
</div>
<div class="col-auto">
<div class="d-flex gap-2">
<button id="save-annotations" class="btn btn-sm btn-primary">Save Annotations</button>
<button id="delete-annotations" class="btn btn-sm btn-outline-danger">Delete Annotations</button>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>