From ac6a8193a34bb682e03545a231c375ce1d66da1c Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Tue, 11 Nov 2025 12:02:22 +0000
Subject: [PATCH] Refactor answer list item actions to use right-floating icons
 for improved accessibility and user interaction; streamline code for marked
 and unmarked answers.

---
 anatomy/templates/anatomy/mark2.html          |  5 ++
 .../partials/mark2_marked_list_fragment.html  | 51 +++++++------------
 .../mark2_unmarked_list_fragment.html         | 34 +++++--------
 3 files changed, 37 insertions(+), 53 deletions(-)

diff --git a/anatomy/templates/anatomy/mark2.html b/anatomy/templates/anatomy/mark2.html
index 6de0d9c1..d342838f 100644
--- a/anatomy/templates/anatomy/mark2.html
+++ b/anatomy/templates/anatomy/mark2.html
@@ -109,6 +109,11 @@
     .key .key-item.correct { border-left: 8px solid #2a9d3f; }
     .key .key-item.half-correct { border-left: 8px solid #ffb020; }
     .key .key-item.incorrect { border-left: 8px solid #d3413a; }
+    /* Right-floating action icons for answer external links */
+    .answer-actions { min-width: 6rem; }
+    .answer-actions .action-icon { margin-left: 0.5rem; color: #6c757d; text-decoration: none; border: none; background: none; }
+    .answer-actions .action-icon:hover { color: #000; text-decoration: none; }
+    .answer-actions .copy-to-clipboard { cursor: pointer; }
   </style>
 {% endblock %}
 
diff --git a/anatomy/templates/anatomy/partials/mark2_marked_list_fragment.html b/anatomy/templates/anatomy/partials/mark2_marked_list_fragment.html
index aedaa27b..97ed6b9d 100644
--- a/anatomy/templates/anatomy/partials/mark2_marked_list_fragment.html
+++ b/anatomy/templates/anatomy/partials/mark2_marked_list_fragment.html
@@ -1,52 +1,37 @@
 {% comment %}Renders only the list items for already-marked answers (used as a partial){% endcomment %}
 {% for answer in correct_answers %}
   {% with answer_url=answer|urlencode:'' %}
-    <li class="list-group-item d-flex align-items-start">
-      <div class="me-2">
-        <div class="btn-group dropstart">
-          <button class="btn btn-sm btn-link p-0 popover-button" data-bs-toggle="dropdown" aria-expanded="false">+</button>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="https://www.google.com/search?q={{ answer_url }}" target="_blank">Google answer</a></li>
-            <li><button class="dropdown-item copy-to-clipboard" data-text="{{ answer|escapejs }}">Copy to clipboard</button></li>
-            <li><a class="dropdown-item" href="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}" target="_blank">view answers</a></li>
-          </ul>
-        </div>
+    <li class="list-group-item d-flex align-items-center justify-content-between">
+      <pre class="mb-0 me-3 flex-grow-1"><span class="answer correct" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}">{{ answer }}</span></pre>
+      <div class="answer-actions text-end">
+        <a class="action-icon" href="https://www.google.com/search?q={{ answer_url }}" target="_blank" title="Search Google">🔍</a>
+        <button type="button" class="action-icon btn btn-link p-0 copy-to-clipboard" data-text="{{ answer|escapejs }}" title="Copy to clipboard">📋</button>
+        <a class="action-icon" href="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}" target="_blank" title="View answers">🔗</a>
       </div>
-    <pre class="mb-0"><span class="answer correct" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}">{{ answer }}</span></pre>
     </li>
   {% endwith %}
 {% endfor %}
 {% for answer in half_mark_answers %}
   {% with answer_url=answer|urlencode:'' %}
-    <li class="list-group-item d-flex align-items-start">
-      <div class="me-2">
-        <div class="btn-group dropstart">
-          <button class="btn btn-sm btn-link p-0 popover-button" data-bs-toggle="dropdown" aria-expanded="false">+</button>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="https://www.google.com/search?q={{ answer_url }}" target="_blank">Google answer</a></li>
-            <li><button class="dropdown-item copy-to-clipboard" data-text="{{ answer|escapejs }}">Copy to clipboard</button></li>
-            <li><a class="dropdown-item" href="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}" target="_blank">view answers</a></li>
-          </ul>
-        </div>
+    <li class="list-group-item d-flex align-items-center justify-content-between">
+      <pre class="mb-0 me-3 flex-grow-1"><span class="answer half-correct" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}">{{ answer }}</span></pre>
+      <div class="answer-actions text-end">
+        <a class="action-icon" href="https://www.google.com/search?q={{ answer_url }}" target="_blank" title="Search Google">🔍</a>
+        <button type="button" class="action-icon btn btn-link p-0 copy-to-clipboard" data-text="{{ answer|escapejs }}" title="Copy to clipboard">📋</button>
+        <a class="action-icon" href="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}" target="_blank" title="View answers">🔗</a>
       </div>
-    <pre class="mb-0"><span class="answer half-correct" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}">{{ answer }}</span></pre>
     </li>
   {% endwith %}
 {% endfor %}
 {% for answer in incorrect_answers %}
   {% with answer_url=answer|urlencode:'' %}
-    <li class="list-group-item d-flex align-items-start">
-      <div class="me-2">
-        <div class="btn-group dropstart">
-          <button class="btn btn-sm btn-link p-0 popover-button" data-bs-toggle="dropdown" aria-expanded="false">+</button>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="https://www.google.com/search?q={{ answer_url }}" target="_blank">Google answer</a></li>
-            <li><button class="dropdown-item copy-to-clipboard" data-text="{{ answer|escapejs }}">Copy to clipboard</button></li>
-            <li><a class="dropdown-item" href="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}" target="_blank">view answers</a></li>
-          </ul>
-        </div>
+    <li class="list-group-item d-flex align-items-center justify-content-between">
+      <pre class="mb-0 me-3 flex-grow-1"><span class="answer incorrect" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}">{{ answer }}</span></pre>
+      <div class="answer-actions text-end">
+        <a class="action-icon" href="https://www.google.com/search?q={{ answer_url }}" target="_blank" title="Search Google">🔍</a>
+        <button type="button" class="action-icon btn btn-link p-0 copy-to-clipboard" data-text="{{ answer|escapejs }}" title="Copy to clipboard">📋</button>
+        <a class="action-icon" href="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}" target="_blank" title="View answers">🔗</a>
       </div>
