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/sheets.html
+14 -48
View File
@@ -1,4 +1,5 @@
{% extends "base.html" %}
{% import "components/macros.html" as ui %}
{% block title %}Slide-over Drawers (Sheets) - Design System Wiki{% endblock %}
@@ -33,9 +34,7 @@
<!-- Demo Viewport -->
<div id="sheet-sandbox" class="wiki-pane py-2">
<button data-sheet-target="wiki-demo-sheet" 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 Right Drawer
</button>
{{ ui::sheet_trigger(target_id="wiki-demo-sheet", label="Open Right Drawer", variant="indigo") }}
</div>
<!-- Code Snippet Area -->
@@ -45,34 +44,15 @@
<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 sheet element ID) --&gt;
&lt;button data-sheet-target="my-sheet-id" class="px-4 py-2 bg-indigo-650 text-white text-xs font-bold rounded-xl"&gt;
Open Drawer
&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;!-- Slide Drawer Sheet Element --&gt;
&lt;div id="my-sheet-id" class="sheet-dialog fixed inset-0 z-50 overflow-hidden hidden" role="dialog" aria-modal="true"&gt;
&lt;!-- Backdrop --&gt;
&lt;div class="sheet-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm opacity-0 transition-opacity duration-300"&gt;&lt;/div&gt;
&lt;div class="absolute inset-y-0 right-0 max-w-full flex pl-10"&gt;
&lt;!-- Panel with transition translate-x-full --&gt;
&lt;div class="sheet-content w-screen max-w-sm translate-x-full transition-transform duration-300 bg-popover/95 border-l border-border p-6 flex flex-col justify-between"&gt;
&lt;div class="space-y-4"&gt;
&lt;div class="flex items-center justify-between pb-3 border-b border-border"&gt;
&lt;h3 class="text-sm font-bold text-slate-100"&gt;Settings&lt;/h3&gt;
&lt;button class="sheet-close text-slate-500 hover:text-white"&gt;
&lt;svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"&gt;&lt;path d="M6 18L18 6M6 6l12 12"/&gt;&lt;/svg&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;p class="text-xs text-muted-foreground"&gt;Drawer Body Content&lt;/p&gt;
&lt;/div&gt;
&lt;button class="sheet-close w-full py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold rounded-xl"&gt;
Save
&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
&lt;!-- Trigger Button (points to sheet element ID) --&gt;
{{ "{{" }} ui::sheet_trigger(target_id="my-sheet-id", label="Open Drawer", variant="indigo") {{ "}}" }}
&lt;!-- Slide Drawer Sheet Element using paired macros --&gt;
{{ "{{" }} ui::sheet_open(id="my-sheet-id", title="Settings", max_width_class="max-w-sm") {{ "}}" }}
&lt;p class="text-xs text-muted-foreground"&gt;Drawer Body Content&lt;/p&gt;
{{ "{{" }} ui::sheet_close(save_label="Save") {{ "}}" }}</code></pre>
</div>
</div>
</div>
@@ -143,24 +123,10 @@
</div>
</div>
<!-- Interactive Sheet Sandbox Element -->
<div id="wiki-demo-sheet" class="sheet-dialog fixed inset-0 z-50 overflow-hidden hidden" role="dialog" aria-modal="true">
<div class="sheet-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm opacity-0 transition-opacity duration-300 animate-fade-in"></div>
<div class="absolute inset-y-0 right-0 max-w-full flex pl-10">
<div class="sheet-content w-screen max-w-sm translate-x-full transition-transform duration-300 ease-in-out border-l border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl flex flex-col justify-between">
<div class="space-y-4">
<div class="flex items-center justify-between pb-3 border-b border-border">
<h3 class="text-sm font-bold text-slate-100">Drawer Panel Properties</h3>
<button class="sheet-close text-slate-500 hover:text-white rounded-lg p-1.5 hover:bg-secondary transition">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<p class="text-xs text-slate-405 leading-relaxed">This slide-over panel demonstrates real-time sidebar parameter adjustments, sliding in from the right edge with hardware transitions.</p>
</div>
<button class="sheet-close w-full py-2.5 rounded-xl bg-indigo-650 hover:bg-indigo-600 transition text-xs font-bold text-white shadow-lg shadow-indigo-650/10">Save Properties</button>
</div>
</div>
</div>
<!-- Interactive Sheet Sandbox Element using paired macros -->
{{ ui::sheet_open(id="wiki-demo-sheet", title="Drawer Panel Properties", max_width_class="max-w-sm") }}
<p class="text-xs text-slate-405 leading-relaxed">This slide-over panel demonstrates real-time sidebar parameter adjustments, sliding in from the right edge with hardware transitions.</p>
{{ ui::sheet_close(save_label="Save Properties") }}
<script>
function toggleWikiTabs(btn, paneId) {