diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-01-26 23:22:32 -1000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-01-26 23:23:38 -1000 |
| commit | f8757aef930a22669255359ff50908e0f7a941af (patch) | |
| tree | 6b55a0fd4617c5f2192fdf6b86e5cb761d408f04 /web/templates/partials/timeline-tab.html | |
| parent | 757936d284cb709709261ff9e0b99580b2106597 (diff) | |
Make Today collapsible and expand Tomorrow by default (#60)
- Convert Today section from static div to collapsible details element
- Add item count to Today header for consistency
- Expand both Today and Tomorrow sections by default
- Later section remains collapsed
- Update DESIGN.md with new timeline organization
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Diffstat (limited to 'web/templates/partials/timeline-tab.html')
| -rw-r--r-- | web/templates/partials/timeline-tab.html | 18 |
1 files changed, 11 insertions, 7 deletions
diff --git a/web/templates/partials/timeline-tab.html b/web/templates/partials/timeline-tab.html index 22cdd38..b1045c6 100644 --- a/web/templates/partials/timeline-tab.html +++ b/web/templates/partials/timeline-tab.html @@ -5,23 +5,27 @@ hx-target="#tab-content" hx-swap="innerHTML"> - <!-- Today Section --> + <!-- Today Section (Expanded, Collapsible) --> {{if .TodayItems}} - <div> - <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2"> + <details class="group" open> + <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90 cursor-pointer hover:text-white sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2 list-none"> <span>📅</span> {{.TodayLabel}} - </h2> + <span class="text-sm font-normal text-white/50">({{len .TodayItems}} items)</span> + <svg class="w-4 h-4 ml-auto transform transition-transform group-open:rotate-180" 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 relative pl-4 border-l border-white/10 ml-2"> {{range .TodayItems}} {{template "timeline-item" .}} {{end}} </div> - </div> + </details> {{end}} - <!-- Tomorrow Section (Collapsed) --> + <!-- Tomorrow Section (Expanded) --> {{if .TomorrowItems}} - <details class="group"> + <details class="group" open> <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/70 cursor-pointer hover:text-white/90 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2 list-none"> <span>🗓️</span> {{.TomorrowLabel}} <span class="text-sm font-normal text-white/50">({{len .TomorrowItems}} items)</span> |