From c3a70b079dd153df1d1248b6e9d68bf5297c6fcb Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Sun, 4 Jan 2026 12:40:56 +0000
Subject: [PATCH] Refactor HTML structure for user marking templates to improve
 readability and maintainability

---
 .../partials/user_marking_exam_list.html      |  28 ++---
 templates/index.html                          |   2 +-
 templates/rad/user_marking.html               | 100 +++++++++---------
 3 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/templates/generic/partials/user_marking_exam_list.html b/templates/generic/partials/user_marking_exam_list.html
index c8c7329f..5465eca8 100644
--- a/templates/generic/partials/user_marking_exam_list.html
+++ b/templates/generic/partials/user_marking_exam_list.html
@@ -3,20 +3,20 @@
     <ul class="list-group">
       {% for item in exams_data %}
         {% with exam=item.exam %}
-        <li class="list-group-item d-flex justify-content-between align-items-center">
-          <div>
-            <a href="{{ exam.get_absolute_url }}" class="fw-semibold">{{ exam.name }}</a>
-            <div class="small text-muted">Authors: {% for a in exam.author.all %}{{ a.get_full_name|default:a.username }}{% if not forloop.last %}, {% endif %}{% endfor %}</div>
-          </div>
-          <div class="text-end">
-            <div class="small text-muted">Markers: {{ exam.markers.all.count }}</div>
-            {% if item.has_unmarked %}
-              <span class="badge bg-danger mt-1">Needs marking ({{ item.unmarked_count }})</span>
-            {% else %}
-              <span class="badge bg-secondary mt-1">No unmarked</span>
-            {% endif %}
-          </div>
-        </li>
+          <li class="list-group-item d-flex justify-content-between align-items-center">
+            <div>
+              <a href="{{ exam.get_absolute_url }}" class="fw-semibold">{{ exam.name }}</a>
+              <div class="small text-muted">Authors: {% for a in exam.author.all %}{{ a.get_full_name|default:a.username }}{% if not forloop.last %}, {% endif %}{% endfor %}</div>
+            </div>
+            <div class="text-end">
+              <div class="small text-muted">Markers: {{ exam.markers.all.count }}</div>
+              {% if item.has_unmarked %}
+                <span class="badge bg-danger mt-1">Needs marking ({{ item.unmarked_count }})</span>
+              {% else %}
+                <span class="badge bg-secondary mt-1">No unmarked</span>
+              {% endif %}
+            </div>
+          </li>
         {% endwith %}
       {% endfor %}
     </ul>
diff --git a/templates/index.html b/templates/index.html
index 8f6eba28..c8032bed 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -91,7 +91,7 @@
                     <div class="card mb-3">
                         <div class="card-body">
                             <h6 class="card-title">Quick links</h6>
-                                <ul class="list-unstyled mb-0">
+                            <ul class="list-unstyled mb-0">
                                 <li><a href="http://www.penracourses.org.uk/rts" class="link-primary">RTS platform</a></li>
                                 {% if request.user.is_authenticated %}
                                     <li><a href="{% url 'user_marking' %}" class="link-primary">Marking overview</a></li>
diff --git a/templates/rad/user_marking.html b/templates/rad/user_marking.html
index 82875cd7..9c4bee43 100644
--- a/templates/rad/user_marking.html
+++ b/templates/rad/user_marking.html
@@ -1,65 +1,65 @@
 {% extends "base.html" %}
 {% block content %}
-<h1 class="mb-4">Marking: Exams you can mark</h1>
+  <h1 class="mb-4">Marking: Exams you can mark</h1>
 
-<style>
-  .htmx-indicator { display: none; }
-  .htmx-request .htmx-indicator { display: inline-block; }
-</style>
+  <style>
+    .htmx-indicator { display: none; }
+    .htmx-request .htmx-indicator { display: inline-block; }
+  </style>
 
