From a9fd110fb87e38849e2b179301d49dbbc8822e78 Mon Sep 17 00:00:00 2001
From: acholyn <a.ho-lyn@ucl.ac.uk>
Date: Mon, 6 Jan 2025 10:46:48 +0000
Subject: [PATCH] small loader qol on bib refresh + tweaking bib column span

---
 .../research/citingauthor_detail.html         | 21 +++++++++++++++++--
 .../partials/bibliography_list_item.html      |  3 +--
 .../citing_author_bibliography_list.html      |  1 +
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/rard/templates/research/citingauthor_detail.html b/src/rard/templates/research/citingauthor_detail.html
index f78a25fa9..1d886e2b1 100644
--- a/src/rard/templates/research/citingauthor_detail.html
+++ b/src/rard/templates/research/citingauthor_detail.html
@@ -138,16 +138,33 @@ <h5>{% trans 'Linked Material' %}</h5>
             <div>
                 <h5>{% trans 'Bibliography' %}</h5>
             </div>
+            <div class="loader-wrapper">
+            <div class="loader" id="loader"></div>
+        </div>
             <div class="d-flex flex-column">
                 {% if perms.research.change_citingauthor and has_object_lock %}
-                 <button type="button" class='btn text-primary text-right d-block' hx-get="{% url "citingauthor:refresh_bibliography" pk=citingauthor.pk %}" hx-trigger="click">{% trans 'Refresh bibliography from mentions' %}</button>
+                 <button type="button" id="bib-refresh" class='btn text-primary text-right d-block' hx-get="{% url "citingauthor:refresh_bibliography" pk=citingauthor.pk %}" hx-trigger="click">{% trans 'Refresh bibliography from mentions' %}</button>
 
                 {% endif %}
             </div>
         </div>
+
         {% include 'research/partials/citing_author_bibliography_list.html' with bibliography_items=object.bibliography_items %}
     </section>
 
     {% endwith %}
-
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        const refreshBtn = document.getElementById("bib-refresh");
+        refreshBtn.addEventListener("click", function() {
+            const loader = document.querySelector('.loader-wrapper > .loader');
+            if (loader) {
+                loader.style.visibility = 'visible';
+                setTimeout(function() {
+                    loader.style.visibility = 'hidden';
+                }, 2000);
+            }
+        });
+    });
+</script>
 {% endblock %}
diff --git a/src/rard/templates/research/partials/bibliography_list_item.html b/src/rard/templates/research/partials/bibliography_list_item.html
index 91d66618d..810419338 100644
--- a/src/rard/templates/research/partials/bibliography_list_item.html
+++ b/src/rard/templates/research/partials/bibliography_list_item.html
@@ -9,8 +9,7 @@
 
             <div class="col-sm-3"><a href='{% url "bibliography:detail" item.pk %}'>{{ item.authors }}</a></div>
             <div class="col-sm-2">{% if item.year %}{{ item.year }}{% endif %}</div>
-            <div class="col-sm-4"><a href='{% url "bibliography:detail" item.pk %}'>{{ item.title|safe }}</a></div>
-
+            <div class="col-sm-6"><a href='{% url "bibliography:detail" item.pk %}'>{{ item.title|safe }}</a></div>
 
     </div>
 </div>
diff --git a/src/rard/templates/research/partials/citing_author_bibliography_list.html b/src/rard/templates/research/partials/citing_author_bibliography_list.html
index bb35537c4..e4526a8db 100644
--- a/src/rard/templates/research/partials/citing_author_bibliography_list.html
+++ b/src/rard/templates/research/partials/citing_author_bibliography_list.html
@@ -3,6 +3,7 @@
 hx-get="{% url 'citingauthor:bibliography' pk=citingauthor.pk %}"
 hx-swap="outerHTML">
 
+
 {% for item in bibliography_items.all %}
 
 {% include 'research/partials/bibliography_list_item.html' with can_edit=perms.research.change_citingauthor has_object_lock=has_object_lock %}