From 9b78882835e2b58ef5f90f6ba6972b2cafcad7be Mon Sep 17 00:00:00 2001 From: Ruben Carlo Benante Date: Wed, 1 Jul 2026 09:45:30 -0300 Subject: [PATCH] plugin focused on the vertical size and horizontal bars v1.3 --- Asset/css/shrink-vertically.css | 30 ------------- Asset/js/drag-scroll.js | 75 --------------------------------- README.md | 30 ++++--------- Template/layout/variable.php | 3 -- VERSION | 2 +- 5 files changed, 9 insertions(+), 131 deletions(-) delete mode 100644 Asset/js/drag-scroll.js diff --git a/Asset/css/shrink-vertically.css b/Asset/css/shrink-vertically.css index 955f4c3..ab0cc95 100644 --- a/Asset/css/shrink-vertically.css +++ b/Asset/css/shrink-vertically.css @@ -70,33 +70,3 @@ 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 - * is set on #board-container by the script, so these rules are inert when disabled. - * A grab cursor advertises the empty background; cards keep the normal cursor since - * pressing them does a card drag, not a pan. - */ -#board-container.sv-drag-scroll { - cursor: grab; -} - -#board-container.sv-drag-scroll .task-board { - cursor: default; -} - -.sv-grabbing, -.sv-grabbing * { - 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/Asset/js/drag-scroll.js b/Asset/js/drag-scroll.js deleted file mode 100644 index e245240..0000000 --- a/Asset/js/drag-scroll.js +++ /dev/null @@ -1,75 +0,0 @@ -/* - * ShrinkVertically -- optional click-and-drag horizontal scrolling of the board. - * - * Like the Trello board canvas: press the empty board background and drag left/right - * to scroll #board-container horizontally. The pan only starts on empty background -- - * pressing a task card, a drag handle, or any interactive control is ignored, so this - * never interferes with Kanboard's own card and column drag-and-drop. - * - * Loaded only when the "Drag the board background to scroll" setting is enabled. - */ -(function () { - "use strict"; - - // Pressing any of these (or their descendants) must NOT start a background pan. - var IGNORE = "a, button, input, textarea, select, label, " + - ".task-board, [data-task-id], .task-board-sort-handle, " + - ".draggable-row-handle, .dropdown, .ui-sortable-handle"; - - function isIgnored(el) { - return !!(el && el.closest && el.closest(IGNORE)); - } - - function init() { - var container = document.getElementById("board-container"); - - if (!container || container.getAttribute("data-sv-drag") === "1") { - return; - } - - container.setAttribute("data-sv-drag", "1"); - container.classList.add("sv-drag-scroll"); - - var dragging = false; - var startX = 0; - var startScrollLeft = 0; - - container.addEventListener("mousedown", function (e) { - // Left button only, and only on empty board background. - if (e.button !== 0 || isIgnored(e.target)) { - return; - } - - dragging = true; - startX = e.clientX; - startScrollLeft = container.scrollLeft; - container.classList.add("sv-grabbing"); - e.preventDefault(); - }); - - document.addEventListener("mousemove", function (e) { - if (!dragging) { - return; - } - container.scrollLeft = startScrollLeft - (e.clientX - startX); - e.preventDefault(); - }); - - function stop() { - if (!dragging) { - return; - } - dragging = false; - container.classList.remove("sv-grabbing"); - } - - document.addEventListener("mouseup", stop); - document.addEventListener("mouseleave", stop); - } - - if (document.readyState === "loading") { - document.addEventListener("DOMContentLoaded", init); - } else { - init(); - } -})(); diff --git a/README.md b/README.md index 1bc3779..6b3f276 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,13 @@ # ShrinkVertically -- keep the board horizontal scrollbar visible -A small Kanboard plugin focused on getting around the board horizontally. It fixes the -vertically-collapsed board view so the bottom scrollbar stays on screen, can optionally -add a second mirrored scrollbar above the columns, and can optionally let you drag the -board background to scroll (like Trello). Everything is configurable under +A small Kanboard plugin focused on the vertically-collapsed board view. It fixes the +collapse so the bottom horizontal scrollbar stays on screen, and can optionally add a +second mirrored scrollbar above the columns. Configurable under "Settings -> Shrink Vertically". +Board drag/touch and column-gap options that used to live here have moved to the separate +`TweakDrag` plugin. + ## The problem Kanboard's board gear menu has an "expand vertically / collapse vertically" toggle. When @@ -72,16 +74,6 @@ 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 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 -scroll the columns sideways, like the Trello board canvas. 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. - ## Settings These settings are global (per Kanboard instance) and admin-only. Go to @@ -91,16 +83,10 @@ These settings are global (per Kanboard instance) and admin-only. Go to 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. +- **Scrollbar thickness in pixels** -- thickness of the top scrollbar (Chromium/WebKit + only). 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. 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. Default: on. ## License diff --git a/Template/layout/variable.php b/Template/layout/variable.php index ae48227..16f504a 100644 --- a/Template/layout/variable.php +++ b/Template/layout/variable.php @@ -3,7 +3,4 @@ --sv-shrink-offset: app->config('shrink_vertically_offset', 240) ?>px; --sv-bar-size: app->config('shrink_vertically_bar_size', 25) ?>px; } -app->config('shrink_vertically_column_gap', 1) === 1): ?> - #board { border-collapse: separate !important; border-spacing: var(--sv-bar-size, 25px) 0 !important; } - diff --git a/VERSION b/VERSION index 542e71e..43dc84c 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -ShrinkVertically v1.2 +ShrinkVertically v1.3