.
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>
|
<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>
|
<form action="" method="post" enctype="multipart/form-data" id="examcollection-form" class="needs-validation" novalidate>
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
{% if form.non_field_errors %}
|
{% if form.non_field_errors %}
|
||||||
<div class="alert alert-danger">{{ form.non_field_errors }}</div>
|
<div class="alert alert-danger">{{ form.non_field_errors }}</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Improve visual separation of form sections for this collection form */
|
/* Improve visual separation of form sections for this collection form */
|
||||||
#examcollection-form .mb-3 {
|
#examcollection-form .mb-3 {
|
||||||
padding: .75rem 1rem;
|
padding: .75rem 1rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
border-radius: .375rem;
|
border-radius: .375rem;
|
||||||
background: rgba(255,255,255,0.02);
|
background: rgba(255,255,255,0.02);
|
||||||
border-left: 3px solid rgba(255,255,255,0.03);
|
border-left: 3px solid rgba(255,255,255,0.03);
|
||||||
}
|
}
|
||||||
#examcollection-form .mb-3:nth-child(odd) {
|
#examcollection-form .mb-3:nth-child(odd) {
|
||||||
background: rgba(255,255,255,0.015);
|
background: rgba(255,255,255,0.015);
|
||||||
}
|
}
|
||||||
#examcollection-form .form-section-divider {
|
#examcollection-form .form-section-divider {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: rgba(255,255,255,0.04);
|
background: rgba(255,255,255,0.04);
|
||||||
margin: .5rem 0 1rem 0;
|
margin: .5rem 0 1rem 0;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
#examcollection-form .form-section-title {
|
#examcollection-form .form-section-title {
|
||||||
font-size: .95rem;
|
font-size: .95rem;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--bs-light);
|
color: var(--bs-light);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<div class="row gy-3">
|
<div class="row gy-3">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div class="mb-2">
|
<div class="mb-2">
|
||||||
<label for="id_name" class="form-label requiredField">Name <span class="text-danger">*</span></label>
|
<label for="id_name" class="form-label requiredField">Name <span class="text-danger">*</span></label>
|
||||||
{{ form.name }}
|
{{ form.name }}
|
||||||
{% if form.name.errors %}
|
{% if form.name.errors %}
|
||||||
<div class="invalid-feedback d-block">{{ form.name.errors }}</div>
|
<div class="invalid-feedback d-block">{{ form.name.errors }}</div>
|
||||||
{% endif %}
|
{% 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>
|
</div>
|
||||||
</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)
|
// Insert subtle dividers between logical groups (.mb-3 blocks)
|
||||||
(function(){
|
(function(){
|
||||||
var form = document.getElementById('examcollection-form');
|
var form = document.getElementById('examcollection-form');
|
||||||
if (!form) return;
|
if (!form) return;
|
||||||
// find direct .mb-3 children inside the form
|
// find direct .mb-3 children inside the form
|
||||||
var groups = Array.from(form.querySelectorAll(':scope > .mb-3'));
|
var groups = Array.from(form.querySelectorAll(':scope > .mb-3'));
|
||||||
if (groups.length <= 1) return;
|
if (groups.length <= 1) return;
|
||||||
for (var i = 1; i < groups.length; i++) {
|
for (var i = 1; i < groups.length; i++) {
|
||||||
var divider = document.createElement('div');
|
var divider = document.createElement('div');
|
||||||
divider.className = 'form-section-divider';
|
divider.className = 'form-section-divider';
|
||||||
groups[i].parentNode.insertBefore(divider, groups[i]);
|
groups[i].parentNode.insertBefore(divider, groups[i]);
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="d-flex gap-2">
|
<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>
|
<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>
|
<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>
|
<button type="reset" class="btn btn-light">Reset</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<script>
|
<script>
|
||||||
// Simple client-side bootstrap validation
|
// Simple client-side bootstrap validation
|
||||||
(function () {
|
(function () {
|
||||||
|
|||||||
Reference in New Issue
Block a user