-
Notifications
You must be signed in to change notification settings - Fork 0
/
04-partial_search_results
62 lines (59 loc) · 3.73 KB
/
04-partial_search_results
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
{!-- if no results, let the user know --}
{if low_search_no_results}
<div class="alert alert--empty">No Add-ons</div>
{/if}
{!-- the card used to display the add-on information --}
{!-- Tailwind card component source: https://tailwindcomponents.com/component/quote-card-with-image-1 --}
<div class=" flex flex-col my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3">
<div class="max-w-2xl bg-white border-2 border-gray-300 p-5 rounded-md tracking-wide shadow-lg flex-1">
<div id="header" class="flex">
<img alt="addon icon" class="rounded-md border-2 border-gray-300" style="width:100px;height:100px;" src="{add_on_icon}"/>
<div id="body" class="flex flex-col ml-5">
<h4 id="name" class="text-xl font-semibold mb-2">{title}</h4>
<p id="job" class="text-gray-800 mt-2">{add_on_description:limit characters='100'}</p>
<div class="flex mt-5">
<p class="ml-3">
{if add_on_price == '0'}
Free
{if:else}
<sup>$</sup>{add_on_price}
{/if}
</p>
</div>
</div>
</div>
</div>
</div>
{!-- pagination since we're limiting to 4 results on a page --}
{!-- Tailwind pagination component source: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/css/pagination/with-numbers --}
{paginate}
<div class="container py-2">
<nav class="block">
<ul class="flex pl-0 rounded list-none flex-wrap">
{pagination_links}
{first_page}
<li>
<a href="{pagination_url}" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blue-500 {if current_page}text-white bg-blue-500{if:else}bg-white text-blue-500{/if}" style="width:30px;">
{pagination_page_number}
</a>
</li>
{/first_page}
{page}
<li>
<a href="{pagination_url}" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blue-500 {if current_page}text-white bg-blue-500{if:else}bg-white text-blue-500{/if}" style="width:30px;">
{pagination_page_number}
</a>
</li>
{/page}
{last_page}
<li>
<a href="{pagination_url}" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blue-500 {if current_page}text-white bg-blue-500{if:else}bg-white text-blue-500{/if}" style="width:30px;">
{pagination_page_number}
</a>
</li>
{/last_page}
{/pagination_links}
</ul>
</nav>
</div>
{/paginate}