shaamilahmed/Htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate and consolidate UI templates to compile-time Askama component macros

Browse Source
This commit is contained in:
Enciphered
2026-05-30 12:28:47 +05:00
parent f42a5f05b2
commit 110fc61fa2
16 changed files with 697 additions and 598 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/components/modals.html
+17 -37
View File
@@ -1,4 +1,5 @@
{% extends "base.html" %}
{% import "components/macros.html" as ui %}
{% block title %}Dialog Modals - Design System Wiki{% endblock %}
@@ -33,9 +34,7 @@
<!-- Demo Viewport -->
<div id="modal-sandbox" class="wiki-pane py-2">
<button data-modal-target="wiki-demo-modal" class="inline-flex items-center justify-center rounded-xl text-xs font-bold bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 transition active:scale-95">
Open Modal Dialog
</button>
{{ ui::modal_trigger(target_id="wiki-demo-modal", label="Open Modal Dialog", variant="indigo") }}
</div>
<!-- Code Snippet Area -->
@@ -45,27 +44,18 @@
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
Copy Code
</button>
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Trigger Button (points to modal element ID) --&gt;
&lt;button data-modal-target="my-modal-id" class="px-4 py-2 bg-indigo-600 text-white text-xs font-bold rounded-xl"&gt;
Open Modal
&lt;/button&gt;
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
&lt;!-- Modal Overlay Element --&gt;
&lt;div id="my-modal-id" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true"&gt;
&lt;!-- Backdrop shadow with blur --&gt;
&lt;div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"&gt;&lt;/div&gt;
&lt;!-- Modal Panel with scale / opacity transition --&gt;
&lt;div class="modal-content relative z-10 w-full max-w-sm scale-95 opacity-0 transition-all duration-300 border border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl rounded-3xl"&gt;
&lt;h3 class="text-sm font-bold text-slate-100"&gt;Confirmation Title&lt;/h3&gt;
&lt;p class="text-xs text-muted-foreground mt-2 leading-relaxed"&gt;Are you sure you want to proceed?&lt;/p&gt;
&lt;!-- Close triggers require class 'modal-close' --&gt;
&lt;button class="modal-close mt-4 w-full py-2 rounded-xl bg-secondary border border-border text-slate-200 text-xs font-semibold"&gt;
Cancel
&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
&lt;!-- Trigger Button (points to modal element ID) --&gt;
{{ "{{" }} ui::modal_trigger(target_id="my-modal-id", label="Open Modal Dialog", variant="indigo") {{ "}}" }}
&lt;!-- Option A: Simple Modal (Self-contained with text body) --&gt;
{{ "{{" }} ui::modal(id="my-modal-id", title="Confirmation Title", content="Are you sure you want to proceed?", close_label="Cancel") {{ "}}" }}
&lt;!-- Option B: Paired Macros (For custom markup, inputs, or headers) --&gt;
{{ "{{" }} ui::modal_open(id="my-modal-id", title="Confirmation Title") {{ "}}" }}
&lt;p class="text-xs text-muted-foreground mt-2 leading-relaxed"&gt;Are you sure you want to proceed?&lt;/p&gt;
{{ "{{" }} ui::modal_close(close_label="Cancel") {{ "}}" }}</code></pre>
</div>
</div>
</div>
@@ -136,20 +126,10 @@
</div>
</div>
<!-- Interactive Modal Sandbox Element -->
<div id="wiki-demo-modal" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true">
<div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"></div>
<div class="modal-content relative z-10 w-full max-w-sm scale-95 opacity-0 transition-all duration-300 border border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl rounded-3xl text-center">
<div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 mb-3">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<h3 class="text-sm font-bold text-slate-100">Wiki Sandbox Modal</h3>
<p class="text-xs text-slate-405 mt-2 leading-relaxed">This modal is animated and handled globally by <code>components.js</code>. Pressing escape or clicking outside closes it instantly.</p>
<button class="modal-close mt-4 w-full py-2 rounded-xl bg-secondary border border-border hover:bg-secondary transition text-xs font-semibold text-slate-200">Dismiss Modal</button>
</div>
</div>
<!-- Interactive Modal Sandbox Element using paired macros -->
{{ ui::modal_open(id="wiki-demo-modal", title="Wiki Sandbox Modal") }}
<p class="text-xs text-slate-405 mt-2 leading-relaxed">This modal is animated and handled globally by <code>components.js</code>. Pressing escape or clicking outside closes it instantly.</p>
{{ ui::modal_close(close_label="Dismiss Modal") }}
<script>
function toggleWikiTabs(btn, paneId) {