Roadmap Kanban Columns Features Block for Vue

Edit SHIPPED, BUILDING and IDEAS at the top of the file. Shipped cards take an ago string, Building cards a percent, and ideas the votes from everyone else; the visitor's own vote is added on top. Every lane is sized for five cards (SLOTS), so the lanes stay equally tall. If you add a sixth, raise SLOTS and the lane's height together.

Each idea is placed by its rank: a function sorts the ideas by votes, and a CSS variable on each card sets its slot, so the card slides there with a transition on its translate. The cards stay in the same order in the page's source, so a card you are voting on keeps keyboard focus while it moves. The list is named "Ideas, most votes first", and a polite status line says where a card landed after each vote.

It adds one idea to the Considering lane, with your vote already on it, and then leaves: the new card takes its slot, fades in and receives focus on its vote button. The field takes up the lane's fifth slot until it is used, so adding a card changes nothing in the layout. Wire the submit to your own endpoint to keep the suggestion.

Each lane is a named section with a heading and a list. Each vote is a toggle button named "Vote for" and the idea's title, whose pressed state is announced. The progress bars are decorative and their percentage is in the text beside them. Every control has a visible focus ring.

A segmented control above the band switches between the three lanes. All three are stacked in the same cell and the inactive ones are invisible, so the block keeps the tallest lane's height and switching never shifts the page.

The header and band fade up once on load, and the cards slide when votes change. With reduced motion both are off: the cards jump to their new slots at once.