From f37b3312e5e7bac2abab6d96b449912122485531 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 13 May 2024 11:10:25 +0100
Subject: [PATCH] improve exam list view

---
 rad/static/css/anatomy.css |  9 +++++++++
 templates/exam_list.html   | 19 +++++++++++++++----
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/rad/static/css/anatomy.css b/rad/static/css/anatomy.css
index 6da3aad5..ba942955 100644
--- a/rad/static/css/anatomy.css
+++ b/rad/static/css/anatomy.css
@@ -681,6 +681,15 @@ input {
   display: flex;
 }
 
+ul.exam-list {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+
+.flex-col-half {
+  flex: 0.5;
+}
+
 .flex-col {
   flex: 1;
 }
diff --git a/templates/exam_list.html b/templates/exam_list.html
index 71d3a4c0..1ba54648 100644
--- a/templates/exam_list.html
+++ b/templates/exam_list.html
@@ -9,17 +9,18 @@
                 {% if exam.active %}
                     <li class="exam-item">
                         <a href="{% url app_name|add:':exam_overview' pk=exam.pk %}" class="flex-col-2 exam-name">{{exam.name}}</a>
-                        {% if marking %}<a href="{% url app_name|add:':mark_overview' pk=exam.pk %}" class="flex-col">Mark</a>{% endif %}
+                        {% if marking %}<a href="{% url app_name|add:':mark_overview' pk=exam.pk %}" class="flex-col-half">Mark</a>{% endif %}
                         <span class="flex-col">
                             <a href="{% url app_name|add:':exam_cids' exam_id=exam.pk %}">Candidates</a> <span class="candidate-counts">[<span title="Number of active CID users">
                                 {{exam.valid_cid_users.count}}
                             </span> / <span title="Number of active User users">{{exam.valid_user_users.count}}]</span></span>
                         </span>
-                        <a href="{% url app_name|add:':exam_scores_all' pk=exam.pk %}" class="flex-col">Scores</a>
+                        <a href="{% url app_name|add:':exam_scores_all' pk=exam.pk %}" class="flex-col-half">Scores</a>
                         <input type="checkbox" id="active-{{exam.pk}}" class="exam-active-switch" data-posturl="{% url app_name|add:':exam_toggle_active' pk=exam.pk %}" {% if exam.active %}checked{% endif %}>
                         <label for="active-{{exam.pk}}" class="flex-col icon-container active-icon" title="Click to toggle active state">Exam Active</label>
                         <input type="checkbox" id="published-{{exam.pk}}" class="exam-publish-results-switch" data-posturl="{% url app_name|add:':exam_toggle_results_published' pk=exam.pk %}" {% if exam.publish_results %}checked{% endif %}>
                         <label for="published-{{exam.pk}}" class="flex-col icon-container published-icon" title="Click to toggle published state">Results Published</label>
+                        <a href="{% url app_name|add:':exam_update' pk=exam.pk %}" class="flex-col exam-list-edit-button"><i class="bi bi-pencil-square"></i></a>
                         {% if view_all %}
                             <input type="checkbox" id="archived-{{exam.pk}}" class="exam-archived-switch" data-posturl="{% url app_name|add:':exam_toggle_archived' pk=exam.pk %}" {% if exam.archive %}checked{% endif %}>
                             <label for="archived-{{exam.pk}}" class="flex-col icon-archive archived-icon" title="Click to toggle archived state">Archived</label>
@@ -35,7 +36,7 @@
                 {% if not exam.active %}
                     <li class="exam-item">
                         <a href="{% url app_name|add:':exam_overview' pk=exam.pk %}" class="flex-col-2 exam-name">{{exam.name}}</a>
-                        {% if marking %}<a href="{% url app_name|add:':mark_overview' pk=exam.pk %}" class="flex-col">Mark</a>{% endif %}
+                        {% if marking %}<a href="{% url app_name|add:':mark_overview' pk=exam.pk %}" class="flex-col-half">Mark</a>{% endif %}
                         <span class="flex-col">
                             <a href="{% url app_name|add:':exam_cids' exam_id=exam.pk %}">Candidates</a>
                             <span class="candidate-counts">
@@ -46,11 +47,12 @@
                                 </span>
                             </span>
                         </span>
-                        <a href="{% url app_name|add:':exam_scores_all' pk=exam.pk %}" class="flex-col">Scores</a>
+                        <a href="{% url app_name|add:':exam_scores_all' pk=exam.pk %}" class="flex-col-half">Scores</a>
                         <input type="checkbox" id="active-{{exam.pk}}" class="exam-active-switch" data-posturl="{% url app_name|add:':exam_toggle_active' pk=exam.pk %}" {% if exam.active %}checked{% endif %}>
                         <label for="active-{{exam.pk}}" class="flex-col icon-container active-icon" title="Click to toggle active state">Exam Active</label>
                         <input type="checkbox" id="{{exam.pk}}-pub" class="exam-publish-results-switch" data-posturl="{% url app_name|add:':exam_toggle_results_published' pk=exam.pk %}" {% if exam.publish_results %}checked{% endif %}>
                         <label for="{{exam.pk}}-pub" class="flex-col icon-container published-icon">Results Published</label>
+                        <a href="{% url app_name|add:':exam_update' pk=exam.pk %}" class="flex-col exam-list-edit-button"><i class="bi bi-pencil-square"></i></a>
                         {% if view_all %}
                             <input type="checkbox" id="archived-{{exam.pk}}" class="exam-archived-switch" data-posturl="{% url app_name|add:':exam_toggle_archived' pk=exam.pk %}" {% if exam.archive %}checked{% endif %}>
                             <label for="archived-{{exam.pk}}" class="flex-col icon-archive archived-icon" title="Click to toggle archived state">Archived</label>
@@ -124,6 +126,15 @@
             border: 1px dashed gray;
             margin: -1px;
         }
+        .exam-list-edit-button {
+            color: darkgray!important;
+            cursor: pointer;
+            opacity: 20%;
+            padding-inline-start: 10px;
+        }
+        .exam-list-edit-button:hover {
+            opacity: 100%;
+        }
     </style>
 
 {% endblock %}