-<div class="row">
-  <div class="col-12">
-    <p class="text-muted">Click an exam type to load exams — each section loads independently.</p>
+  <div class="row">
+    <div class="col-12">
+      <p class="text-muted">Click an exam type to load exams — each section loads independently.</p>
+    </div>
   </div>
-</div>
 
-<div class="row g-4">
-  {% for app in apps %}
-    <div class="col-md-6">
-      <div class="card">
-        <div class="card-body d-flex align-items-center justify-content-between">
-          <h5 class="card-title mb-0">{{ app|capfirst }}</h5>
-          <div>
-            <button class="btn btn-sm btn-primary" hx-get="{% url 'user_marking_partial' app %}" hx-target="#marking-{{ app }}" hx-swap="innerHTML" hx-indicator="#indicator-{{ app }}">Load / Refresh</button>
-            <div id="indicator-{{ app }}" class="htmx-indicator ms-2 spinner-border spinner-border-sm text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
+  <div class="row g-4">
+    {% for app in apps %}
+      <div class="col-md-6">
+        <div class="card">
+          <div class="card-body d-flex align-items-center justify-content-between">
+            <h5 class="card-title mb-0">{{ app|capfirst }}</h5>
+            <div>
+              <button class="btn btn-sm btn-primary" hx-get="{% url 'user_marking_partial' app %}" hx-target="#marking-{{ app }}" hx-swap="innerHTML" hx-indicator="#indicator-{{ app }}">Load / Refresh</button>
+              <div id="indicator-{{ app }}" class="htmx-indicator ms-2 spinner-border spinner-border-sm text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
+            </div>
+          </div>
+          <div id="marking-{{ app }}" class="card-body border-top">
+            <div class="text-muted small">No data loaded — click the button to load.</div>
           </div>
         </div>
-        <div id="marking-{{ app }}" class="card-body border-top">
-          <div class="text-muted small">No data loaded — click the button to load.</div>
-        </div>
       </div>
-    </div>
-  {% endfor %}
-</div>
+    {% endfor %}
+  </div>
 
-<script>
+  <script>
   // Show/hide indicators referenced by triggering element's hx-indicator attribute
-  document.body.addEventListener('htmx:beforeRequest', function(evt){
-    try{
-      var elt = evt.detail.elt || evt.target;
-      var sel = elt && elt.getAttribute && elt.getAttribute('hx-indicator');
-      if(sel){
-        var indicator = document.querySelector(sel);
-        if(indicator) indicator.classList.add('visible');
-      }
-    }catch(e){console.warn(e)}
-  });
+    document.body.addEventListener('htmx:beforeRequest', function(evt){
+      try{
+        var elt = evt.detail.elt || evt.target;
+        var sel = elt && elt.getAttribute && elt.getAttribute('hx-indicator');
+        if(sel){
+          var indicator = document.querySelector(sel);
+          if(indicator) indicator.classList.add('visible');
+        }
+      }catch(e){console.warn(e)}
+    });
 
-  document.body.addEventListener('htmx:afterRequest', function(evt){
-    try{
-      var elt = evt.detail.elt || evt.target;
-      var sel = elt && elt.getAttribute && elt.getAttribute('hx-indicator');
-      if(sel){
-        var indicator = document.querySelector(sel);
-        if(indicator) indicator.classList.remove('visible');
-      }
-    }catch(e){console.warn(e)}
-  });
-</script>
+    document.body.addEventListener('htmx:afterRequest', function(evt){
+      try{
+        var elt = evt.detail.elt || evt.target;
+        var sel = elt && elt.getAttribute && elt.getAttribute('hx-indicator');
+        if(sel){
+          var indicator = document.querySelector(sel);
+          if(indicator) indicator.classList.remove('visible');
+        }
+      }catch(e){console.warn(e)}
+    });
+  </script>
 
-<style>
-  .htmx-indicator { display: none; }
-  .htmx-indicator.visible { display: inline-block !important; }
-</style>
+  <style>
+    .htmx-indicator { display: none; }
+    .htmx-indicator.visible { display: inline-block !important; }
+  </style>
 
 {% endblock %}