Repository navigation
feat(web): show projects as tiles or as a list, by the person's choice - #146
Conversation
The Projects page showed tiles only. A toggle in its header switches to one line per project, with the name, stage, last activity and menu; the choice is kept in this browser like the other preferences.
The page's body was one nested ternary; a change inside it counts as adding one.
![corbits-triage[bot]](https://avatars.githubusercontent.com/u/275831056?s=60&v=4){kind=small}
There was a problem hiding this comment.
Triage requests changes:
- Conventions: added code matches a code pattern
apps/web/src/pages/project-library.tsx:213-312 nested-ternary: Nested ternary; use if statements or a lookup.apps/web/src/pages/project-library.tsx:217-312 nested-ternary: Nested ternary; use if statements or a lookup.
|
Triage: Pass No changes needed from you. A maintainer will review this pull request. Approve held: code review has 1 finding at P2 or above open on this head. |
| flex-direction: row; | ||
| align-items: center; | ||
| gap: var(--space-3); | ||
| padding: var(--space-2) var(--space-10) var(--space-2) var(--space-3); |
There was a problem hiding this comment.
P2 · Undefined --space-10 removes all row padding, so the menu button covers the meta text
styles.css defines only --space-1..6, 8 and 12, so --space-10 does not exist. Because the var() has no fallback, the whole padding declaration is invalid when computed and falls back to 0. The row button then has no padding at all, including no right-hand space for the absolutely positioned menu, so the menu sits on top of the stage badge and last-activity text at the end of the line.
Switch the Projects page to the list view (data-view="rows").
Resolve this comment. Triage will not finish while it is open.
--space-10 is not defined, so the row's padding fell to nothing and the menu button covered the stage and last activity.
| .library-page .library-grid[data-view="rows"] .library-card-meta { | ||
| flex-wrap: nowrap; | ||
| padding-right: 0; | ||
| white-space: nowrap; | ||
| } |
There was a problem hiding this comment.
P3 · In list view on narrow screens, the project name shrinks to nothing because the meta line cannot shrink
The stage badge and the 'Active …' time are kept on one line (flex-wrap: nowrap; white-space: nowrap) and have no way to shrink, so they always take their full width. The name is the only part that gives way (flex: 1; min-width: 0). The list has no media query to fall back on, so on a narrow screen the name is cut down to just an ellipsis, or the meta runs past the card edge and is clipped.
Turn on list view at a phone width (about 360px). Roughly 240px is left after the padding, swatch and gaps, and the badge plus 'Active 3 days ago' fill most of it.
Resolve this comment. Triage will not finish while it is open.
Closes #145
What
The Projects page shows projects as tiles or as a list of one line each, by a toggle in its header, and keeps the choice in this browser.
Why
Tiles only, with no way to choose; with many projects a list is quicker to scan. Details in #145.
Changes
apps/web/src/library-view-setting.ts: the choice (gridorrows) underbuilder-library-viewthroughstored-preference.ts, tiles until the person chooses.apps/web/src/pages/project-library.tsx: a two-button toggle in the header (pressed state, each button named for assistive tech), anddata-viewon the list.apps/web/src/pages/project-library.css: the list layout: one row per project with a small swatch of its cover, the name, stage and last activity on one line, and the menu at the end.apps/web/src/config.ts: the toggle's wording.library-view-setting.test.tscovers what is read back.