-    <pre class="mb-0"><span class="answer incorrect" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}">{{ answer }}</span></pre>
     </li>
   {% endwith %}
 {% endfor %}
diff --git a/anatomy/templates/anatomy/partials/mark2_unmarked_list_fragment.html b/anatomy/templates/anatomy/partials/mark2_unmarked_list_fragment.html
index 9285dd20..79b79da4 100644
--- a/anatomy/templates/anatomy/partials/mark2_unmarked_list_fragment.html
+++ b/anatomy/templates/anatomy/partials/mark2_unmarked_list_fragment.html
@@ -2,32 +2,26 @@
 {% for answer in user_answers %}
   {% with answer_url=answer|urlencode:'' %}
     {% if answer in answer_suggest_incorrect %}
-      <li class="list-group-item d-flex align-items-start">
-        <div class="me-2">
-          <div class="btn-group dropstart">
-            <button class="btn btn-sm btn-link p-0 popover-button" data-bs-toggle="dropdown" aria-expanded="false">+</button>
-            <ul class="dropdown-menu">
-              <li><a class="dropdown-item" href="https://www.google.com/search?q={{ answer_url }}" target="_blank">Google answer</a></li>
-              <li><button class="dropdown-item copy-to-clipboard" data-text="{{ answer|escapejs }}">Copy to clipboard</button></li>
-              <li><a class="dropdown-item" href="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}" target="_blank">view answers</a></li>
-            </ul>
+      <li class="list-group-item d-flex flex-column">
+        <div class="d-flex align-items-center justify-content-between">
+          <pre class="mb-0 me-3 flex-grow-1"><span class="answer incorrect suggest" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}">{{ answer }}</span></pre>
+          <div class="answer-actions text-end">
+            <a class="action-icon" href="https://www.google.com/search?q={{ answer_url }}" target="_blank" title="Search Google">🔍</a>
+            <button type="button" class="action-icon btn btn-link p-0 copy-to-clipboard" data-text="{{ answer|escapejs }}" title="Copy to clipboard">📋</button>
+            <a class="action-icon" href="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}" target="_blank" title="View answers">🔗</a>
           </div>
         </div>
-      <pre class="mb-0"><span class="answer incorrect suggest" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}">{{ answer }}</span></pre>
       </li>
     {% else %}
-      <li class="list-group-item d-flex align-items-start">
-        <div class="me-2">
-          <div class="btn-group dropstart">
-            <button class="btn btn-sm btn-link p-0 popover-button" data-bs-toggle="dropdown" aria-expanded="false">+</button>
-            <ul class="dropdown-menu">
-              <li><a class="dropdown-item" href="https://www.google.com/search?q={{ answer_url }}" target="_blank">Google answer</a></li>
-              <li><button class="dropdown-item copy-to-clipboard" data-text="{{ answer|escapejs }}">Copy to clipboard</button></li>
-              <li><a class="dropdown-item" href="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}" target="_blank">view answers</a></li>
-            </ul>
+      <li class="list-group-item d-flex flex-column">
+        <div class="d-flex align-items-center justify-content-between">
+          <pre class="mb-0 me-3 flex-grow-1"><span class="answer not-marked" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}">{{ answer }}</span></pre>
+          <div class="answer-actions text-end">
+            <a class="action-icon" href="https://www.google.com/search?q={{ answer_url }}" target="_blank" title="Search Google">🔍</a>
+            <button type="button" class="action-icon btn btn-link p-0 copy-to-clipboard" data-text="{{ answer|escapejs }}" title="Copy to clipboard">📋</button>
+            <a class="action-icon" href="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}" target="_blank" title="View answers">🔗</a>
           </div>
         </div>
-      <pre class="mb-0"><span class="answer not-marked" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer_url %}">{{ answer }}</span></pre>
       </li>
     {% endif %}
   {% endwith %}