Integrate Alpine.js for reactive UI
- Add Alpine.js (self-hosted, embedded in static/) - Refactor app.js to use Alpine.js stores and components - Update templates to use x-data, x-bind, x-show, x-text directives - Add reactive deploy button state, live logs, status badges - Add auto-dismiss alerts with close button and transitions - Add copy-to-clipboard component with feedback - Add confirm dialog component for destructive actions - Add relative time component with auto-update - Add prettier to make fmt target for JS formatting
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
{{define "content"}}
|
||||
{{template "nav" .}}
|
||||
|
||||
<main class="max-w-6xl mx-auto px-4 py-8">
|
||||
<main class="max-w-6xl mx-auto px-4 py-8" x-data="dashboard()">
|
||||
{{template "alert-success" .}}
|
||||
{{template "alert-error" .}}
|
||||
|
||||
@@ -58,9 +58,7 @@
|
||||
</td>
|
||||
<td class="text-gray-500 text-sm">
|
||||
{{if .LastDeployTime}}
|
||||
<span class="relative-time cursor-default" data-time="{{.LastDeployISO}}" title="{{.LastDeployLabel}}">
|
||||
{{.LastDeployLabel}}
|
||||
</span>
|
||||
<span x-data="relativeTime('{{.LastDeployISO}}')" x-text="display" class="cursor-default" title="{{.LastDeployLabel}}"></span>
|
||||
{{else}}
|
||||
<span class="text-gray-400">-</span>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user