beco/ShrinkVertically
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

plugin focused on the vertical size and horizontal bars v1.3

Browse Source
This commit is contained in:
Ruben Carlo Benante
2026-07-01 09:45:30 -03:00
parent 51eba0ad5e
commit 9b78882835
5 changed files with 9 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
Asset/css/shrink-vertically.css
View File

@@ -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.
*/

75
Asset/js/drag-scroll.js
View File

@@ -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();
}
})();