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

.gitignore

@@ -0,0 +1,2 @@
+PLAN-*
+

Asset/css/shrink-vertically.css

@@ -32,3 +32,41 @@
     max-height: calc(100vh - var(--sv-shrink-offset, 240px)) !important;
     min-height: 0 !important;
 }
+
+/*
+ * Optional top horizontal scrollbar (added by Asset/js/top-scrollbar.js when the
+ * "Add a top horizontal scrollbar" setting is enabled). The inner element is given a
+ * width equal to the board's scrollable width by the script; overflow-x: auto then
+ * produces a scrollbar whose range mirrors the board's own bottom scrollbar. The 1px
+ * inner height keeps the bar to just the scrollbar itself.
+ */
+.sv-top-scroll {
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.sv-top-scroll-inner {
+    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;
+}

Asset/js/top-scrollbar.js

@@ -0,0 +1,68 @@
+/*
+ * ShrinkVertically -- optional horizontal scrollbar above the board.
+ *
+ * Kanboard's board scrolls horizontally inside #board-container (overflow-x: auto),
+ * so the only horizontal scrollbar sits at the very bottom of the board. On a wide
+ * board you have to scroll all the way down to reach it. This adds a second, mirrored
+ * scrollbar just above the columns and keeps the two scroll positions in sync.
+ *
+ * Loaded only when the "Add a top horizontal scrollbar" setting is enabled.
+ */
+(function () {
+    "use strict";
+
+    function init() {
+        var container = document.getElementById("board-container");
+
+        // Only on the board, and never add it twice.
+        if (!container || document.querySelector(".sv-top-scroll")) {
+            return;
+        }
+
+        var bar = document.createElement("div");
+        bar.className = "sv-top-scroll";
+
+        var inner = document.createElement("div");
+        inner.className = "sv-top-scroll-inner";
+        bar.appendChild(inner);
+
+        container.parentNode.insertBefore(bar, container);
+
+        function sync() {
+            // Match the dummy bar's content width to the board's scrollable width
+            // so its scrollbar has the same range as the board's own scrollbar.
+            inner.style.width = container.scrollWidth + "px";
+        }
+
+        var lock = false;
+
+        bar.addEventListener("scroll", function () {
+            if (lock) { return; }
+            lock = true;
+            container.scrollLeft = bar.scrollLeft;
+            lock = false;
+        });
+
+        container.addEventListener("scroll", function () {
+            if (lock) { return; }
+            lock = true;
+            bar.scrollLeft = container.scrollLeft;
+            lock = false;
+        });
+
+        window.addEventListener("resize", sync);
+
+        // The board can be redrawn by the AJAX polling/refresh; keep the width current.
+        if (window.MutationObserver) {
+            new MutationObserver(sync).observe(container, { childList: true, subtree: true });
+        }
+
+        sync();
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", init);
+    } else {
+        init();
+    }
+})();

Controller/ConfigController.php

@@ -14,14 +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);
+        $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,
             ),
             'errors' => array(),
         )));
@@ -34,7 +42,16 @@ 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));
 
-        if ($this->configModel->save(array('shrink_vertically_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;
+
+        if ($this->configModel->save(array(
+            'shrink_vertically_offset' => $offset,
+            'shrink_vertically_bar_size' => $barSize,
+            'shrink_vertically_top_scrollbar' => $topScrollbar,
+        ))) {
             $this->flash->success(t('Settings saved successfully.'));
         } else {
             $this->flash->failure(t('Unable to save your settings.'));

Plugin.php

@@ -25,6 +25,13 @@ class Plugin extends Base
 
         // Add a "Shrink Vertically" entry to the Settings sidebar.
         $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', 1) === 1) {
+            $this->hook->on('template:layout:js', array(
+                'template' => 'plugins/ShrinkVertically/Asset/js/top-scrollbar.js',
+            ));
+        }
     }
 
     public function getPluginName()
@@ -44,7 +51,7 @@ class Plugin extends Base
 
     public function getPluginVersion()
     {
-        return '0.4.0';
+        return '1.3.0';
     }
 
     public function getPluginHomepage()

README.md

@@ -1,7 +1,12 @@
 # ShrinkVertically -- keep the board horizontal scrollbar visible
 
-A tiny Kanboard plugin that fixes the vertically-collapsed board view so the bottom
-horizontal scrollbar stays on screen.
+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
 
@@ -59,12 +64,29 @@ Copy this folder into your Kanboard installation as `plugins/ShrinkVertically/`.
 directory name must be exactly `ShrinkVertically` (Kanboard derives the plugin namespace
 from the folder name). Reload the board; no build step, no configuration.
 
+## Top horizontal scrollbar (optional)
+
+Kanboard's board scrolls horizontally inside `#board-container`, so its only horizontal
+scrollbar is at the very bottom of the board -- on a wide board you must scroll all the
+way down to move sideways. Enable "Add a top horizontal scrollbar" in the settings to get
+a second, mirrored scrollbar just above the columns. A small script
+(`Asset/js/top-scrollbar.js`, loaded only when the option is on) inserts a dummy scroll
+strip above `#board-container` and keeps its scroll position in sync with the board both
+ways.
+
 ## Settings
 
-Go to "Settings -> Shrink Vertically" to set the pixel offset. The value is 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.
+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. 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 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.
 
 ## License
 

Template/config/show.php

@@ -13,6 +13,21 @@
         </p>
     </fieldset>
 
+    <fieldset>
+        <?= $this->form->label(t('Scrollbar thickness in pixels'), 'shrink_vertically_bar_size') ?>
+        <?= $this->form->number('shrink_vertically_bar_size', $values, $errors) ?>
+        <p class="form-help">
+            <?= t('Thickness of the top horizontal scrollbar (Chromium/WebKit browsers only). Default: 25.') ?>
+        </p>
+    </fieldset>
+
+    <fieldset>
+        <?= $this->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) ?>
+        <p class="form-help">
+            <?= t('Adds a second horizontal scrollbar above the columns, mirrored with the board scrollbar, so you do not have to scroll to the bottom to move sideways.') ?>
+        </p>
+    </fieldset>
+
     <div class="form-actions">
         <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
     </div>

Template/layout/variable.php

@@ -1,3 +1,6 @@
 <style type="text/css">
-    :root { --sv-shrink-offset: <?= (int) $this->app->config('shrink_vertically_offset', 240) ?>px; }
+    :root {
+        --sv-shrink-offset: <?= (int) $this->app->config('shrink_vertically_offset', 240) ?>px;
+        --sv-bar-size: <?= (int) $this->app->config('shrink_vertically_bar_size', 25) ?>px;
+    }
 </style>

VERSION

@@ -1 +1 @@
-ShrinkVertically v0.4
+ShrinkVertically v1.3