From ad5e7aeed8aee002d20d179ecdb579473d353751 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 8 Dec 2025 12:17:16 +0000
Subject: [PATCH] .

---
 .../generic/examcollection_base.html          | 38 ++++-----
 .../generic/examcollection_form.html          | 85 +++++++++++++++++--
 .../partials/user_search_widget_results.html  |  2 +-
 generic/widgets.py                            | 14 ++-
 4 files changed, 110 insertions(+), 29 deletions(-)

diff --git a/generic/templates/generic/examcollection_base.html b/generic/templates/generic/examcollection_base.html
index 83abb4ac..d74bd836 100644
--- a/generic/templates/generic/examcollection_base.html
+++ b/generic/templates/generic/examcollection_base.html
@@ -6,25 +6,25 @@
 {% endblock %}
 
 {% block navigation %}
-<nav class="navbar navbar-expand-lg navbar-dark submenu mb-3">
-        <div class="container-fluid">
-                <a class="navbar-brand" href="{% url 'generic:examcollection_list' %}">Collections</a>
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#examCollectionNavbar" aria-controls="examCollectionNavbar" aria-expanded="false" aria-label="Toggle navigation">
-                        <span class="navbar-toggler-icon"><i class="bi bi-text-indent-right"></i></span>
-                </button>
-                <div class="collapse navbar-collapse" id="examCollectionNavbar">
-                        <ul class="navbar-nav">
-                                {% if request.user.is_authenticated %}
-                                        <li class="nav-item">
-                                                <a class="nav-link" href="{% url 'generic:examcollection_list' %}"><i class="bi bi-collection me-1" aria-hidden="true"></i> View Collections</a>
-                                        </li>
-                                        <li class="nav-item">
-                                                <a class="nav-link" href="{% url 'generic:examcollection_create' %}"><i class="bi bi-plus-square me-1" aria-hidden="true"></i> Create Collection</a>
-                                        </li>
-                                {% endif %}
-                        </ul>
+        <nav class="navbar navbar-expand-lg navbar-dark submenu mb-3">
+                <div class="container-fluid">
+                        <a class="navbar-brand" href="{% url 'generic:examcollection_list' %}">Collections</a>
+                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#examCollectionNavbar" aria-controls="examCollectionNavbar" aria-expanded="false" aria-label="Toggle navigation">
+                                <span class="navbar-toggler-icon"><i class="bi bi-text-indent-right"></i></span>
+                        </button>
+                        <div class="collapse navbar-collapse" id="examCollectionNavbar">
+                                <ul class="navbar-nav">
+                                        {% if request.user.is_authenticated %}
+                                                <li class="nav-item">
+                                                        <a class="nav-link" href="{% url 'generic:examcollection_list' %}"><i class="bi bi-collection me-1" aria-hidden="true"></i> View Collections</a>
+                                                </li>
+                                                <li class="nav-item">
+                                                        <a class="nav-link" href="{% url 'generic:examcollection_create' %}"><i class="bi bi-plus-square me-1" aria-hidden="true"></i> Create Collection</a>
+                                                </li>
+                                        {% endif %}
+                                </ul>
+                        </div>
                 </div>
-        </div>
-</nav>
+        </nav>
 
 {% endblock %}
\ No newline at end of file
diff --git a/generic/templates/generic/examcollection_form.html b/generic/templates/generic/examcollection_form.html
index 0f7f274f..0977d16e 100755
--- a/generic/templates/generic/examcollection_form.html
+++ b/generic/templates/generic/examcollection_form.html
@@ -18,9 +18,84 @@
 
 
 <h2>Edit Exam Collection {{object.name}}</h2>
