chore: updated the product list top bar

staging
Tejas Chari 2023-11-22 13:49:09 +05:30
parent e707255653
commit f07f5ad4e2
1 changed files with 21 additions and 15 deletions

View File

@ -24,22 +24,28 @@
*} *}
<div id="js-product-list-top" class="bg-white"> <div id="js-product-list-top" class="bg-white">
<!-- Show Filters Button -->
<div class="flex flex-row-reverse"> <!-- Top Bar With Filter Button and Sort By Selector -->
<button id="show-filters" type="button" class="flex space-x-2 items-center"> <div class="flex justify-between">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <!-- Show Filters Button -->
<path stroke="none" d="M0 0h24v24H0z" fill="none"/> <div>
<path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z" /> <button id="show-filters" type="button" class="flex space-x-2 items-center">
</svg> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<span> Filter </span> <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
</button> <path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z" />
</div> </svg>
<!-- Sort By Dropdown --> <span> Filter </span>
<div class="flex flex-row-reverse gap-2"> </button>
{block name='sort_by'} </div>
{include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders} <!-- Sort By Dropdown -->
{/block} <div>
{block name='sort_by'}
{include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
{/block}
</div>
</div> </div>
<!-- Off Screen Canvas Menu For Filters --> <!-- Off Screen Canvas Menu For Filters -->
<div id="product-list-top-filters" class="offcanvas fixed inset-0 flex w-96 hidden" role="dialog" aria-modal="true"> <div id="product-list-top-filters" class="offcanvas fixed inset-0 flex w-96 hidden" role="dialog" aria-modal="true">
<div class="relative mr-auto flex h-full md:w-64 flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl"> <div class="relative mr-auto flex h-full md:w-64 flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl">