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 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> </div>
{% endif %} {% endif %}
<div class="mt-3 align-items-start"> {% if can_edit %}
<div class="col" style="min-width:0;"> <div class="mt-3 align-items-start">
<details class="mb-0"> <div class="col" style="min-width:0;">
<summary class="small text-muted"><i class="bi bi-info-circle"></i> Image annotation help</summary> <details class="mb-0">
<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> <summary class="small text-muted"><i class="bi bi-info-circle"></i> Image annotation help</summary>
</details> <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>
</div> </details>
<div class="col-auto"> </div>
<div class="d-flex gap-2"> <div class="col-auto">
{% if can_edit %} <div class="d-flex gap-2">
<button id="save-annotations" class="btn btn-sm btn-primary">Save Annotations</button> <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> <button id="delete-annotations" class="btn btn-sm btn-outline-danger">Delete Annotations</button>
{% endif %} </div>
</div> </div>
</div> </div>
</div> {% endif %}
</div> </div>
</div> </div>
</div> </div>