cf2e2ba1db
- macros/search.html: shared search input macros (mobile + desktop) - macros/cart_icon.html: shared cart icon/badge macro (count param, no DB) - macros/layout.html: inline hamburger icon, use shared search macro - _oob.html: use cart_mini_html fragment slot instead of cart template import - db/session.py: guard teardown rollback against committed/dead sessions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
84 lines
2.6 KiB
HTML
84 lines
2.6 KiB
HTML
{# Shared search input macros for filter UIs #}
|
|
|
|
{% macro search_mobile(current_local_href, search, search_count, hx_select) -%}
|
|
<div
|
|
id="search-mobile-wrapper"
|
|
class="flex flex-row gap-2 items-center flex-1 min-w-0 pr-2"
|
|
>
|
|
<input
|
|
id="search-mobile"
|
|
type="text"
|
|
name="search"
|
|
aria-label="search"
|
|
class="text-base md:text-sm col-span-5 rounded-md px-3 py-2 mb-2 w-full min-w-0 max-w-full border-2 border-stone-200 placeholder-shown:border-stone-200 [&:not(:placeholder-shown)]:border-yellow-200"
|
|
hx-preserve
|
|
value="{{ search|default('', true) }}"
|
|
placeholder="search"
|
|
hx-trigger="input changed delay:300ms"
|
|
hx-target="#main-panel"
|
|
|
|
hx-select="{{hx_select}}, #search-mobile-wrapper, #search-desktop-wrapper"
|
|
hx-get="{{ (current_local_href ~ {'search': None}|qs)|host }}"
|
|
hx-swap="outerHTML"
|
|
hx-push-url="true"
|
|
hx-headers='{"X-Origin":"search-mobile", "X-Search":"true"}'
|
|
hx-sync="this:replace"
|
|
autocomplete="off"
|
|
>
|
|
|
|
<div
|
|
id="search-count-mobile"
|
|
aria-label="search count"
|
|
{% if not search_count %}
|
|
class="text-xl text-red-500"
|
|
{% endif %}
|
|
>
|
|
{% if search %}
|
|
{{search_count}}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{%- endmacro %}
|
|
|
|
{% macro search_desktop(current_local_href, search, search_count, hx_select) -%}
|
|
<div
|
|
id="search-desktop-wrapper"
|
|
class="flex flex-row gap-2 items-center"
|
|
>
|
|
<input
|
|
id="search-desktop"
|
|
type="text"
|
|
name="search"
|
|
aria-label="search"
|
|
class="w-full mx-1 my-3 px-3 py-2 text-md rounded-xl border-2 shadow-sm border-white placeholder-shown:border-white [&:not(:placeholder-shown)]:border-yellow-200"
|
|
hx-preserve
|
|
value="{{ search|default('', true) }}"
|
|
placeholder="search"
|
|
hx-trigger="input changed delay:300ms"
|
|
hx-target="#main-panel"
|
|
|
|
hx-select="{{hx_select}}, #search-mobile-wrapper, #search-desktop-wrapper"
|
|
hx-get="{{ (current_local_href ~ {'search': None}|qs)|host}}"
|
|
hx-swap="outerHTML"
|
|
hx-push-url="true"
|
|
hx-headers='{"X-Origin":"search-desktop", "X-Search":"true"}'
|
|
hx-sync="this:replace"
|
|
|
|
autocomplete="off"
|
|
>
|
|
|
|
<div
|
|
id="search-count-desktop"
|
|
aria-label="search count"
|
|
{% if not search_count %}
|
|
class="text-xl text-red-500"
|
|
{% endif %}
|
|
>
|
|
{% if search %}
|
|
{{search_count}}
|
|
{% endif %}
|
|
{{zap_filter}}
|
|
</div>
|
|
</div>
|
|
{%- endmacro %}
|