.
This commit is contained in:
Ross
@@ -18,119 +18,119 @@
|
||||
|
||||
<h2 class="mb-4">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>
|
||||
#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">
|
||||
<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="mb-3">
|
||||
<h5 class="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 class="row row-cols-1 row-cols-md-2 g-3">
|
||||
{% for label, field_name, bound in exam_groups %}
|
||||
<div class="col">
|
||||
<div class="p-3 border rounded h-100">
|
||||
<h6 class="small mb-2 text-muted">{{ label }}</h6>
|
||||
<div>
|
||||
{{ bound }}
|
||||
{% if bound.errors %}
|
||||
<div class="invalid-feedback d-block">{{ bound.errors }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<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>
|
||||
|
||||
<script>
|
||||
<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="mb-3">
|
||||
<h5 class="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 class="row row-cols-1 row-cols-md-2 g-3">
|
||||
{% for label, field_name, bound in exam_groups %}
|
||||
<div class="col">
|
||||
<div class="p-3 border rounded h-100">
|
||||
<h6 class="small mb-2 text-muted">{{ label }}</h6>
|
||||
<div>
|
||||
{{ bound }}
|
||||
{% if bound.errors %}
|
||||
<div class="invalid-feedback d-block">{{ bound.errors }}</div>
|
||||
{% endif %}
|
||||
</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;
|
||||
(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>
|
||||
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 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>
|
||||
<script>
|
||||
// Simple client-side bootstrap validation
|
||||
(function () {
|
||||
|
||||
Reference in New Issue
Block a user