feat: two-line cards, responsive grid, real uniform font size
- ConversionResult: already two-line layout (value + label/symbol) - app.css: responsive grid (1/2/3 cols at <480/480-899/≥900px) - uniformFontSize.ts: JS-measured uniform font size per grid - config.ts: remove MIN_COLUMN_WIDTH, grid is now CSS-only - BACKLOG.md: remove resolved 'allow renaming unit/group IDs' item Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -15,15 +15,6 @@ In dark mode the "Clear" button text lightens on hover, giving visual feedback.
|
||||
mode and Dan mode it currently does nothing visible. Should have a matching subtle
|
||||
highlight (e.g. text darkens, underline appears, or border darkens).
|
||||
|
||||
### Admin: allow renaming unit and group IDs
|
||||
The edit forms do not currently expose the `id` field for existing units or groups.
|
||||
|
||||
- **Units:** straightforward — update `units[].id` and save.
|
||||
- **Groups:** update `groups[].id` and rewrite every `units[].group` reference in the
|
||||
same atomic `saveData()` call.
|
||||
|
||||
Validate that the new ID is unique and kebab-safe before committing in both cases.
|
||||
|
||||
### Admin: tooltips / descriptions for units
|
||||
Allow users to attach an optional `description` string to each unit. On the front end,
|
||||
show it as a tooltip when hovering over the unit name or symbol. A single `description`
|
||||
|
||||
@@ -11,12 +11,12 @@ export const FRACTIONAL_DIGITS: number = 8;
|
||||
|
||||
/**
|
||||
* Output grid layout configuration.
|
||||
* Grid uses CSS Grid repeat(auto-fill, minmax(MIN_COLUMN_WIDTH, 1fr)).
|
||||
* Column count is automatic — determined by available width ÷ (MIN_COLUMN_WIDTH + GRID_GAP).
|
||||
* Grid uses CSS media-query breakpoints for responsive column counts:
|
||||
* <480px → 1 column
|
||||
* 480–899px → 2 columns
|
||||
* ≥900px → 3 columns
|
||||
* See app.css .results-grid for the actual CSS.
|
||||
*/
|
||||
|
||||
/** Minimum tile width for the output grid. Controls automatic column count. */
|
||||
export const MIN_COLUMN_WIDTH: string = '160px';
|
||||
|
||||
/** Gap between output grid tiles. Used for both row and column gaps. */
|
||||
export const GRID_GAP: string = '1rem';
|
||||
|
||||
Reference in New Issue
Block a user