summaryrefslogtreecommitdiff
path: root/web/templates/partials/tasks-tab.html
diff options
context:
space:
mode:
Diffstat (limited to 'web/templates/partials/tasks-tab.html')
-rw-r--r--web/templates/partials/tasks-tab.html60
1 files changed, 30 insertions, 30 deletions
diff --git a/web/templates/partials/tasks-tab.html b/web/templates/partials/tasks-tab.html
index afbbe2c..92e7979 100644
--- a/web/templates/partials/tasks-tab.html
+++ b/web/templates/partials/tasks-tab.html
@@ -1,19 +1,19 @@
{{define "tasks-tab"}}
-<div class="space-y-6"
+<div class="space-y-6 text-shadow-sm"
hx-get="/tabs/tasks"
hx-trigger="refresh-tasks from:body"
hx-target="#tab-content"
hx-swap="innerHTML">
<!-- Quick Add Form - Collapsible -->
- <section class="bg-white rounded-lg shadow-sm">
+ <section class="card">
<button type="button"
onclick="document.getElementById('quick-add-form').classList.toggle('hidden')"
class="w-full p-3 sm:p-4 text-left flex justify-between items-center">
- <span class="font-semibold text-gray-900">+ Quick Add</span>
- <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+ <span class="font-medium text-white">+ Quick Add</span>
+ <svg class="w-4 h-4 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<form id="quick-add-form"
- class="hidden p-3 sm:p-4 pt-0 border-t border-gray-100"
+ class="hidden p-3 sm:p-4 pt-0 border-t border-white/10"
hx-post="/unified-add"
hx-swap="none"
hx-on::after-request="if(event.detail.successful) { this.reset(); document.getElementById('trello-fields').style.display = 'none'; }">
@@ -22,14 +22,14 @@
<input type="text"
name="title"
placeholder="Task name..."
- class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+ class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 focus:ring-2 focus:ring-white/30 focus:border-white/30"
required>
</div>
<div>
<input type="date"
name="due_date"
id="quick-add-date"
- class="border border-gray-300 rounded-lg px-2 py-2 text-sm focus:ring-2 focus:ring-primary-500">
+ class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white focus:ring-2 focus:ring-white/30">
<script>
(function() {
var d = new Date();
@@ -40,14 +40,14 @@
</div>
<div>
<select name="source"
- class="border border-gray-300 rounded-lg px-2 py-2 text-sm focus:ring-2 focus:ring-primary-500"
+ class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white focus:ring-2 focus:ring-white/30"
onchange="document.getElementById('trello-fields').style.display = this.value === 'trello' ? 'flex' : 'none'">
<option value="todoist">Todoist</option>
<option value="trello">Trello</option>
</select>
</div>
<button type="submit"
- class="bg-primary-600 hover:bg-primary-700 text-white px-3 py-2 rounded-lg transition-colors font-medium text-sm">
+ class="bg-white/20 hover:bg-white/30 text-white px-3 py-2 rounded-lg transition-colors font-medium text-sm">
Add
</button>
</div>
@@ -56,7 +56,7 @@
<div id="trello-fields" class="flex flex-wrap gap-2 mt-3" style="display: none;">
<div>
<select name="board_id"
- class="border border-gray-300 rounded-lg px-2 py-2 text-sm"
+ class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white"
hx-get="/partials/lists"
hx-target="#list-select"
hx-trigger="change"
@@ -68,7 +68,7 @@
</select>
</div>
<div>
- <select id="list-select" name="list_id" class="border border-gray-300 rounded-lg px-2 py-2 text-sm">
+ <select id="list-select" name="list_id" class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white">
<option value="">Select List...</option>
</select>
</div>
@@ -80,7 +80,7 @@
{{if .Atoms}}
<div class="space-y-2">
{{range .Atoms}}
- <div class="task-item bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}} {{if .IsFuture}}opacity-60{{end}}">
+ <div class="task-item border-l-4 {{.ColorClass}} {{if .IsFuture}}opacity-60{{end}}">
<div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4">
<!-- Checkbox for completing -->
<input type="checkbox"
@@ -88,81 +88,81 @@
hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
hx-target="closest .task-item"
hx-swap="outerHTML"
- class="mt-1 h-5 w-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500 cursor-pointer flex-shrink-0">
+ class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0">
<span class="text-lg flex-shrink-0">{{.SourceIcon}}</span>
<div class="flex-1 min-w-0">
<div class="flex items-start justify-between gap-2">
- <h3 class="text-sm {{if .IsOverdue}}text-red-600 font-semibold{{else if .IsFuture}}text-gray-400 font-normal{{else}}text-gray-900 font-medium{{end}} break-words cursor-pointer hover:underline"
+ <h3 class="text-sm {{if .IsOverdue}}text-red-400 font-semibold{{else if .IsFuture}}text-white/50 font-normal{{else}}text-white font-medium{{end}} break-words cursor-pointer hover:underline"
hx-get="/tasks/detail?id={{.ID}}&source={{.Source}}"
hx-target="#task-edit-content"
hx-swap="innerHTML"
onclick="document.getElementById('task-edit-modal').classList.remove('hidden')">{{.Title}}</h3>
{{if .URL}}
- <a href="{{.URL}}" target="_blank" class="text-primary-600 hover:text-primary-800 flex-shrink-0" onclick="event.stopPropagation()">
+ <a href="{{.URL}}" target="_blank" class="text-white/70 hover:text-white flex-shrink-0" onclick="event.stopPropagation()">
<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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
{{end}}
</div>
- <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-gray-400">
+ <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/50">
{{if .DueDate}}
- <span class="{{if .IsOverdue}}text-red-500 font-medium{{end}}">{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
+ <span class="{{if .IsOverdue}}text-red-400 font-medium{{end}}">{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
{{end}}
{{if gt .Priority 2}}
- <span class="text-red-500 font-medium">P{{.Priority}}</span>
+ <span class="text-red-400 font-medium">P{{.Priority}}</span>
{{end}}
{{if .Description}}
- <span class="text-gray-400">+details</span>
+ <span class="text-white/40">+details</span>
{{end}}
</div>
</div>
</div>
{{if .Description}}
- <details class="border-t border-gray-100">
- <summary class="px-3 sm:px-4 py-2 text-xs text-gray-500 cursor-pointer hover:bg-gray-50">Tap to expand</summary>
- <div class="px-3 sm:px-4 pb-3 text-sm text-gray-600">{{.Description}}</div>
+ <details class="border-t border-white/10">
+ <summary class="px-3 sm:px-4 py-2 text-xs text-white/50 cursor-pointer hover:bg-white/5">Tap to expand</summary>
+ <div class="px-3 sm:px-4 pb-3 text-sm text-white/70">{{.Description}}</div>
</details>
{{end}}
</div>
{{end}}
</div>
{{else}}
- <div class="bg-white/50 rounded-lg p-6 text-center">
- <p class="text-gray-500 text-sm">No current tasks.</p>
+ <div class="card p-6 text-center">
+ <p class="text-white/50 text-sm">No current tasks.</p>
</div>
{{end}}
<!-- Future Tasks (Collapsed by default) -->
{{if .FutureAtoms}}
<details class="mt-4">
- <summary class="bg-white/70 rounded-lg p-3 cursor-pointer hover:bg-white/90 transition-colors text-sm text-gray-600 flex items-center justify-between">
+ <summary class="bg-black/40 backdrop-blur-sm rounded-lg p-3 cursor-pointer hover:bg-black/50 transition-colors text-sm text-white/60 flex items-center justify-between">
<span>+{{len .FutureAtoms}} later</span>
<svg class="w-4 h-4 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</summary>
<div class="space-y-2 mt-2">
{{range .FutureAtoms}}
- <div class="task-item bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}} opacity-60">
+ <div class="task-item border-l-4 {{.ColorClass}} opacity-60">
<div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4">
<input type="checkbox"
hx-post="/complete-atom"
hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
hx-target="closest .task-item"
hx-swap="outerHTML"
- class="mt-1 h-5 w-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500 cursor-pointer flex-shrink-0">
+ class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0">
<span class="text-lg flex-shrink-0">{{.SourceIcon}}</span>
<div class="flex-1 min-w-0">
<div class="flex items-start justify-between gap-2">
- <h3 class="text-sm text-gray-400 font-normal break-words">{{.Title}}</h3>
+ <h3 class="text-sm text-white/50 font-normal break-words">{{.Title}}</h3>
{{if .URL}}
- <a href="{{.URL}}" target="_blank" class="text-primary-600 hover:text-primary-800 flex-shrink-0">
+ <a href="{{.URL}}" target="_blank" class="text-white/50 hover:text-white/70 flex-shrink-0">
<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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
{{end}}
</div>
- <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-gray-400">
+ <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/40">
{{if .DueDate}}
<span>{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
{{end}}
generated by cgit v1.2.3 (git 2.39.1) at 2026-03-28 13:36:12 +0000