Jump to content

RefractTrack Board and List Views

From Pixel Refraction Studio
Revision as of 23:19, 27 August 2026 by Nerdofepic (talk | contribs) (Created page with "== Board and List Views == RefractTrack offers two ways to browse a project's tasks. === Board view === <code><nowiki>board.php</nowiki></code> shows tasks as cards in swimlanes, one lane per visible Stage in that project, in the order stages are configured. * '''Drag-and-drop''' (<code><nowiki>js/board.js</nowiki></code>) moves a task between stages. This calls the <code><nowiki>api/update_stage.php</nowiki></code> AJAX endpoint, which indepe...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Board and List Views

RefractTrack offers two ways to browse a project's tasks.

Board view

board.php shows tasks as cards in swimlanes, one lane per visible Stage in that project, in the order stages are configured.

  • Drag-and-drop (js/board.js) moves a task between stages. This calls the api/update_stage.php AJAX endpoint, which independently re-verifies that the dragged task's project matches the target stage's project before applying the move (rejecting mismatches rather than trusting the client).
  • Dropping a task into a stage flagged requires_assignee prompts for an assignee (an optional due-date prompt can also appear) before the move is committed — see Tasks.
  • Hidden stages (see Stages) don't get their own lane, but their tasks remain reachable from List view or the task detail page.

List view

list.php shows tasks in a sortable, filterable table rather than lanes — useful for scanning or filtering a large project by search text, sort order, group, assignee, or stage.

Switching projects while on List (or any other top-level project-scoped page) returns to the equivalent page on the new project rather than bouncing to the board — see "Switching projects" in Projects. View filters, however, are intentionally dropped on switch, since a filter like a specific stage could point at something meaningless in the new project.

Responsive layout

The site header (.topbar, in includes/header.php / css/style.css) is designed to stay usable at any width down to phone size with no horizontal scrollbar:

  • Below 900px, the nav links wrap onto extra rows instead of scrolling horizontally.
  • Below 600px, the whole topbar switches to a stacked column layout, with the brand, project switcher, nav links, Bulk Create/+New Task actions, and the user chip/logout each on their own full-width row.

The topbar uses position: sticky rather than fixed, so it growing taller at narrow widths simply pushes page content down instead of clipping or covering it.