[loggi-xzl] Harmonize history cards to consistent 1-row layout across all entry types #109

New issue

Closed

opened 2026-02-21 17:52:35 +01:00 by matthias · 0 comments

matthias commented

2026-02-21 17:52:35 +01:00

Owner

Bead ID: loggi-xzl
Type: task
Priority: P2
Status: closed
Close reason: Harmonized all three buildItem functions (timepoint, timerange, diary) to consistent 1-row 3-column layout: [type badge] [primary info — single truncated line] [actions]. Changes: (1) diary now uses flex items-center gap-3 like the others, (2) diary actions moved to separate rightmost column, (3) diary icon sizes fixed to h-5/w-5 sm:h-4/w-4, (4) all types show username inline as '· by username' only for other users via currentUsername comparison, (5) diary text shown as truncated single line instead of multi-line whitespace-pre-wrap, (6) timepoint note shown inline with date.

Why

The three entry types (timepoint, timerange, diary) each render history cards with different structures — different icon column styles, action button placement, icon sizes, alignment, and overall layout. This makes the UI feel inconsistent.

What

Unify all three buildItem functions to share the same 3-column, single-row layout:

[type badge] [primary info — single line] [actions]

Per-type specifics

Timepoint: colored icon box + formatDateFull(dt) + truncated note inline + username inline
Timerange: duration badge (already good) + start → end inline + username inline
Diary: colored icon box + formatDateFull(dt) + truncated text preview inline + username inline (full text visible on expand/edit only)

Harmonization checklist

All cards use flex items-center gap-3 (diary currently missing items-center)
Actions column is always a separate rightmost column (diary currently nests actions inside display)
Consistent action button icon sizes: h-5 w-5 sm:h-4 sm:w-4 across all types (diary currently uses h-4/h-3.5)
Username shown inline with · by username rather than on its own line
Secondary text (note / diary text) shown as a single truncated line via truncate class
No multi-line expansion in the card itself (edit mode still expands)
Hide by <username> when the record was created by the current user — only show it for records from other users (shared entries). Use window.LOGGI_ENTRY_CONFIG.currentUsername (already available) to compare against record.username.

Where

app/static/js/timepoint.js — buildTimepointItem()
app/static/js/timerange.js — buildHistoryItem()
app/static/js/diary.js — buildDiaryItem()
app/static/css/input.css — .record-item if any shared tweaks needed

Constraints

Must not break edit/cancel/save flows (each type stores data-attributes and rebuilds on cancel)
Must not break swipe-to-delete (relies on data-record-id on the card element)
Mobile touch targets for action buttons must remain ≥44px
Diary text truncation must use CSS only (truncate / line-clamp-1) — no JS trimming

**Bead ID:** `loggi-xzl` **Type:** task **Priority:** P2 **Status:** closed **Close reason:** Harmonized all three buildItem functions (timepoint, timerange, diary) to consistent 1-row 3-column layout: [type badge] [primary info — single truncated line] [actions]. Changes: (1) diary now uses flex items-center gap-3 like the others, (2) diary actions moved to separate rightmost column, (3) diary icon sizes fixed to h-5/w-5 sm:h-4/w-4, (4) all types show username inline as '· by username' only for other users via currentUsername comparison, (5) diary text shown as truncated single line instead of multi-line whitespace-pre-wrap, (6) timepoint note shown inline with date. --- ## Why The three entry types (timepoint, timerange, diary) each render history cards with different structures — different icon column styles, action button placement, icon sizes, alignment, and overall layout. This makes the UI feel inconsistent. ## What Unify all three `buildItem` functions to share the same 3-column, single-row layout: `[type badge] [primary info — single line] [actions]` ### Per-type specifics - **Timepoint**: colored icon box + `formatDateFull(dt)` + truncated note inline + username inline - **Timerange**: duration badge (already good) + `start → end` inline + username inline - **Diary**: colored icon box + `formatDateFull(dt)` + truncated text preview inline + username inline (full text visible on expand/edit only) ### Harmonization checklist - All cards use `flex items-center gap-3` (diary currently missing `items-center`) - Actions column is always a separate rightmost column (diary currently nests actions inside display) - Consistent action button icon sizes: `h-5 w-5 sm:h-4 sm:w-4` across all types (diary currently uses h-4/h-3.5) - Username shown inline with `· by username` rather than on its own line - Secondary text (note / diary text) shown as a single truncated line via `truncate` class - No multi-line expansion in the card itself (edit mode still expands) - **Hide `by <username>` when the record was created by the current user** — only show it for records from other users (shared entries). Use `window.LOGGI_ENTRY_CONFIG.currentUsername` (already available) to compare against `record.username`. ## Where - `app/static/js/timepoint.js` — `buildTimepointItem()` - `app/static/js/timerange.js` — `buildHistoryItem()` - `app/static/js/diary.js` — `buildDiaryItem()` - `app/static/css/input.css` — `.record-item` if any shared tweaks needed ## Constraints - Must not break edit/cancel/save flows (each type stores data-attributes and rebuilds on cancel) - Must not break swipe-to-delete (relies on `data-record-id` on the card element) - Mobile touch targets for action buttons must remain ≥44px - Diary text truncation must use CSS only (`truncate` / `line-clamp-1`) — no JS trimming

matthias closed this issue

2026-02-21 17:57:10 +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#109

No description provided.

Rows
Columns