diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/templates/partials/trello-board.html | 82 | ||||
| -rw-r--r-- | web/templates/partials/trello-boards.html | 29 |
2 files changed, 83 insertions, 28 deletions
diff --git a/web/templates/partials/trello-board.html b/web/templates/partials/trello-board.html new file mode 100644 index 0000000..0b176cd --- /dev/null +++ b/web/templates/partials/trello-board.html @@ -0,0 +1,82 @@ +{{define "trello-board"}} +<div class="board-card"> + <!-- Board Header --> + <div class="flex items-center justify-between mb-4"> + <h3 class="font-bold text-lg text-gray-900">{{.Name}}</h3> + </div> + + <!-- Add Card Form (Collapsible) --> + {{if .Lists}} + <details class="mb-4"> + <summary class="cursor-pointer text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors"> + + Add Card + </summary> + <form hx-post="/cards" + hx-target="closest .board-card" + hx-swap="outerHTML" + class="mt-3 space-y-2 bg-white/40 p-3 rounded-lg"> + <input type="hidden" name="board_id" value="{{.ID}}"> + + <select name="list_id" + required + class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> + <option value="">Select list...</option> + {{range .Lists}} + <option value="{{.ID}}">{{.Name}}</option> + {{end}} + </select> + + <input type="text" + name="name" + placeholder="Card title" + required + class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> + + <button type="submit" + class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"> + Add Card + </button> + </form> + </details> + {{end}} + + <!-- Cards List --> + <div class="space-y-3 max-h-96 overflow-y-auto scrollbar-thin"> + {{range .Cards}} + <div class="trello-card-item"> + <div class="flex items-start gap-2"> + <!-- Complete Checkbox --> + <input type="checkbox" + hx-post="/cards/complete" + hx-vals='{"card_id": "{{.ID}}"}' + hx-target="closest .trello-card-item" + hx-swap="outerHTML" + class="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer"> + + <div class="flex-1"> + <p class="font-medium text-sm text-gray-900 mb-2">{{.Name}}</p> + <div class="flex flex-wrap gap-2 items-center"> + {{if .ListName}} + <span class="badge bg-gray-100 text-gray-700"> + {{.ListName}} + </span> + {{end}} + {{if .DueDate}} + <span class="badge bg-red-100 text-red-800"> + Due: {{.DueDate.Format "Jan 2"}} + </span> + {{end}} + {{if .URL}} + <a href="{{.URL}}" target="_blank" + class="text-trello hover:text-trello/80 text-xs font-medium ml-auto transition-colors"> + View → + </a> + {{end}} + </div> + </div> + </div> + </div> + {{end}} + </div> +</div> +{{end}} diff --git a/web/templates/partials/trello-boards.html b/web/templates/partials/trello-boards.html index bd460cf..3d42517 100644 --- a/web/templates/partials/trello-boards.html +++ b/web/templates/partials/trello-boards.html @@ -11,34 +11,7 @@ <div class="card-grid mb-6"> {{range .Boards}} {{if .Cards}} - <div class="board-card"> - <h3 class="font-bold text-lg text-gray-900 mb-4">{{.Name}}</h3> - <div class="space-y-3 max-h-96 overflow-y-auto scrollbar-thin"> - {{range .Cards}} - <div class="trello-card-item"> - <p class="font-medium text-sm text-gray-900 mb-2">{{.Name}}</p> - <div class="flex flex-wrap gap-2 items-center"> - {{if .ListName}} - <span class="badge bg-gray-100 text-gray-700"> - {{.ListName}} - </span> - {{end}} - {{if .DueDate}} - <span class="badge bg-red-100 text-red-800"> - Due: {{.DueDate.Format "Jan 2"}} - </span> - {{end}} - {{if .URL}} - <a href="{{.URL}}" target="_blank" - class="text-trello hover:text-trello/80 text-xs font-medium ml-auto transition-colors"> - View → - </a> - {{end}} - </div> - </div> - {{end}} - </div> - </div> + {{template "trello-board" .}} {{end}} {{end}} </div> |