From c6f7ee297b75295f327f289c97b5aa53fc36286b Mon Sep 17 00:00:00 2001
From: Ruben Carlo Benante <rcb@beco.cc>
Date: Wed, 1 Jul 2026 09:51:15 -0300
Subject: [PATCH] assets added css js

---
 Asset/css/tweak-drag.css | 26 ++++++++++++++
 Asset/js/drag-scroll.js  | 75 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 Asset/css/tweak-drag.css
 create mode 100644 Asset/js/drag-scroll.js

diff --git a/Asset/css/tweak-drag.css b/Asset/css/tweak-drag.css
new file mode 100644
index 0000000..c26e3d7
--- /dev/null
+++ b/Asset/css/tweak-drag.css
@@ -0,0 +1,26 @@
+/*
+ * TweakDrag -- board drag/touch and column-gap tweaks.
+ *
+ * The wider column gap is applied conditionally from Template/layout/variable.php (only
+ * when the "Widen the gap between columns" setting is on), using border-spacing with the
+ * --td-column-gap value, so it is not in this static stylesheet.
+ *
+ * Below: click-and-drag horizontal scrolling (added by Asset/js/drag-scroll.js when the
+ * "Drag the board background to scroll" setting is enabled). The .td-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.td-drag-scroll {
+    cursor: grab;
+}
+
+#board-container.td-drag-scroll .task-board {
+    cursor: default;
+}
+
+.td-grabbing,
+.td-grabbing * {
+    cursor: grabbing !important;
+    user-select: none !important;
+}
diff --git a/Asset/js/drag-scroll.js b/Asset/js/drag-scroll.js
new file mode 100644
index 0000000..a4040d1
--- /dev/null
+++ b/Asset/js/drag-scroll.js
@@ -0,0 +1,75 @@
+/*
+ * TweakDrag -- 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-td-drag") === "1") {
+            return;
+        }
+
+        container.setAttribute("data-td-drag", "1");
+        container.classList.add("td-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("td-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("td-grabbing");
+        }
+
+        document.addEventListener("mouseup", stop);
+        document.addEventListener("mouseleave", stop);
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", init);
+    } else {
+        init();
+    }
+})();