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

74
templates/boosted/person.html
View file

@ -2,60 +2,62 @@
{% block title %}Contact - {{ person_id }} - {{ person.name }}{% 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 - BOOSTED
</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'>
Contact - {{ person_id }}
</p>
<p class='text-3xl font-bold mt-0 mb-16 max-w-2xl text-center prose-xl'>
{{ person.name }} -
{% if person is not none %}
<p
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 }}
</p>
{% else %}
<p
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'>
Person not found
</p>
{% endif %}
<h2 class='text-3xl font-bold mt-0 max-w-xl text-center prose-xl mt-8'>
{% macro link(id, text, boosted=false) -%}
<a
class="
{% if id is none %}
pointer-events-none bg-terminal-950 text-terminal-900 ring-terminal-900
{% else %}
bg-terminal-950 hover:bg-terminal-900 hover:text-terminal-400 text-terminal-500 shadow-lg shadow-terminal-300/20 hover:shadow-terminal-300/30 ring-terminal-300
{% endif %}
cursor-pointer block text-center font-bold py-2 px-4 rounded w-full ring-1
"
{% if id is not none %}
href="{{ url_for('boosted', id=id) }}"
{% endif %}
{% if boosted %}
hx-boost="true"
{% endif %}>
{{ text }}
</a>
{%- endmacro %}
<h2 class='text-3xl font-light mt-0 max-w-xl text-center prose-xl mt-8 text-terminal-500'>
Boosted Links
</h2>
<div class='flex flex-row gap-4'>
{% if prev_id is not none %}
<a href="{{ url_for('boosted', id=prev_id) }}"
class="cursor-pointer bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded" hx-boost='true'>
Previous
</a>
{% else %}
<a class="pointer-events-none bg-gray-500 text-white font-bold py-2 px-4 rounded">
Previous
</a>
{% endif %}
<a href="{{ url_for('boosted', id=next_id) }}"
class="cursor-pointer bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded" hx-boost='true'>
Next
</a>
{{ link(prev_id, 'Previous', boosted=True) }}
{{ link(next_id, 'Next', boosted=True) }}
</div>
<h2 class='text-3xl font-bold mt-0 max-w-xl text-center prose-xl mt-8'>
<h2 class='text-3xl font-light mt-0 max-w-xl text-center prose-xl mt-8 text-terminal-500'>
Normal Links
</h2>
<div class='flex flex-row gap-4'>
{% if prev_id is not none %}
<a href="{{ url_for('boosted', id=prev_id) }}"
class="cursor-pointer bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
Previous
</a>
{% else %}
<a class="pointer-events-none bg-gray-500 text-white font-bold py-2 px-4 rounded">
Previous
</a>
{% endif %}
<a href="{{ url_for('boosted', id=next_id) }}"
class="cursor-pointer bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
Next
</a>
{{ link(prev_id, 'Previous', boosted=False) }}
{{ link(next_id, 'Next', boosted=False) }}
</div>
{% endblock %}