67 lines
3.5 KiB
Markdown
67 lines
3.5 KiB
Markdown
# TweakDrag -- board drag, touch and column-gap tweaks
|
|
|
|
A Kanboard plugin that groups board dragging and spacing tweaks, configurable under
|
|
"Settings -> Tweak Drag":
|
|
|
|
- **Drag the board background to scroll** (desktop) -- click and drag on the empty board
|
|
background to scroll the columns sideways, like the Trello board canvas.
|
|
- **Widen the gap between columns** -- spread the columns further apart, easier to tell
|
|
apart and to touch.
|
|
- **Mobile drag handle size** -- enlarge the card drag handle Kanboard shows on mobile so
|
|
it is easy to grab with a finger.
|
|
- **Drag auto-scroll** -- while dragging a card, the board scrolls when the pointer nears a
|
|
screen edge, so you can reach a column that is off screen (desktop and mobile).
|
|
|
|
These options were originally part of the ShrinkVertically plugin and moved here so that
|
|
drag/touch behaviour can grow on its own (planned: mobile drag-to-move cards, and a drag
|
|
movement threshold so ending a drag does not open the task) without bloating that plugin.
|
|
|
|
## How it works
|
|
|
|
- **Drag to scroll**: a small script (`Asset/js/drag-scroll.js`, loaded only when the
|
|
option is on) starts a horizontal pan on `#board-container` only when the press lands on
|
|
empty background -- pressing a task card, a drag handle or any control is ignored, so
|
|
Kanboard's own card and column drag-and-drop keep working unchanged.
|
|
- **Column gap**: the board is a table, so the gap is set with `border-spacing` (injected
|
|
in the page head from `Template/layout/variable.php` only when the option is on), sized
|
|
by the `--td-column-gap` CSS variable. This spreads the columns without shrinking the
|
|
cards and keeps each column header aligned with its list. It also adds some spacing at
|
|
the left and right edges of the board.
|
|
- **Mobile drag handle size**: Kanboard already supports dragging cards on mobile, but only
|
|
via a small handle (a FontAwesome `fa-arrows-alt` glyph it reveals on touch devices) that
|
|
is hard to grab. FontAwesome icons are sized by `font-size`, so a single rule scales the
|
|
handle from the `--td-handle-size` CSS variable. It is inert on desktop, where Kanboard
|
|
keeps the handle hidden.
|
|
- **Drag auto-scroll**: a script (`Asset/js/drag-autoscroll.js`) listens for jQuery UI
|
|
sortable's `sortstart`/`sortstop` (which also fire on touch via Kanboard's bundled Touch
|
|
Punch) and, while a card drag is active, scrolls `#board-container` when the pointer nears
|
|
its left/right edge. Speed ramps up smoothly toward the edge. After each scroll step it
|
|
dispatches a synthetic `mousemove` so jQuery UI moves the drop placeholder onto the newly
|
|
revealed column. It only acts during an active drag, so it is idle otherwise.
|
|
|
|
## Requirements
|
|
|
|
- Kanboard >= 1.2.0
|
|
|
|
## Installation
|
|
|
|
Copy this folder into your Kanboard installation as `plugins/TweakDrag/`. The directory
|
|
name must be exactly `TweakDrag` (Kanboard derives the plugin namespace from the folder
|
|
name). No build step and no database migration.
|
|
|
|
## Settings
|
|
|
|
These settings are global (per Kanboard instance) and admin-only. Go to
|
|
"Settings -> Tweak Drag":
|
|
|
|
- **Column gap in pixels** -- width of the column gap (`--td-column-gap`). Default: 25.
|
|
- **Widen the gap between columns** -- toggles the wider gap. Default: on.
|
|
- **Drag the board background to scroll horizontally** -- toggles the Trello-style
|
|
click-and-drag panning. Desktop (mouse) for now. Default: on.
|
|
- **Mobile drag handle size in pixels** -- size of the mobile card drag handle
|
|
(`--td-handle-size`). No effect on desktop. Default: 20.
|
|
|
|
## License
|
|
|
|
AGPL-3.0. See LICENSE.
|