fix(search): keep search bar visible when search returns no results
- Change empty state condition to also check navigator.has_search() - Show "No X match your search" message inside the table container - Applied to roast, roaster, and gear list templates
This commit is contained in:
parent
1fa88d054c
commit
39598c1709
3 changed files with 12 additions and 3 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
{% import "partials/table.html" as table %}
|
{% import "partials/table.html" as table %}
|
||||||
|
|
||||||
<div id="gear-list">
|
<div id="gear-list">
|
||||||
{% if gear.items.is_empty() %}
|
{% if gear.items.is_empty() && !navigator.has_search() %}
|
||||||
<div class="rounded-lg border border-stone-200 bg-stone-50 p-8 text-center">
|
<div class="rounded-lg border border-stone-200 bg-stone-50 p-8 text-center">
|
||||||
<p class="text-stone-500">No gear found.</p>
|
<p class="text-stone-500">No gear found.</p>
|
||||||
{% if is_authenticated %}
|
{% if is_authenticated %}
|
||||||
|
|
@ -64,6 +64,9 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
{% if gear.items.is_empty() %}
|
||||||
|
<div class="p-8 text-center text-stone-500">No gear matches your search.</div>
|
||||||
|
{% endif %}
|
||||||
{% call table::pagination_header(gear, navigator, "#gear-list") %}
|
{% call table::pagination_header(gear, navigator, "#gear-list") %}
|
||||||
{% if gear.has_next() %}
|
{% if gear.has_next() %}
|
||||||
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
|
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{% import "partials/table.html" as table %}
|
{% import "partials/table.html" as table %}
|
||||||
|
|
||||||
<div id="roast-list" class="mt-6" data-star-scope="roasts">
|
<div id="roast-list" class="mt-6" data-star-scope="roasts">
|
||||||
{% if roasts.items.is_empty() %}
|
{% if roasts.items.is_empty() && !navigator.has_search() %}
|
||||||
<div
|
<div
|
||||||
class="rounded-lg border border-dashed border-amber-300 bg-amber-100/40 px-4 py-6 text-sm text-stone-600"
|
class="rounded-lg border border-dashed border-amber-300 bg-amber-100/40 px-4 py-6 text-sm text-stone-600"
|
||||||
>
|
>
|
||||||
|
|
@ -88,6 +88,9 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
{% if roasts.items.is_empty() %}
|
||||||
|
<div class="p-8 text-center text-stone-500">No roasts match your search.</div>
|
||||||
|
{% endif %}
|
||||||
{% call table::pagination_header(roasts, navigator, "#roast-list") %}
|
{% call table::pagination_header(roasts, navigator, "#roast-list") %}
|
||||||
{% if roasts.has_next() %}
|
{% if roasts.has_next() %}
|
||||||
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
|
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{% import "partials/table.html" as table %}
|
{% import "partials/table.html" as table %}
|
||||||
|
|
||||||
<div id="roaster-list" class="mt-6" data-star-scope="roasters">
|
<div id="roaster-list" class="mt-6" data-star-scope="roasters">
|
||||||
{% if roasters.items.is_empty() %}
|
{% if roasters.items.is_empty() && !navigator.has_search() %}
|
||||||
<div
|
<div
|
||||||
class="rounded-lg border border-dashed border-amber-300 bg-amber-100/40 px-4 py-6 text-sm text-stone-600"
|
class="rounded-lg border border-dashed border-amber-300 bg-amber-100/40 px-4 py-6 text-sm text-stone-600"
|
||||||
>
|
>
|
||||||
|
|
@ -100,6 +100,9 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
{% if roasters.items.is_empty() %}
|
||||||
|
<div class="p-8 text-center text-stone-500">No roasters match your search.</div>
|
||||||
|
{% endif %}
|
||||||
{% call table::pagination_header(roasters, navigator, "#roaster-list") %}
|
{% call table::pagination_header(roasters, navigator, "#roaster-list") %}
|
||||||
{% if roasters.has_next() %}
|
{% if roasters.has_next() %}
|
||||||
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
|
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue