From 51eba0ad5e2912c6fab726b506808928aca3e510 Mon Sep 17 00:00:00 2001 From: Ruben Carlo Benante Date: Wed, 1 Jul 2026 09:42:51 -0300 Subject: [PATCH] growth until hit maximum feature bloat, now decoupling into TweakDrag new plugin --- Asset/css/shrink-vertically.css | 31 +++++++++++++++++++++++++++++++ Controller/ConfigController.php | 16 +++++++++++----- Plugin.php | 11 ++--------- README.md | 23 +++++++++++++++-------- Template/config/show.php | 9 +++++---- Template/layout/variable.php | 8 +++++++- 6 files changed, 71 insertions(+), 27 deletions(-) diff --git a/Asset/css/shrink-vertically.css b/Asset/css/shrink-vertically.css index fb9b002..955f4c3 100644 --- a/Asset/css/shrink-vertically.css +++ b/Asset/css/shrink-vertically.css @@ -49,6 +49,28 @@ height: 1px; } +/* + * Make the top scrollbar thick enough to grab easily (touch / big fingers). + * WebKit/Blink (most desktop browsers and mobile Chrome/Safari) let us size the + * scrollbar; styling the thumb/track is needed for it to stay visible once customised. + * Thickness comes from the --sv-bar-size variable (Settings -> Shrink Vertically), + * injected in the page head; falls back to 25px. Chromium/WebKit only (Chrome/Edge/ + * Safari, mobile Chrome/Safari); Firefox ignores ::-webkit-scrollbar and keeps its + * default thin bar -- accepted for now. + */ +.sv-top-scroll::-webkit-scrollbar { + height: var(--sv-bar-size, 25px); +} + +.sv-top-scroll::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.05); +} + +.sv-top-scroll::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.35); + border-radius: 6px; +} + /* * Click-and-drag horizontal scrolling (added by Asset/js/drag-scroll.js when the * "Drag the board background to scroll" setting is enabled). The .sv-drag-scroll class @@ -69,3 +91,12 @@ cursor: grabbing !important; user-select: none !important; } + +/* + * Wider gutter between board columns is applied conditionally from + * Template/layout/variable.php (only when the "Widen the gap between columns" setting is + * on), using border-spacing with the --sv-bar-size value. border-spacing is the natural + * control for the gap between table columns: it spreads them without shrinking the cards + * and keeps each column header aligned with its task list. It is not in this static + * stylesheet so it can be toggled per the setting. + */ diff --git a/Controller/ConfigController.php b/Controller/ConfigController.php index 9c9ce91..6ce6618 100644 --- a/Controller/ConfigController.php +++ b/Controller/ConfigController.php @@ -14,18 +14,22 @@ class ConfigController extends BaseController const MIN_OFFSET = 0; const MAX_OFFSET = 2000; + const DEFAULT_BAR_SIZE = 25; + const MIN_BAR_SIZE = 0; + const MAX_BAR_SIZE = 200; + public function show() { $offset = (int) $this->configModel->get('shrink_vertically_offset', self::DEFAULT_OFFSET); - $topScrollbar = (int) $this->configModel->get('shrink_vertically_top_scrollbar', 0); - $dragScroll = (int) $this->configModel->get('shrink_vertically_drag_scroll', 0); + $barSize = (int) $this->configModel->get('shrink_vertically_bar_size', self::DEFAULT_BAR_SIZE); + $topScrollbar = (int) $this->configModel->get('shrink_vertically_top_scrollbar', 1); $this->response->html($this->helper->layout->config('shrinkVertically:config/show', array( 'title' => t('Settings').' > '.t('Shrink Vertically'), 'values' => array( 'shrink_vertically_offset' => $offset, + 'shrink_vertically_bar_size' => $barSize, 'shrink_vertically_top_scrollbar' => $topScrollbar, - 'shrink_vertically_drag_scroll' => $dragScroll, ), 'errors' => array(), ))); @@ -38,13 +42,15 @@ class ConfigController extends BaseController $offset = isset($values['shrink_vertically_offset']) ? (int) $values['shrink_vertically_offset'] : self::DEFAULT_OFFSET; $offset = max(self::MIN_OFFSET, min(self::MAX_OFFSET, $offset)); + $barSize = isset($values['shrink_vertically_bar_size']) ? (int) $values['shrink_vertically_bar_size'] : self::DEFAULT_BAR_SIZE; + $barSize = max(self::MIN_BAR_SIZE, min(self::MAX_BAR_SIZE, $barSize)); + $topScrollbar = isset($values['shrink_vertically_top_scrollbar']) ? 1 : 0; - $dragScroll = isset($values['shrink_vertically_drag_scroll']) ? 1 : 0; if ($this->configModel->save(array( 'shrink_vertically_offset' => $offset, + 'shrink_vertically_bar_size' => $barSize, 'shrink_vertically_top_scrollbar' => $topScrollbar, - 'shrink_vertically_drag_scroll' => $dragScroll, ))) { $this->flash->success(t('Settings saved successfully.')); } else { diff --git a/Plugin.php b/Plugin.php index a1beb8a..c5fdcc5 100644 --- a/Plugin.php +++ b/Plugin.php @@ -27,18 +27,11 @@ class Plugin extends Base $this->template->hook->attach('template:config:sidebar', 'shrinkVertically:config/sidebar'); // Optional: a second, mirrored horizontal scrollbar above the board columns. - if ((int) $this->configModel->get('shrink_vertically_top_scrollbar', 0) === 1) { + if ((int) $this->configModel->get('shrink_vertically_top_scrollbar', 1) === 1) { $this->hook->on('template:layout:js', array( 'template' => 'plugins/ShrinkVertically/Asset/js/top-scrollbar.js', )); } - - // Optional: click-and-drag the board background to scroll horizontally. - if ((int) $this->configModel->get('shrink_vertically_drag_scroll', 0) === 1) { - $this->hook->on('template:layout:js', array( - 'template' => 'plugins/ShrinkVertically/Asset/js/drag-scroll.js', - )); - } } public function getPluginName() @@ -58,7 +51,7 @@ class Plugin extends Base public function getPluginVersion() { - return '1.1.0'; + return '1.3.0'; } public function getPluginHomepage() diff --git a/README.md b/README.md index daf4fd7..1bc3779 100644 --- a/README.md +++ b/README.md @@ -72,7 +72,7 @@ a second, mirrored scrollbar just above the columns. A small script strip above `#board-container` and keeps its scroll position in sync with the board both ways. -## Drag to scroll (optional) +## Drag to scroll on Desktop (optional) Kanboard has no way to pan the board by grabbing it; you must use the scrollbar. Enable "Drag the board background to scroll" to click and drag on the empty board background to @@ -84,16 +84,23 @@ keep working unchanged. ## Settings -Go to "Settings -> Shrink Vertically": +These settings are global (per Kanboard instance) and admin-only. Go to +"Settings -> Shrink Vertically": -- **Vertical offset in pixels** -- pixels reserved around the collapsed columns. Stored in - the Kanboard configuration and injected in the page head as the `--sv-shrink-offset` CSS - variable. Increase it if the scrollbar is still clipped (for example with a taller theme - header); decrease it to make the collapsed columns taller. Default: 240. +- **Vertical offset in pixels** -- pixels reserved around the collapsed columns. Injected + in the page head as the `--sv-shrink-offset` CSS variable. Increase it if the scrollbar + is still clipped (for example with a taller theme header); decrease it to make the + collapsed columns taller. Default: 240. +- **Scrollbar thickness and column gap in pixels** -- a single value that sets both the + thickness of the top scrollbar (Chromium/WebKit only) and the width of the column gap. + Injected as the `--sv-bar-size` CSS variable. Default: 25. - **Add a top horizontal scrollbar to the board** -- toggles the mirrored top scrollbar - described above. + described above. Default: on. +- **Widen the gap between columns** -- toggles the wider gap between board columns (sized + by the value above). Also adds some spacing at the left and right edges of the board. + Default: on. - **Drag the board background to scroll horizontally** -- toggles the Trello-style - click-and-drag panning described above. + click-and-drag panning described above. Default: on. ## License diff --git a/Template/config/show.php b/Template/config/show.php index 8fcec84..994c9fe 100644 --- a/Template/config/show.php +++ b/Template/config/show.php @@ -14,16 +14,17 @@
- form->checkbox('shrink_vertically_top_scrollbar', t('Add a top horizontal scrollbar to the board'), 1, isset($values['shrink_vertically_top_scrollbar']) && $values['shrink_vertically_top_scrollbar'] == 1) ?> + form->label(t('Scrollbar thickness in pixels'), 'shrink_vertically_bar_size') ?> + form->number('shrink_vertically_bar_size', $values, $errors) ?>

- +

- form->checkbox('shrink_vertically_drag_scroll', t('Drag the board background to scroll horizontally'), 1, isset($values['shrink_vertically_drag_scroll']) && $values['shrink_vertically_drag_scroll'] == 1) ?> + form->checkbox('shrink_vertically_top_scrollbar', t('Add a top horizontal scrollbar to the board'), 1, isset($values['shrink_vertically_top_scrollbar']) && $values['shrink_vertically_top_scrollbar'] == 1) ?>

- +

diff --git a/Template/layout/variable.php b/Template/layout/variable.php index 2b17551..ae48227 100644 --- a/Template/layout/variable.php +++ b/Template/layout/variable.php @@ -1,3 +1,9 @@