doorcontrol: Improve responsiveness of form controls and table in reports
This commit is contained in:
parent
e03b9e3c70
commit
017aea4b3e
@ -2,7 +2,7 @@
|
||||
|
||||
{% block title %}{{ selected_report }} | Door Controls | CMS{% endblock %}
|
||||
{% block content %}
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<div class="vstack align-items-center">
|
||||
<ul class="nav nav-tabs">
|
||||
{% for report_name, report_url in report_types %}
|
||||
<li class="nav-item">
|
||||
@ -11,52 +11,66 @@
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<form method="get" class="form-floating m-2 d-flex align-items-center">
|
||||
<div class="form-floating mx-2">
|
||||
<input type="date"
|
||||
class="form-control"
|
||||
id="startDate"
|
||||
name="timestamp__gte"
|
||||
value="{{ timestamp__gte|date:'Y-m-d' }}">
|
||||
<label for="startDate">Start Date</label>
|
||||
<form method="get" class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col gy-1">
|
||||
<div class="form-floating">
|
||||
<input type="date"
|
||||
class="form-control"
|
||||
id="startDate"
|
||||
name="timestamp__gte"
|
||||
value="{{ timestamp__gte|date:'Y-m-d' }}">
|
||||
<label for="startDate">Start Date</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col gy-1">
|
||||
<div class="form-floating">
|
||||
<input type="date"
|
||||
class="form-control"
|
||||
id="endDate"
|
||||
name="timestamp__lte"
|
||||
value="{{ timestamp__lte|date:'Y-m-d' }}">
|
||||
<label for="endDate">End Date</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md gy-1">
|
||||
<div class="form-floating">
|
||||
<input type="number"
|
||||
class="form-control"
|
||||
id="itemsPerPage"
|
||||
name="items_per_page"
|
||||
value="{{ items_per_page }}"
|
||||
min="10"
|
||||
max="200"
|
||||
step="10"
|
||||
required>
|
||||
<label for="itemsPerPage">Items Per Page</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-auto gy-1">
|
||||
<button type="submit" class="btn btn-primary w-100">Submit</button>
|
||||
</div>
|
||||
<div class="col-6 col-md-auto gy-1">
|
||||
<a href="?" class="btn btn-warning w-100">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mx-2">
|
||||
<input type="date"
|
||||
class="form-control"
|
||||
id="endDate"
|
||||
name="timestamp__lte"
|
||||
value="{{ timestamp__lte|date:'Y-m-d' }}">
|
||||
<label for="endDate">End Date</label>
|
||||
</div>
|
||||
<div class="form-floating mx-1">
|
||||
<input type="number"
|
||||
class="form-control"
|
||||
id="itemsPerPage"
|
||||
name="items_per_page"
|
||||
value="{{ items_per_page }}"
|
||||
min="10"
|
||||
max="200"
|
||||
step="10"
|
||||
required>
|
||||
<label for="itemsPerPage">Items Per Page</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary mx-2">Submit</button>
|
||||
<a href="?" class="btn btn-warning mx-1">Reset</a>
|
||||
</form>
|
||||
<table class="table table-striped table-hover mb-2 w-auto">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for column in object_list.0.keys %}<th>{{ column|title }}</th>{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for object in object_list %}
|
||||
<div class="table-responsive mw-100">
|
||||
<table class="table table-striped table-hover mb-2 w-auto">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for field in object.values %}<td>{{ field }}</td>{% endfor %}
|
||||
{% for column in object_list.0.keys %}<th>{{ column|title }}</th>{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for object in object_list %}
|
||||
<tr>
|
||||
{% for field in object.values %}<td>{{ field }}</td>{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<nav aria-label="Page navigation">
|
||||
<div class="text-center mb-2">Showing {{ page_obj.object_list|length }} of {{ paginator.count }} results.</div>
|
||||
<ul class="pagination justify-content-center">
|
||||
|
Loading…
Reference in New Issue
Block a user