diff options
| -rw-r--r-- | DESIGN.md | 13 | ||||
| -rw-r--r-- | web/templates/partials/timeline-tab.html | 18 |
2 files changed, 22 insertions, 9 deletions
@@ -184,6 +184,15 @@ BuildTimeline(ctx, store, calendarClient, tasksClient, start, end) - `bg-black/60 backdrop-blur-lg` for modals - `box-shadow: 0 0 12px black` for depth +**Z-Index Hierarchy:** +| Layer | z-index | Element | +|-------|---------|---------| +| Content | default | Page content | +| Sticky headers | z-10 | Timeline section headers | +| Details dropdown | z-30 | Navigation dropdown menu | +| FAB button | z-40 | Floating action button | +| Modals | z-50 | Action modal, edit modal | + ### Typography - **Font:** Inter (300, 400, 500, 600 weights) @@ -247,8 +256,8 @@ Chronological view of all upcoming items grouped by day section. **Data Sources:** Todoist, Trello, PlanToEat, Google Calendar, Google Tasks **Organization:** -- **Today** (expanded) - Items due today -- **Tomorrow** (collapsed) - Items due tomorrow +- **Today** (expanded, collapsible) - Items due today +- **Tomorrow** (expanded, collapsible) - Items due tomorrow - **Later** (collapsed) - Items 2+ days out **Item Display:** 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> |