Jamie Sorensen · Skim coat
464 Pine Ct, Maple Grove
The list itself: a card that holds only data. Its header finds and narrows (add filter, search, the date range, display settings); a second row holds the count and the filter chips once something is set. Then the table, then a footer with the range and more rows. Rows open with one click (D30); "···" acts.
Desktop
Sorted by last activity. One row ticked (blue), one open beside the list (cement, with the accent edge).
| Actions | ||||||
|---|---|---|---|---|---|---|
Draft | HMHana Morales (you) | Today | No price yet | |||
Ingrid Ferreira · Blown-in insulation 732 Elm Ave, Maple Grove | Booked | DODana Okafor | Yesterday | $14,930.05 | ||
Reese Ashby · Popcorn ceiling removal 30 Pine Ct, Maple Grove | Declined | HMHana Morales (you) | 2 days ago | $10,821.37 | ||
Alex Galloway · Fire-rated walls 650 Orchard Ln, Cedar Falls | Pending | TCTaylor Calloway | 5 days ago | $7,485.47 |
Showing 1–4 of 64
Phones: rows with four corners
Below 768 a row becomes an item (D32): the number and a date on a quiet overline, the amount top right, the name across the full width at 16px (it wraps to two lines rather than being cut), then where and the status. No checkbox column: Select, or a long press, starts selecting. This frame is the live list page.
Kinds (D50, D53)
What a row holds, as a column of small icons: a vendor order's labor (hard hat) and materials (box). A concept that recurs across Bolster and matters, so it has a column of its own; on phones the icons lead the row's overline. A row's icons share one tooltip that names them together, “Labor and materials” (D52), in the icons' order; the record says the same in words.
| Vendor order | Contains |
|---|---|
ABC Supply VEN-1132 · Blown-in insulation | |
Lowe's VEN-1131 · Spray foam |
Anatomy
| Part | Class | Notes |
|---|---|---|
| Card | .card.list-panel | Holds only data; clips its corners. |
| Header | .list-toolbar | Sticks under the page header. Add filter, a bare search field, the date range, a rule, display settings (toolbar.css). |
| Chips | .chip[data-active] | Unset: dashed with a plus. Set: solid, the field and its value, and a separate remove button (chip.css). |
| Columns | th[style=inline-size] | Widths come from the headers, never the rows, so sorting or loading never moves a column. Every header keeps room for its sort arrow. |
| Name cell | .cell-main | An avatar, the name (a link over the whole row), the detail line. Words a person recognises first; codes on the detail line (L-name-first). |
| Phone slots | td[data-m] | title, trail (the key figure), badge, sub (a date), and the phone-only over and where cells. |
| Footer | .list-foot | The range shown and more rows; they also load as you scroll. |