[loggi-l6t] UX: Compact record list items with better visual separation #107

New issue

Closed

opened 2026-02-21 15:03:57 +01:00 by matthias · 0 comments

matthias commented

2026-02-21 15:03:57 +01:00

Owner

Bead ID: loggi-l6t
Type: task
Priority: P2
Status: closed
Close reason: Implemented compact record list items with better visual separation. Changes: (1) Added .record-item and .record-item-diary CSS classes in input.css with stronger background (oklch(var(--b2)/0.7)) and 3px colored left border, (2) Added .record-list-compact class with tighter 0.375rem gap, (3) Updated timepoint.js, timerange.js, and diary.js build functions to use new classes with entry COLOR as border-left accent, (4) Updated entry.html loading skeleton and #recordList container to use record-list-compact, (5) Updated swipe-container card background to oklch(var(--b2)) for consistency. All approaches use custom CSS to avoid Tailwind JS-purging issue. Tests pass, both themes work.

Why

The Recent tab's record items are hard to scan — they take up too much vertical space and blend into the page background, making individual entries hard to differentiate from each other and from the surrounding UI.

What

Two problems to fix:

Too much vertical space — cards use generous padding (p-3/p-4) and the list container has space-y-2 gaps. With date separators on top, the list feels airy/bloated when scrolling through many records.
Poor visual differentiation — bg-base-200/40 is nearly transparent against the b1 page background. The border-base-300 borders are subtle. Cards blend into the page and into each other.

Acceptance criteria

Record items are visually compact (reduced padding, tighter list gap)
Each record item is clearly distinguishable from the background (stronger fill or border)
Adjacent records are easy to tell apart (visible boundary between them)
No regression on mobile swipe-to-delete or edit forms
Works in both light (emerald) and dark (night) DaisyUI themes

Where

app/static/js/timepoint.js — buildTimepointItem() card classes
app/static/js/timerange.js — buildHistoryItem() card classes
app/static/js/diary.js — buildDiaryItem() card classes
app/templates/entry.html — #recordList container (space-y-2)
app/static/js/record-list.js — loading skeleton matches card style
app/static/css/input.css — if adding accent/border utility classes

Constraints

Keep it CSS/class-level changes — no structural HTML rework
Swipe-to-delete wraps cards in .swipe-container which sets border-radius: 1rem and background-color: oklch(var(--b1)) — card styling must stay compatible
The entry color is available in all three build functions via COLOR — could be used as a subtle left-border accent to further differentiate

**Bead ID:** `loggi-l6t` **Type:** task **Priority:** P2 **Status:** closed **Close reason:** Implemented compact record list items with better visual separation. Changes: (1) Added .record-item and .record-item-diary CSS classes in input.css with stronger background (oklch(var(--b2)/0.7)) and 3px colored left border, (2) Added .record-list-compact class with tighter 0.375rem gap, (3) Updated timepoint.js, timerange.js, and diary.js build functions to use new classes with entry COLOR as border-left accent, (4) Updated entry.html loading skeleton and #recordList container to use record-list-compact, (5) Updated swipe-container card background to oklch(var(--b2)) for consistency. All approaches use custom CSS to avoid Tailwind JS-purging issue. Tests pass, both themes work. --- ## Why The Recent tab's record items are hard to scan — they take up too much vertical space and blend into the page background, making individual entries hard to differentiate from each other and from the surrounding UI. ## What Two problems to fix: 1. **Too much vertical space** — cards use generous padding (`p-3`/`p-4`) and the list container has `space-y-2` gaps. With date separators on top, the list feels airy/bloated when scrolling through many records. 2. **Poor visual differentiation** — `bg-base-200/40` is nearly transparent against the `b1` page background. The `border-base-300` borders are subtle. Cards blend into the page and into each other. ### Acceptance criteria - Record items are visually compact (reduced padding, tighter list gap) - Each record item is clearly distinguishable from the background (stronger fill or border) - Adjacent records are easy to tell apart (visible boundary between them) - No regression on mobile swipe-to-delete or edit forms - Works in both light (emerald) and dark (night) DaisyUI themes ## Where - `app/static/js/timepoint.js` — `buildTimepointItem()` card classes - `app/static/js/timerange.js` — `buildHistoryItem()` card classes - `app/static/js/diary.js` — `buildDiaryItem()` card classes - `app/templates/entry.html` — `#recordList` container (`space-y-2`) - `app/static/js/record-list.js` — loading skeleton matches card style - `app/static/css/input.css` — if adding accent/border utility classes ## Constraints - Keep it CSS/class-level changes — no structural HTML rework - Swipe-to-delete wraps cards in `.swipe-container` which sets `border-radius: 1rem` and `background-color: oklch(var(--b1))` — card styling must stay compatible - The entry color is available in all three build functions via `COLOR` — could be used as a subtle left-border accent to further differentiate

matthias closed this issue

2026-02-21 15:24:00 +01:00

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

matthias/loggi#107

No description provided.

Rows
Columns