docs(19-02): complete card visual revamp plan summary
- TabloProjectCard rebuilt with status badge, avatar initial, progress bar - CSS Section 20b added: progress-row, list-row, data-view toggle rules - Tailwind regenerated
This commit is contained in:
Arthur Belleville
parent
2b786e2014
commit
4a0b42052d
1 changed files with 101 additions and 0 deletions
101
.planning/phases/19-tablo-list-revamp/19-02-SUMMARY.md
Normal file
101
.planning/phases/19-tablo-list-revamp/19-02-SUMMARY.md
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
---
|
||||
phase: 19-tablo-list-revamp
|
||||
plan: "02"
|
||||
subsystem: frontend-templates
|
||||
tags: [go, templ, htmx, tailwind, css, tablos, progress, status-badge]
|
||||
|
||||
# Dependency graph
|
||||
requires:
|
||||
- phase: 19-tablo-list-revamp
|
||||
plan: "01"
|
||||
provides: TabloCardView.Progress int field and Tablo.Status string from sqlc
|
||||
provides:
|
||||
- Revamped TabloProjectCard matching production screenshot design
|
||||
- Dual card+row HTML structure (article.tablo-card-wrapper with .project-card and .tablo-list-row siblings)
|
||||
- Status badge top-left, delete button top-right, avatar initial, progress bar
|
||||
- New CSS classes in app.css and regenerated tailwind.css
|
||||
affects: [19-03]
|
||||
|
||||
# Tech tracking
|
||||
tech-stack:
|
||||
added: []
|
||||
patterns:
|
||||
- dual-element wrapper with display:contents — transparent to grid/flex layout
|
||||
- title-case status via strings.ToUpper(s[:1]) + s[1:] (strings.Title is deprecated)
|
||||
- project-card-progress-bar with var(--color-accent) override for dashboard cards (D-11)
|
||||
|
||||
key-files:
|
||||
created: []
|
||||
modified:
|
||||
- backend/templates/tablos.templ
|
||||
- backend/internal/web/ui/app.css
|
||||
- backend/static/tailwind.css
|
||||
|
||||
key-decisions:
|
||||
- "Used display:contents on .tablo-card-wrapper so it is transparent to both grid and flex-column layouts (RESEARCH.md pitfall 4)"
|
||||
- "Separate .project-card-progress-bar class overrides --project-color with var(--color-accent) per D-11"
|
||||
- "Removed pencil/edit-title icon button from dashboard card — production screenshot shows delete only (top-right)"
|
||||
- "Both card .tablo-delete-zone and list-row .tablo-delete-zone use identical HTMX attributes for consistency"
|
||||
|
||||
# Metrics
|
||||
duration: 10min
|
||||
completed: 2026-05-17
|
||||
---
|
||||
|
||||
# Phase 19 Plan 02: Tablo List Revamp — Card Visual Revamp Summary
|
||||
|
||||
**Rebuilt TabloProjectCard with status badge, avatar initial, progress bar, and dual card+row HTML; added CSS for progress row, list row, and data-view toggle; regenerated tailwind.css**
|
||||
|
||||
## Performance
|
||||
|
||||
- **Duration:** ~10 min
|
||||
- **Started:** 2026-05-17T17:00:00Z
|
||||
- **Completed:** 2026-05-17T17:10:00Z
|
||||
- **Tasks:** 2
|
||||
- **Files modified:** 3
|
||||
|
||||
## Accomplishments
|
||||
|
||||
- `TabloProjectCard` rebuilt to match production screenshot (ssidebar-header.png): status badge (top-left), delete button (top-right), colored avatar circle with initial letter, title, calendar icon + date, "Progression: X%" label + accent-colored progress bar
|
||||
- Outer `article.tablo-card-wrapper` wraps both `.project-card` (grid view) and `.tablo-list-row` (list view) as siblings — single HTMX root element preserved for OOB swaps (RESEARCH.md pitfall 4)
|
||||
- Added `strconv` and `strings` imports to `tablos.templ` for `strconv.Itoa(card.Progress)` and `strings.ToUpper` title-casing
|
||||
- Status badge uses `ui.Badge` with `BadgeVariantPrimary` and title-cased DB value
|
||||
- New CSS Section 20b in `app.css`: `.project-card-progress-row`, `.project-card-progress-label`, `.project-card-progress-bar` (accent color), `.tablo-card-wrapper` (display:contents), `.tablo-list-row`, `.tablo-list-row-title`, `.tablo-list-row-meta`, and `[data-view="list"]` toggle rules
|
||||
- `static/tailwind.css` regenerated with all new class names
|
||||
|
||||
## Task Commits
|
||||
|
||||
Each task was committed atomically:
|
||||
|
||||
1. **Task 1: Rebuild TabloProjectCard template with dual card+row output** — `4b254e9` (feat)
|
||||
2. **Task 2: Add progress-row and list-row CSS to app.css, rebuild Tailwind** — `2b786e2` (feat)
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
- `backend/templates/tablos.templ` — TabloProjectCard rebuilt with dual structure, imports updated
|
||||
- `backend/internal/web/ui/app.css` — Section 20b added after Section 20
|
||||
- `backend/static/tailwind.css` — Regenerated output containing all new class names
|
||||
|
||||
## Decisions Made
|
||||
|
||||
- `display:contents` on `.tablo-card-wrapper` makes the wrapper invisible to grid and flex layouts — children participate directly (no wrapper override needed when toggling data-view)
|
||||
- Removed pencil/edit-title button from dashboard card (not in production screenshot); delete-only top-right layout matches design
|
||||
- `.project-card-progress-bar` is a separate class from `.project-progress-bar` to allow `var(--color-accent)` override without touching the existing bar class used elsewhere
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None — plan executed exactly as written.
|
||||
|
||||
## Self-Check: PASSED
|
||||
|
||||
- `backend/templates/tablos.templ` — exists and modified
|
||||
- `backend/internal/web/ui/app.css` — contains `tablo-list-row` (4 occurrences), `project-card-progress-row` (1), `tablo-card-wrapper` (1)
|
||||
- `backend/static/tailwind.css` — contains `tablo-list-row` (1)
|
||||
- `go build ./...` — exits 0
|
||||
- `templ generate ./...` — exits 0
|
||||
- `grep -c "ui.Badge" backend/templates/tablos.templ` — returns 5 (2 in TabloProjectCard + existing in TabloDetailPage)
|
||||
- `grep -c "project-card-progress-row" backend/templates/tablos.templ` — returns 1
|
||||
|
||||
---
|
||||
*Phase: 19-tablo-list-revamp*
|
||||
*Completed: 2026-05-17*
|
||||
Loading…
Reference in a new issue