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

Refactor filter section in question table view for improved usability and styling

Browse Source
This commit is contained in:
Ross
2025-10-20 17:05:31 +01:00
parent 9cffdb3636
commit 815d853599
1 changed files with 65 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/question_table_view.html
+65 -21
View File
@@ -9,27 +9,7 @@
{% block content %}
<div class="row mb-3">
<div class="col-12 col-lg-3 mb-3">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span class="h6 mb-0">Filters</span>
<button class="btn btn-sm btn-outline-secondary d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#generic-filter-collapse" aria-expanded="false">Toggle</button>
</div>
<div id="generic-filter-collapse" class="collapse d-lg-block">
<div class="card-body">
<form action="" method="get">
{{ filter.form|crispy }}
<div class="mt-2">
<button class="btn btn-primary btn-sm" type="submit">Apply</button>
<a class="btn btn-secondary btn-sm" href="?">Reset</a>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-9">
<div class="col-12">
<div class="d-flex justify-content-between mb-2 align-items-center flex-column flex-md-row">
<div class="mb-2 mb-md-0">
<div class="btn-toolbar" role="toolbar">
@@ -59,4 +39,68 @@
</div>
</div>
<!-- Floating filter bar (fixed at bottom) -->
<style>
.floating-filter {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1030;
background: var(--bs-body-bg);
border-top: 1px solid rgba(0,0,0,0.12);
padding: 0.5rem 0.75rem;
}
.floating-filter .filter-body {
max-height: 50vh;
overflow-y: auto;
}
.floating-filter .filter-toggle {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 1040;
}
/* minibar/tab styling - small visible handle so panel isn't fully hidden */
.bottom-filter-minibar {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 1045;
background: transparent;
}
.bottom-filter-minibar .btn { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
</style>
<!-- Minibar: small visible strip when panel is collapsed -->
<div id="bottom-filter-minibar" class="bottom-filter-minibar">
<button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-controls="bottom-filter-body">Filters</button>
</div>
<button class="btn btn-primary filter-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-expanded="false" aria-controls="bottom-filter-body">Filters</button>
<div class="floating-filter shadow-lg">
<div id="bottom-filter-body" class="collapse show">
<div class="container-fluid">
<div class="d-flex justify-content-between align-items-start">
<div class="fw-bold">Filters</div>
<div>
<button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-expanded="true">Close</button>
</div>
</div>
<!-- filter body collapsible so minibar stays visible -->
<div class="filter-body mt-2">
<form action="" method="get">
{{ filter.form|crispy }}
<div class="mt-2">
<button class="btn btn-primary btn-sm" type="submit">Apply</button>
<a class="btn btn-secondary btn-sm" href="?">Reset</a>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}