-<form action="" method="post" enctype="multipart/form-data" id="examcollection-form">
-    {% csrf_token %}
-    {{ form|crispy }}
-    <input type="submit" class="submit-button" value="Submit" name="submit">
-</form>
+<div class="card mb-4">
+    <div class="card-body">
+        <h2 class="card-title">Edit Exam Collection <small class="text-muted">{{ object.name }}</small></h2>
+
+        <form action="" method="post" enctype="multipart/form-data" id="examcollection-form" class="needs-validation" novalidate>
+            {% csrf_token %}
+            {% if form.non_field_errors %}
+                <div class="alert alert-danger">{{ form.non_field_errors }}</div>
+            {% endif %}
+
+            <style>
+                /* Improve visual separation of form sections for this collection form */
+                #examcollection-form .mb-3 {
+                    padding: .75rem 1rem;
+                    margin-bottom: 1rem;
+                    border-radius: .375rem;
+                    background: rgba(255,255,255,0.02);
+                    border-left: 3px solid rgba(255,255,255,0.03);
+                }
+                #examcollection-form .mb-3:nth-child(odd) {
+                    background: rgba(255,255,255,0.015);
+                }
+                #examcollection-form .form-section-divider {
+                    height: 1px;
+                    background: rgba(255,255,255,0.04);
+                    margin: .5rem 0 1rem 0;
+                    border-radius: 2px;
+                }
+                #examcollection-form .form-section-title {
+                    font-size: .95rem;
+                    margin-bottom: .5rem;
+                    font-weight: 600;
+                    color: var(--bs-light);
+                }
+            </style>
+
+            <div class="mb-3">
+                {{ form|crispy }}
+            </div>
+
+            <script>
+                // Insert subtle dividers between logical groups (.mb-3 blocks)
+                (function(){
+                    var form = document.getElementById('examcollection-form');
+                    if (!form) return;
+                    // find direct .mb-3 children inside the form
+                    var groups = Array.from(form.querySelectorAll(':scope > .mb-3'));
+                    if (groups.length <= 1) return;
+                    for (var i = 1; i < groups.length; i++) {
+                        var divider = document.createElement('div');
+                        divider.className = 'form-section-divider';
+                        groups[i].parentNode.insertBefore(divider, groups[i]);
+                    }
+                })();
+            </script>
+
+            <div class="d-flex gap-2">
+                <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1" aria-hidden="true"></i> Save</button>
+                <a href="{% url 'generic:examcollection_list' %}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left me-1" aria-hidden="true"></i> Back to collections</a>
+                <button type="reset" class="btn btn-light">Reset</button>
+            </div>
+        </form>
+    </div>
+</div>
+<script>
+    // Simple client-side bootstrap validation
+    (function () {
+        'use strict'
+        var forms = document.querySelectorAll('.needs-validation')
+        Array.prototype.slice.call(forms).forEach(function (form) {
+            form.addEventListener('submit', function (event) {
+                if (!form.checkValidity()) {
+                    event.preventDefault()
+                    event.stopPropagation()
+                }
+                form.classList.add('was-validated')
+            }, false)
+        })
+    })()
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/generic/templates/generic/partials/user_search_widget_results.html b/generic/templates/generic/partials/user_search_widget_results.html
index e734b723..898cd9f7 100644
--- a/generic/templates/generic/partials/user_search_widget_results.html
+++ b/generic/templates/generic/partials/user_search_widget_results.html
@@ -5,7 +5,7 @@
         <div class="flex-grow-1">
           {{ item.text|escape }}
           {% if item.grade %}
-            <small class="text-muted ms-2">{{ item.grade|escape }}</small>
+            <span class="badge bg-secondary ms-2">{{ item.grade|escape }}</span>
           {% endif %}
         </div>
         <div>
diff --git a/generic/widgets.py b/generic/widgets.py
index cb4015fc..ee2d7eba 100644
--- a/generic/widgets.py
+++ b/generic/widgets.py
@@ -43,13 +43,19 @@ class UserSearchSelectMultipleWidget:
             except Exception:
                 grade_text = ""
 
+            # Build the selected item HTML incrementally to avoid accidental
+            # mixing of boolean values into string concatenation (was causing
+            # a TypeError in some environments).
             selected_html += (
                 f'<li id="selected_user_{self.name}_{u.pk}" class="list-group-item d-flex justify-content-between align-items-center">'
                 f'<span>{u.get_full_name() or u.username} <small class="text-muted">{u.email}</small>'
-                + (f' <small class="text-muted ms-2">{grade_text}</small>' if grade_text else '')
-                + '</span>'
+            )
+            if grade_text:
+                selected_html += f' <span class="badge bg-secondary ms-2">{grade_text}</span>'
+            selected_html += (
+                '</span>'
                 f'<button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="removeUserFromField(\'{self.name}\', {u.pk})">Remove</button>'
-                f'</li>'
+                '</li>'
             )
 
         url = reverse("generic:user_search_widget")
@@ -194,7 +200,7 @@ class UserSearchSelectMultipleWidget:
                         li.className = 'list-group-item d-flex justify-content-between align-items-center';
                         li.id = 'selected_user_' + fieldName + '_' + id;
                         const span = document.createElement('span');
-                        span.innerHTML = text + (grade ? ' <small class="text-muted ms-2">' + grade + '</small>' : '');
+                        span.innerHTML = text + (grade ? ' <span class="badge bg-secondary ms-2">' + grade + '</span>' : '');
                         const btn = document.createElement('button'); btn.type = 'button'; btn.className = 'btn btn-sm btn-outline-danger ms-2'; btn.innerText = 'Remove';
                         btn.addEventListener('click', function() {{ removeUserFromField(fieldName, id); }});
                         li.appendChild(span); li.appendChild(btn);