waylon/htmx-patterns
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Waylon S. Walker 2024-12-11 09:17:38 -06:00
parent a70c24398a
commit e181f57a91
30 changed files with 2458 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

10
templates/infinite/persons.html
View file

@ -2,22 +2,22 @@
{% block title %}Contacts List{% endblock %}
{% block content %}
<h1 id="title"
class="inline-block px-4 pb-0 mx-auto mb-0 text-center text-6xl sm:text-8xl font-black text-transparent bg-clip-text bg-gradient-to-r from-red-600 via-pink-500 to-yellow-400 ring-red-500 text-shadow-xl text-shadow-zinc-950 ring-5 leading-none">
class="inline-block px-4 pb-0 mx-auto mb-0 text-center text-6xl sm:text-8xl font-thin text-transparent bg-clip-text bg-gradient-to-r from-terminal-600 via-terminal-500 to-terminal-900 ring-red-700 text-shadow-xl text-shadow-zinc-950 ring-5 leading-none">
HTMX PATTERNS - INFINITE
</h1>
<p class='text-3xl font-bold mt-0 mb-16 max-w-xl text-center prose-xl'>
<p class='text-3xl px-2 mt-0 mb-16 max-w-xl text-center prose-xl text-terminal-500 font-extralight'>
Contacts List
</p>
<ul id="persons" class="flex flex-col gap-4 mb-16 px-4 sm:px-0">
<ul id="persons" class="flex flex-col gap-4 mb-16 px-4 sm:px-0 container max-w-xl">
{% include "infinite/persons_partial.html" %}
</ul>
<div id='persons-loading' class='spinner mb-24 animate-bounce'>
<p class='text-xl prose-xl'>loading more contacts</p>
<p class='text-xl prose-xl text-terminal-700'>loading more contacts</p>
<p class='text-xl prose-xl'>
<em class='text-red-500'>with simulated slow down</em>
<em class='text-terminal-500'>with simulated slow down</em>
</p>
</div>

22
templates/infinite/persons_partial.html
View file

@ -1,16 +1,14 @@
{% for person in persons %}
<li
{% if loop.last %}
<li hx-get="{{ url_for('infinite', page=next_page) }}" hx-trigger="intersect once" hx-target="#persons"
hx-swap='beforeend' hx-indicator="#persons-loading"
class="cursor-pointer bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
{{ person.name }} -
{{ person.phone_number }}
</li>
{% else %}
<li class="cursor-pointer bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
{{ person.name }} -
{{ person.phone_number }}
</li>
hx-get="{{ url_for('infinite', page=next_page) }}"
hx-trigger="intersect once"
hx-target="#persons"
hx-swap='beforeend'
hx-indicator="#persons-loading"
{% endif %}
class='max-w-xl container text-xl font-light px-2 mt-0 mb-4 py-2 text-center text-terminal-500 bg-terminal-950 prose-xl ring-1 ring-terminal-500 rounded-xl shadow-lg shadow-terminal-300/20'>
<span class='font-normal'>{{ person.name.upper() }}</span> -
{{ person.phone_number }}
</li>
{% endfor %}