This commit is contained in:
Ross
2025-12-08 12:17:16 +00:00
parent b4cf5b9d70
commit ad5e7aeed8
4 changed files with 110 additions and 29 deletions
@@ -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 %}
@@ -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 %}
@@ -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>
+10 -4
View File
@@ -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);