Applications board: columns that fold to one, a status choice with icons, and scrolling when a dragged card nears the edge #315

New issue

Closed

opened 2026-09-29 11:26:44 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-09-29 11:26:44 +00:00

Owner

From the interface review of 2026-09-29, for the board shape of Applications:

Scrolling at the edge. The board scrolls sideways by itself when the pointer comes near its left or right edge, above all while a card is being dragged to a column off screen.
The status on each card becomes Basecoat's select, with an icon per status (#301).
A horizontal accordion. Every column is open by default. Clicking a column's heading (Draft, say) folds the others away and shows only that column. This replaces filtering by status on the board.

What is there today

applications/partials/board.html has one column per open status, in a <c-scroll-box>. Each card has a status <select> that moves it (application_card.html:64), and a mouse can drag a card between columns (app.js). Settled statuses have no column.
The board shares the filter form above it with the table, status included (applications/partials/filters.html).

What to do, and what to keep

Folding without a script. A column's heading is a link to the board filtered to that status (?status=draft), which is what filtering by status does today. With a script, it folds the other columns in place and the address follows. The heading is a button with aria-expanded on its column, and going back to all the columns is one control, never a hunt for the heading that was clicked.
Edge scrolling only while dragging, with a mouse. The status select stays the way to move a card by keyboard, touch or screen reader. A board that scrolled by itself whenever the pointer passed near its edge would move under somebody reading it, and prefers-reduced-motion turns it off.
The status filter leaves the board's form once the columns do its job. The table keeps its own (#314).

Done when

Columns fold by mouse, by keyboard and without a script, with the folded state in the address. The status select has its icons. Edge scrolling works while dragging and is off under reduced motion. The browser suite covers each of these, with axe clean in both themes.

From the interface review of 2026-09-29, for the board shape of *Applications*: - **Scrolling at the edge.** The board scrolls sideways by itself when the pointer comes near its left or right edge, above all while a card is being dragged to a column off screen. - **The status** on each card becomes Basecoat's select, with an icon per status (#301). - **A horizontal accordion.** Every column is open by default. Clicking a column's heading (*Draft*, say) folds the others away and shows only that column. This replaces filtering by status on the board. ## What is there today - `applications/partials/board.html` has one column per open status, in a `<c-scroll-box>`. Each card has a status `<select>` that moves it (`application_card.html:64`), and a mouse can drag a card between columns (`app.js`). Settled statuses have no column. - The board shares the filter form above it with the table, status included (`applications/partials/filters.html`). ## What to do, and what to keep - **Folding without a script.** A column's heading is a link to the board filtered to that status (`?status=draft`), which is what filtering by status does today. With a script, it folds the other columns in place and the address follows. The heading is a button with `aria-expanded` on its column, and going back to all the columns is one control, never a hunt for the heading that was clicked. - **Edge scrolling only while dragging, with a mouse.** The status select stays the way to move a card by keyboard, touch or screen reader. A board that scrolled by itself whenever the pointer passed near its edge would move under somebody reading it, and `prefers-reduced-motion` turns it off. - **The status filter** leaves the board's form once the columns do its job. The table keeps its own (#314). ## Done when - Columns fold by mouse, by keyboard and without a script, with the folded state in the address. The status select has its icons. Edge scrolling works while dragging and is off under reduced motion. The browser suite covers each of these, with axe clean in both themes.

tiagoagueda added this to the 0.5.0 milestone

2026-09-29 11:26:44 +00:00

tiagoagueda added the

enhancement

accessibility

interface

labels

2026-09-29 11:26:44 +00:00

tiagoagueda referenced this issue

2026-09-29 11:26:45 +00:00

Choices in Basecoat's select: a flag beside a language or a country, an icon beside a kind, time zones grouped by continent #301

tiagoagueda referenced this issue