diff --git a/Asset/css/tweak-drag.css b/Asset/css/tweak-drag.css
index c26e3d7..a64d8d6 100644
--- a/Asset/css/tweak-drag.css
+++ b/Asset/css/tweak-drag.css
@@ -24,3 +24,17 @@
cursor: grabbing !important;
user-select: none !important;
}
+
+/*
+ * Enlarge the mobile card drag handle so it is a usable touch target.
+ * Kanboard reveals the .task-board-sort-handle (a FontAwesome fa-arrows-alt glyph) only
+ * on mobile (isMobile.any) and restricts card dragging to it; by default the glyph is
+ * tiny and hard to grab with a finger. FontAwesome icons are sized by font-size, so this
+ * is a pure font-size bump; it is inert on desktop where the handle stays display:none.
+ * Size comes from the --td-handle-size variable (Settings -> Tweak Drag), injected in the
+ * page head; falls back to 20px.
+ */
+.task-board-sort-handle,
+.task-board-sort-handle i {
+ font-size: var(--td-handle-size, 20px);
+}
diff --git a/Controller/ConfigController.php b/Controller/ConfigController.php
index 8e4e6f4..20e983e 100644
--- a/Controller/ConfigController.php
+++ b/Controller/ConfigController.php
@@ -13,11 +13,16 @@ class ConfigController extends BaseController
const MIN_GAP_SIZE = 0;
const MAX_GAP_SIZE = 200;
+ const DEFAULT_HANDLE_SIZE = 20;
+ const MIN_HANDLE_SIZE = 8;
+ const MAX_HANDLE_SIZE = 200;
+
public function show()
{
$gapSize = (int) $this->configModel->get('tweakdrag_column_gap_size', self::DEFAULT_GAP_SIZE);
$columnGap = (int) $this->configModel->get('tweakdrag_column_gap', 1);
$dragScroll = (int) $this->configModel->get('tweakdrag_drag_scroll', 1);
+ $handleSize = (int) $this->configModel->get('tweakdrag_handle_size', self::DEFAULT_HANDLE_SIZE);
$this->response->html($this->helper->layout->config('tweakDrag:config/show', array(
'title' => t('Settings').' > '.t('Tweak Drag'),
@@ -25,6 +30,7 @@ class ConfigController extends BaseController
'tweakdrag_column_gap_size' => $gapSize,
'tweakdrag_column_gap' => $columnGap,
'tweakdrag_drag_scroll' => $dragScroll,
+ 'tweakdrag_handle_size' => $handleSize,
),
'errors' => array(),
)));
@@ -40,10 +46,14 @@ class ConfigController extends BaseController
$columnGap = isset($values['tweakdrag_column_gap']) ? 1 : 0;
$dragScroll = isset($values['tweakdrag_drag_scroll']) ? 1 : 0;
+ $handleSize = isset($values['tweakdrag_handle_size']) ? (int) $values['tweakdrag_handle_size'] : self::DEFAULT_HANDLE_SIZE;
+ $handleSize = max(self::MIN_HANDLE_SIZE, min(self::MAX_HANDLE_SIZE, $handleSize));
+
if ($this->configModel->save(array(
'tweakdrag_column_gap_size' => $gapSize,
'tweakdrag_column_gap' => $columnGap,
'tweakdrag_drag_scroll' => $dragScroll,
+ 'tweakdrag_handle_size' => $handleSize,
))) {
$this->flash->success(t('Settings saved successfully.'));
} else {
diff --git a/Plugin.php b/Plugin.php
index f20d5e3..a61b181 100644
--- a/Plugin.php
+++ b/Plugin.php
@@ -44,7 +44,7 @@ class Plugin extends Base
public function getPluginVersion()
{
- return '0.2.0';
+ return '0.3.0';
}
public function getPluginHomepage()
diff --git a/README.md b/README.md
index 30aaf44..814c52e 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,14 @@
# TweakDrag -- board drag, touch and column-gap tweaks
-A Kanboard plugin that groups board dragging and spacing tweaks. This first version
-provides two options, both configurable under "Settings -> Tweak Drag":
+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.
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
@@ -23,6 +25,11 @@ movement threshold so ending a drag does not open the task) without bloating tha
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.
## Requirements
@@ -43,6 +50,8 @@ These settings are global (per Kanboard instance) and admin-only. Go to
- **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
diff --git a/Template/config/show.php b/Template/config/show.php
index 3bac9d6..c52f00b 100644
--- a/Template/config/show.php
+++ b/Template/config/show.php
@@ -27,6 +27,14 @@
+
+