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

Refactor category search form to enhance usability with advanced filters and improved loading indicators

Browse Source
This commit is contained in:
Ross
2025-10-28 18:02:27 +00:00
parent 11cd044485
commit c45410b5e5
1 changed files with 74 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/categories_list.html
+74 -53
View File
@@ -19,62 +19,83 @@
#category-search-loading.htmx-request { display: inline-block; } #category-search-loading.htmx-request { display: inline-block; }
</style> </style>
<form method="get" class="d-flex align-items-center" action="" id="category-search-form"> <form method="get" class="d-flex flex-column" action="" id="category-search-form">
<div class="me-3"> <div class="d-flex align-items-center">
<div class="form-check form-check-inline"> <input id="category-search-input" type="search" name="q" placeholder="Search all categories (conditions, findings, structures...)" value="{{ query|default:'' }}" class="form-control me-2"
<input class="form-check-input" type="checkbox" id="type-conditions" name="types" value="conditions" checked hx-get="{% url 'atlas:categories_search_partial' %}"
hx-get="{% url 'atlas:categories_search_partial' %}" hx-trigger="keyup changed delay:500ms"
hx-target="#category-search-results" hx-target="#category-search-results"
hx-swap="innerHTML" hx-swap="innerHTML"
hx-include="#category-search-form" hx-include="#category-search-form"
hx-indicator="#category-search-loading" /> hx-indicator="#category-search-loading" />
<label class="form-check-label" for="type-conditions">Conditions</label>
</div> {# Spinner shown while HTMX request is in-flight (selector matched by hx-indicator) #}
<div class="form-check form-check-inline"> <div id="category-search-loading" role="status" aria-hidden="true" class="ms-2">
<input class="form-check-input" type="checkbox" id="type-findings" name="types" value="findings" checked <span class="spinner-border spinner-border-sm text-primary" aria-hidden="true"></span>
hx-get="{% url 'atlas:categories_search_partial' %}" <span class="visually-hidden">Loading...</span>
hx-target="#category-search-results"
hx-swap="innerHTML"
hx-include="#category-search-form"
hx-indicator="#category-search-loading" />
<label class="form-check-label" for="type-findings">Findings</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="type-structures" name="types" value="structures" checked
hx-get="{% url 'atlas:categories_search_partial' %}"
hx-target="#category-search-results"
hx-swap="innerHTML"
hx-include="#category-search-form"
hx-indicator="#category-search-loading" />
<label class="form-check-label" for="type-structures">Structures</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="type-subspecialties" name="types" value="subspecialties" checked
hx-get="{% url 'atlas:categories_search_partial' %}"
hx-target="#category-search-results"
hx-swap="innerHTML"
hx-include="#category-search-form"
hx-indicator="#category-search-loading" />
<label class="form-check-label" for="type-subspecialties">Subspecialties</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="type-presentations" name="types" value="presentations" checked
hx-get="{% url 'atlas:categories_search_partial' %}"
hx-target="#category-search-results"
hx-swap="innerHTML"
hx-include="#category-search-form"
hx-indicator="#category-search-loading" />
<label class="form-check-label" for="type-presentations">Presentations</label>
</div> </div>
<button class="btn btn-primary ms-2" type="submit">Search</button>
</div> </div>
<input id="category-search-input" type="search" name="q" placeholder="Search all categories (conditions, findings, structures...)" value="{{ query|default:'' }}" class="form-control me-2" {# Collapsed advanced filters block - defaults to collapsed #}
hx-get="{% url 'atlas:categories_search_partial' %}" <div class="mt-2">
hx-trigger="keyup changed delay:500ms" <button class="btn btn-link p-0" type="button" data-bs-toggle="collapse" data-bs-target="#category-filters" aria-expanded="false" aria-controls="category-filters">
hx-target="#category-search-results" Advanced filters ▾
hx-swap="innerHTML" </button>
hx-include="#category-search-form"
hx-indicator="#category-search-loading" /> <div class="collapse mt-2" id="category-filters">
<div class="card card-body">
<div class="d-flex flex-wrap gap-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="type-conditions" name="types" value="conditions" checked
hx-get="{% url 'atlas:categories_search_partial' %}"
hx-target="#category-search-results"
hx-swap="innerHTML"
hx-include="#category-search-form"
hx-indicator="#category-search-loading" />
<label class="form-check-label" for="type-conditions">Conditions</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="type-findings" name="types" value="findings" checked
hx-get="{% url 'atlas:categories_search_partial' %}"
hx-target="#category-search-results"
hx-swap="innerHTML"
hx-include="#category-search-form"
hx-indicator="#category-search-loading" />
<label class="form-check-label" for="type-findings">Findings</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="type-structures" name="types" value="structures" checked
hx-get="{% url 'atlas:categories_search_partial' %}"
hx-target="#category-search-results"
hx-swap="innerHTML"
hx-include="#category-search-form"
hx-indicator="#category-search-loading" />
<label class="form-check-label" for="type-structures">Structures</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="type-subspecialties" name="types" value="subspecialties" checked
hx-get="{% url 'atlas:categories_search_partial' %}"
hx-target="#category-search-results"
hx-swap="innerHTML"
hx-include="#category-search-form"
hx-indicator="#category-search-loading" />
<label class="form-check-label" for="type-subspecialties">Subspecialties</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="type-presentations" name="types" value="presentations" checked
hx-get="{% url 'atlas:categories_search_partial' %}"
hx-target="#category-search-results"
hx-swap="innerHTML"
hx-include="#category-search-form"
hx-indicator="#category-search-loading" />
<label class="form-check-label" for="type-presentations">Presentations</label>
</div>
</div>
</div>
</div>
</div>
{# Spinner shown while HTMX request is in-flight (selector matched by hx-indicator) #} {# Spinner shown while HTMX request is in-flight (selector matched by hx-indicator) #}
<div id="category-search-loading" role="status" aria-hidden="true" class="ms-2"> <div id="category-search-loading" role="status" aria-hidden="true" class="ms-2">