Jump to content

RefractTrack Board and List Views: Difference between revisions

From Pixel Refraction Studio
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..."
 
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Board and List Views ==
== Board and List Views ==


RefractTrack offers two ways to browse a project's tasks.
RefractTrack gives you two different ways to look at a project's tasks, depending on what you're trying to do.
 
[[File:RefractTrack_Board_View.png|border|center|700px|The board view, with tasks arranged in columns.]]


=== Board view ===
=== Board view ===


<code><nowiki>board.php</nowiki></code> shows tasks as cards in swimlanes, one lane per visible [[RefractTrack_Stages|Stage]] in that project, in the order stages are configured.
The board is the classic kanban layout — tasks as cards, arranged in columns (called [[RefractTrack_Stages|Stages]]) that represent steps in your workflow, like ''Not Started'', ''In Progress'', and ''Done''.


* '''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 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).
* '''Drag and drop''' a card to a different column to move it along. RefractTrack always double-checks the move makes sense before saving it, so you can't accidentally drop a task somewhere invalid.
* Dropping a task into a stage flagged <code><nowiki>requires_assignee</nowiki></code> prompts for an assignee (an optional due-date prompt can also appear) before the move is committed — see [[RefractTrack_Tasks|Tasks]].
* If you drop a task into a column that requires an assignee (In Progress and In Review, by default), you'll be prompted to pick one — and optionally set a due date before the move goes through.
* Hidden stages (see [[RefractTrack_Stages|Stages]]) don't get their own lane, but their tasks remain reachable from List view or the task detail page.
* Columns that have been hidden from the board (see [[RefractTrack_Stages|Stages]]) won't show up as lanes, but any tasks sitting in them are still fully reachable from the list view or the task's own page.


=== List view ===
=== List view ===


<code><nowiki>list.php</nowiki></code> 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.
The list view shows every task in a sortable, filterable table instead of columns handy for scanning a big project, or narrowing things down by search text, sort order, group, assignee, or column.


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 [[RefractTrack_Projects|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.
=== Works well on any screen ===


=== Responsive layout ===
The whole interface, including the navigation bar, is designed to adapt smoothly down to phone-sized screens — no awkward horizontal scrolling required, even on a small screen.
 
The site header (<code><nowiki>.topbar</nowiki></code>, in <code><nowiki>includes/header.php</nowiki></code> / <code><nowiki>css/style.css</nowiki></code>) 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 <code><nowiki>position: sticky</nowiki></code> rather than <code><nowiki>fixed</nowiki></code>, so it growing taller at narrow widths simply pushes page content down instead of clipping or covering it.


=== Related pages ===
=== Related pages ===
Line 31: Line 26:
* [[RefractTrack_Stages|Stages]]
* [[RefractTrack_Stages|Stages]]
* [[RefractTrack_Projects|Projects]]
* [[RefractTrack_Projects|Projects]]
[[Category:RefractTrack]]

Latest revision as of 22:42, 11 September 2026

Board and List Views

RefractTrack gives you two different ways to look at a project's tasks, depending on what you're trying to do.

The board view, with tasks arranged in columns.
The board view, with tasks arranged in columns.

Board view

The board is the classic kanban layout — tasks as cards, arranged in columns (called Stages) that represent steps in your workflow, like Not Started, In Progress, and Done.

  • Drag and drop a card to a different column to move it along. RefractTrack always double-checks the move makes sense before saving it, so you can't accidentally drop a task somewhere invalid.
  • If you drop a task into a column that requires an assignee (In Progress and In Review, by default), you'll be prompted to pick one — and optionally set a due date — before the move goes through.
  • Columns that have been hidden from the board (see Stages) won't show up as lanes, but any tasks sitting in them are still fully reachable from the list view or the task's own page.

List view

The list view shows every task in a sortable, filterable table instead of columns — handy for scanning a big project, or narrowing things down by search text, sort order, group, assignee, or column.

Works well on any screen

The whole interface, including the navigation bar, is designed to adapt smoothly down to phone-sized screens — no awkward horizontal scrolling required, even on a small screen.