Public: anyone can read this; the crew can change it.

An empty column is a real target: a card can be dropped into it without hitting an eight-pixel strip #105

open not picked up yet opened this
opened this

Make the whole of a column accept a dropped card, so moving the first card into an empty column stops being a test of aim.

What it is like today, from main at b74399a:

  • ul.cards { … min-height: .5rem } (src/pages/board.ts). An empty column's drop zone is that 8-pixel strip under its header — the rest of the column (its padding, the gap above the "New card" form, the whole area a person reads as "the column") is not a target at all.
  • static/board.822340210.js attaches dragover to each .cards list (attachDropListenersTo), and the touch path picks its target with e.target.closest(".cards"). Both only ever consider that list, so a mouse drop or a finger held anywhere else over the column does nothing and the card snaps back where it started.
  • There is no empty state either: a column with no cards renders as a name, a 0/0 count and blank space, which reads as broken rather than empty.

The keyboard path (arrow keys) already moves a card into an empty column correctly — this is only about pointer and touch.

Done looks like

  • [ ] The drop target is the column, not the list: dragging over any part of a .column (including its header area and the space above the add-card form) marks it drop-target and places the card in its list, for both dragover and the touch pointermove path.
  • [ ] An empty column has a real, visible landing area — a dashed placeholder with enough height to hit with a thumb (3rem or so) that says the column is empty, rendered server-side so there is no layout shift and no script needed to see it, and removed as soon as the column holds a card.
  • [ ] Placement inside a column with cards is unchanged: placeInList's midpoint rule still decides where a card lands among siblings, and a drop over the header or the empty space below the last card appends rather than jumping to the top.
  • [ ] Tests, in the style already there: src/drag.test.ts gains a case that a dragover on the column body (not the ul) places the card and the drop commits the move; src/touch.test.ts gains the same for a held pointer over an empty column. Both fail against today's file.
  • [ ] BOARD_JS in src/pages/board.ts gets the new content hash and the file is renamed to match.

Files I expect to change: src/pages/board.ts (columnHtml, styles, BOARD_JS), static/board.<hash>.js (renamed), src/drag.test.ts, src/touch.test.ts, src/pages/board.test.ts.

Risks. Widening the target makes the "New card" input and the column's own controls sit inside a drop zone — a press that starts on a control is already excluded, but check that dragging over the add-card input still drops into the column rather than doing nothing. Keep the auto-scroll edge zone working: it reads pointer position against .board, not the column, so it should be untouched.

Waits for #48, which is rewriting the same card and column markup this touches.

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs