From 6bc43135b9ea1114eeeea435ec0ac35af0e17760 Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Thu, 30 Oct 2025 21:31:53 +0000
Subject: [PATCH] Refactor question link header for improved layout and button
 styling

---
 .../templates/atlas/question_link_header.html | 61 +++++++++++--------
 1 file changed, 34 insertions(+), 27 deletions(-)

diff --git a/atlas/templates/atlas/question_link_header.html b/atlas/templates/atlas/question_link_header.html
index 32a4b320..246b44c3 100644
--- a/atlas/templates/atlas/question_link_header.html
+++ b/atlas/templates/atlas/question_link_header.html
@@ -1,32 +1,39 @@
-    <div class="floating-header">
-        <a href="{% url 'atlas:case_detail' pk=case.pk %}" title="View the Case">View</a>
-        <a href="{% url 'atlas:case_update' pk=case.pk %}" title="Edit the Case">Edit</a>
-        <a href="{% url 'atlas:case_series_update' pk=case.pk %}" title="Edit the Cases Series">Series</a>
-        <a href="{% url 'atlas:case_displaysets' pk=case.pk %}" title="View and edit case display sets">Display Sets</a>
-        <a href="{% url 'atlas:case_clone' pk=case.pk %}"
-            title="Clone the Case (duplicate everything but the images)">Clone</a>
-        <a href="{% url 'atlas:case_delete' pk=case.pk %}" title="Delete the Case">Delete</a>
-        <a href="#"
-            onclick="return window.create_popup_window('{% url 'feedback_create' question_type='atlas' pk=case.pk %}')"> Add
-            Note</a>
-        <a href="{% url 'atlas:case_authors' case.pk %}" title="Edit Authors">Authors</a>
-        {% if request.user.is_superuser %}
-            <a href="{% url 'admin:atlas_case_change' case.id %}" title="Edit the Case using the admin interface">Admin Edit</a>
-        {% endif %}
+    <div class="d-flex flex-wrap justify-content-between align-items-start mb-3">
+        <div class="btn-toolbar" role="toolbar" aria-label="Case actions">
+            <div class="btn-group me-2 mb-2" role="group" aria-label="Primary actions">
+                <a class="btn btn-sm btn-outline-primary" href="{% url 'atlas:case_detail' pk=case.pk %}" title="View the Case">View</a>
+                <a class="btn btn-sm btn-outline-secondary" href="{% url 'atlas:case_update' pk=case.pk %}" title="Edit the Case">Edit</a>
+                <a class="btn btn-sm btn-outline-secondary" href="{% url 'atlas:case_series_update' pk=case.pk %}" title="Edit the Cases Series">Series</a>
+                <a class="btn btn-sm btn-outline-secondary" href="{% url 'atlas:case_displaysets' pk=case.pk %}" title="View and edit case display sets">Display sets</a>
+            </div>
+
+            <div class="btn-group me-2 mb-2" role="group" aria-label="Secondary actions">
+                <a class="btn btn-sm btn-outline-success" href="{% url 'atlas:case_clone' pk=case.pk %}" title="Clone the Case (duplicate everything but the images)">Clone</a>
+                <a class="btn btn-sm btn-outline-danger" href="{% url 'atlas:case_delete' pk=case.pk %}" title="Delete the Case">Delete</a>
+                <a class="btn btn-sm btn-outline-info" href="#" onclick="return window.create_popup_window('{% url 'feedback_create' question_type='atlas' pk=case.pk %}');">Add Note</a>
+                <a class="btn btn-sm btn-outline-secondary" href="{% url 'atlas:case_authors' case.pk %}" title="Edit Authors">Authors</a>
+                {% if request.user.is_superuser %}
+                    <a class="btn btn-sm btn-outline-dark" href="{% url 'admin:atlas_case_change' case.id %}" title="Edit the Case using the admin interface">Admin</a>
+                {% endif %}
+            </div>
+        </div>
 
         {% if collection %}
-            <div style="float: right;">
-                Collection:Case details
-                        {% include "atlas/collection_detail.html#casedetails-management-links" %}
-            </div>
-            <div>
-                {% if previous %}
-                    <a href="{% url 'atlas:collection_case_view' collection.id case_number|add:-1 %}">Previous question</a>
-                {% endif %}
-                Viewing question as part of collection: <a href="{% url 'atlas:collection_detail' collection.id %}">{{collection.name}}</a> [{{case_number|add:1}}/{{collection_length}}]
-                {% if next %}
-                    <a href="{% url 'atlas:collection_case_view' collection.id case_number|add:1 %}">Next question</a>
-                {% endif %}
+            <div class="text-end mb-2">
+                <div class="small text-muted">Collection</div>
+                <div class="mb-1">
+                    {% include "atlas/collection_detail.html#casedetails-management-links" %}
+                </div>
+                <div class="small">
+                    {% if previous %}
+                        <a class="me-2" href="{% url 'atlas:collection_case_view' collection.id case_number|add:-1 %}">Previous</a>
+                    {% endif %}
+                    Viewing question as part of a collection: <a href="{% url 'atlas:collection_detail' collection.id %}">{{ collection.name }}</a>
+                    [{{ case_number|add:1 }} / {{ collection_length }}]
+                    {% if next %}
+                        <a class="ms-2" href="{% url 'atlas:collection_case_view' collection.id case_number|add:1 %}">Next</a>
+                    {% endif %}
+                </div>
             </div>
         {% endif %}
     </div>