0.1.0 boosted
This commit is contained in:
parent
126e90084e
commit
f29c40d25e
11 changed files with 181 additions and 22 deletions
|
|
@ -12,18 +12,34 @@
|
|||
<link href="{{ url_for('app_css') }}" rel="stylesheet" />
|
||||
<script src="{{ url_for('htmx') }}"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
{% if DEBUG %}
|
||||
{{ hot_reload.script(url_for('hot-reload') ) | safe }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
{% set links = {
|
||||
"HTMX-PATTERNS": url_for("index"),
|
||||
"Boosted Links": url_for('boosted'),
|
||||
"Infinite Scroll": url_for('infinite'),
|
||||
} %}
|
||||
|
||||
<body
|
||||
class="justify-center items-center min-h-screen bg-gray-900 bg-no-repeat bg-cover bg-gradient-to-b from-pink-950/50 min-w-screen text-shadow-xl text-shadow-zinc-950">
|
||||
<div id="grit"
|
||||
class="absolute top-0 right-0 bottom-0 left-0 justify-center items-center min-w-full bg-repeat bg-cover" style="background-image: url(https://fokais.com/grit.svg), url(https://fokais.com/grit-light.svg);
|
||||
pointer-events: none"></div>
|
||||
<div id="content" class="flex flex-col items-center min-h-screen min-w-screen text-white">
|
||||
{% if DEBUG %}
|
||||
{{ hot_reload.script(url_for('hot-reload') ) | safe }}
|
||||
{% endif %}
|
||||
class="absolute top-0 right-0 bottom-0 left-0 justify-center items-center min-w-full bg-repeat bg-cover"
|
||||
style="background-image: url(https://fokais.com/grit.svg), url(https://fokais.com/grit-light.svg); animation: pulse 10s cubic-bezier(0.4, 0, 0.6, 1) infinite; pointer-events: none">
|
||||
</div>
|
||||
<div id="content" class="flex flex-col items-center min-h-screen min-w-screen text-white border-b">
|
||||
<nav class="flex flex-row gap-8 items-center w-full p-4 bg-black border-b-4 border-gray-800">
|
||||
<!-- <a href="/" class="text-3xl gap-4 font-bold">HTMX PATTERNS</a> -->
|
||||
<!-- <a href="/infinite" class="text-3xl font-bold text-yellow-400">INFINITE</a> -->
|
||||
{% for link, url in links.items() %}
|
||||
<a href="{{ url }}"
|
||||
class="text-3xl font-bold uppercase {% if not loop.first %}text-yellow-400{% endif %}">{{ link
|
||||
}}</a>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
{% block content %}
|
||||
{{ body | safe }}
|
||||
{% endblock %}
|
||||
|
|
|
|||
61
templates/boosted/person.html
Normal file
61
templates/boosted/person.html
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %}Contact - {{ person_id }} - {{ person.name }}{% endblock %}
|
||||
{% block content %}
|
||||
<h1 id="title"
|
||||
class="inline-block pb-0 mx-auto mt-8 mb-0 text-6xl font-black leading-tight leading-loose 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">
|
||||
HTMX PATTERNS - BOOSTED
|
||||
</h1>
|
||||
|
||||
<p class='text-3xl font-bold mt-0 mb-16 max-w-xl text-center prose-xl'>
|
||||
Contact - {{ person_id }}
|
||||
</p>
|
||||
|
||||
<p class='text-3xl font-bold mt-0 mb-16 max-w-2xl text-center prose-xl'>
|
||||
{{ person.name }} -
|
||||
{{ person.phone_number }}
|
||||
</p>
|
||||
|
||||
<h2 class='text-3xl font-bold mt-0 max-w-xl text-center prose-xl mt-8'>
|
||||
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>
|
||||
</div>
|
||||
|
||||
<h2 class='text-3xl font-bold mt-0 max-w-xl text-center prose-xl mt-8'>
|
||||
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>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -5,17 +5,34 @@
|
|||
HTMX PATTERNS
|
||||
</h1>
|
||||
|
||||
<p class='mt-0 mb-16 max-w-xl text-center prose-xl'>
|
||||
<p class='text-3xl font-bold mt-0 mb-16 max-w-xl text-center prose-xl'>
|
||||
A collection of HTMX patterns
|
||||
</p>
|
||||
|
||||
<ul id="patterns" class="flex flex-col gap-4">
|
||||
<li>
|
||||
<a href="{{ url_for('infinite') }}"
|
||||
class="cursor-pointer bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
|
||||
Infinite Scroll
|
||||
<ul id="patterns" class="grid grid-cols-3 gap-4">
|
||||
{% for link, url in links.items() %}
|
||||
<li class='w-full'>
|
||||
<a href="{{ url }}"
|
||||
class="cursor-pointer bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full">
|
||||
{{ link }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<!-- <a href="{{ url_for('infinite') }}" -->
|
||||
<!-- class="cursor-pointer bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded"> -->
|
||||
<!-- Infinite Scroll -->
|
||||
<!-- </a> -->
|
||||
|
||||
<!-- Ajaxify - https://hypermedia.systems/htmx-in-action/#_ajax_ifying_our_application -->
|
||||
<!-- Using HTTP verbs -->
|
||||
<!-- Validation -->
|
||||
<!-- Pagination -->
|
||||
<!-- Modals -->
|
||||
<!-- Active Search -->
|
||||
<!-- Lazy Loading -->
|
||||
<!-- Inline Delete -->
|
||||
<!-- Bulk Delete -->
|
||||
|
||||
</ul>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %}Contacts List{% endblock %}
|
||||
{% block content %}
|
||||
<h1 id="title"
|
||||
class="inline-block pb-0 mx-auto mt-8 mb-0 text-6xl font-black leading-tight leading-loose 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">
|
||||
|
|
@ -14,7 +15,10 @@
|
|||
</ul>
|
||||
|
||||
<div id='persons-loading' class='spinner mb-24 animate-bounce'>
|
||||
loading more contacts
|
||||
<p class='text-xl prose-xl'>loading more contacts</p>
|
||||
<p class='text-xl prose-xl'>
|
||||
<em class='text-red-500'>with simulated slow down</em>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue