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/tasks/dashboard.html
+14 -49
View File
@@ -1,4 +1,5 @@
{% extends "base.html" %}
{% import "components/macros.html" as ui %}
{% block title %}Tasks Dashboard - Stick{% endblock %}
@@ -15,6 +16,8 @@
<span class="text-xs font-semibold px-3 py-1.5 rounded-xl bg-slate-900 border border-slate-800 text-slate-300">
Total Tasks: {{ tasks.len() }}
</span>
<!-- Info trigger button -->
{{ ui::modal_trigger(target_id="task-info-modal", label="<svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/></svg>", variant="outline", extra_class="px-2.5 py-2.5") }}
</div>
</div>
@@ -30,58 +33,17 @@
New Task
</h3>
<form action="/tasks/create" method="post" class="space-y-4">
<div>
<label for="title" class="block text-xs font-semibold text-slate-400 mb-1.5">Title</label>
<input id="title" name="title" type="text" required class="appearance-none rounded-xl relative block w-full px-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="Task name">
</div>
<!-- Task Title Input using macro -->
{{ ui::text_input(id="title", name="title", label="Title", type="text", placeholder="Task name", required=true) }}
<div>
<label for="description" class="block text-xs font-semibold text-slate-400 mb-1.5">Description (Optional)</label>
<textarea id="description" name="description" rows="3" class="appearance-none rounded-xl relative block w-full px-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="Add some context..."></textarea>
</div>
<!-- Task Description TextArea using macro -->
{{ ui::textarea(id="description", name="description", label="Description (Optional)", placeholder="Add some context...") }}
<!-- Interactive Assignee Search -->
<div class="autocomplete-combobox relative">
<label class="block text-xs font-semibold text-slate-400 mb-1.5">Assignee (Optional)</label>
<!-- Hidden input holding the actual developer ID to submit -->
<input type="hidden" id="assignee-id" name="assignee_id" class="combobox-value">
<!-- Interactive Assignee Search using macro -->
{{ ui::search_combobox(name="assignee_id", label="Assignee (Optional)", placeholder="Search developer...", search_url="/developers/search", input_id="assignee-search", value_id="assignee-id") }}
<div class="relative">
<input type="text"
id="assignee-search"
name="q"
placeholder="Search developer..."
autocomplete="off"
hx-get="/developers/search"
hx-trigger="input changed delay:250ms, search"
hx-target="next .combobox-results"
hx-indicator="next .combobox-indicator"
class="combobox-input appearance-none rounded-xl relative block w-full pl-9 pr-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm">
<!-- Search Icon & Loading Indicator -->
<div class="absolute left-3 top-3 text-slate-500">
<svg class="combobox-indicator htmx-indicator animate-spin h-4 w-4 text-sky-500 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
</svg>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
<!-- Search Results Dropdown Popover -->
<div id="search-results"
class="combobox-results absolute z-10 w-full mt-1.5 bg-slate-900 border border-slate-800 rounded-xl shadow-2xl overflow-hidden hidden">
</div>
</div>
<button type="submit" class="w-full py-3 px-4 text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-95 transition shadow-md shadow-sky-500/10">
Create Task
</button>
<!-- Create Task submit button using macro -->
{{ ui::button(label="Create Task", variant="indigo", type="submit", extra_class="w-full py-3 bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-95 transition shadow-md shadow-sky-500/10") }}
</form>
</div>
</div>
@@ -166,4 +128,7 @@
</div>
</div>
<!-- Reusable Task Info Modal defined via macro -->
{{ ui::modal(id="task-info-modal", title="Tasks Guide", content="Welcome to the task board! You can add new tasks, assign them to registered developers, mark them complete, or delete them. This board is dynamic and updates automatically.", close_label="Got it") }}
{% endblock %}