ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor templates and views for improved structure and maintainability

Browse Source
This commit is contained in:
Ross
2025-12-08 12:31:58 +00:00
parent ad5e7aeed8
commit d7afab15e1
5 changed files with 242 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
generic/templates/generic/examcollection_form.html
+135 -78
View File
@@ -7,95 +7,152 @@
{% endblock %}
{% block js %}
<!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
{{form.media}}
{{form.media}}
<script type="text/javascript">
</script>
<script type="text/javascript">
</script>
<!-- {{ form.media }} -->
{% endblock %}
{% block content %}
<div class="card mb-4">
<div class="card-body">
<h2 class="card-title">Edit Exam Collection <small class="text-muted">{{ object.name }}</small></h2>
<h2>Edit Exam Collection {{object.name}}</h2>
<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 %}
<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>
<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]);
#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);
}
})();
</script>
#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="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 class="mb-3">
<div class="row gy-3">
<div class="col-md-6">
<div class="mb-2">
<label for="id_name" class="form-label requiredField">Name <span class="text-danger">*</span></label>
{{ form.name }}
{% if form.name.errors %}
<div class="invalid-feedback d-block">{{ form.name.errors }}</div>
{% endif %}
</div>
</div>
<div class="col-md-3">
<div class="mb-2">
<label for="id_date" class="form-label">Date</label>
{{ form.date }}
{% if form.date.errors %}
<div class="invalid-feedback d-block">{{ form.date.errors }}</div>
{% endif %}
</div>
</div>
<div class="col-md-3 d-flex align-items-center">
<div class="form-check mb-2">
{{ form.archive }}
<label for="id_archive" class="form-check-label ms-2">Archive</label>
</div>
</div>
</div>
<hr class="my-3" />
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title mb-2">Authors</h5>
<div>
{{ form.author }}
{% if form.author.errors %}
<div class="invalid-feedback d-block">{{ form.author.errors }}</div>
{% endif %}
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-md-2 g-3">
{% for label, field_name, bound in exam_groups %}
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title small mb-2">{{ label }}</h5>
<div>
{{ bound }}
{% if bound.errors %}
<div class="invalid-feedback d-block">{{ bound.errors }}</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</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>
</div>
<script>
<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>
(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 %}
generic/templates/generic/partials/user_search_widget_results.html
+2 -2
View File
@@ -1,7 +1,7 @@
{% if results %}
<ul class="list-unstyled mb-0" id="user_search_results_list_{{ field }}">
{% for item in results %}
<li class="py-1 d-flex justify-content-between align-items-center" data-user-id="{{ item.id }}" data-user-text="{{ item.text|escapejs }}" data-user-grade="{{ item.grade|default_if_none:''|escapejs }}">
<li class="py-1 d-flex justify-content-between align-items-center" data-user-id="{{ item.id }}" data-user-text="{{ item.text|escape }}" data-user-grade="{{ item.grade|default_if_none:''|escape }}">
<div class="flex-grow-1">
{{ item.text|escape }}
{% if item.grade %}
@@ -9,7 +9,7 @@
{% endif %}
</div>
<div>
<button type="button" class="btn btn-sm btn-primary user-add-btn" data-user-id="{{ item.id }}" data-user-text="{{ item.text|escapejs }}" data-user-grade="{{ item.grade|default_if_none:''|escapejs }}">Add</button>
<button type="button" class="btn btn-sm btn-primary user-add-btn" data-user-id="{{ item.id }}" data-user-text="{{ item.text|escape }}" data-user-grade="{{ item.grade|default_if_none:''|escape }}">Add</button>
</div>
</li>
{% endfor %}