growth until hit maximum feature bloat, now decoupling into TweakDrag new plugin

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

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);
+        $barSize = (int) $this->configModel->get('shrink_vertically_bar_size', self::DEFAULT_BAR_SIZE);
-        $dragScroll = (int) $this->configModel->get('shrink_vertically_drag_scroll', 0);
+        $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 {

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()

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
+- **Vertical offset in pixels** -- pixels reserved around the collapsed columns. Injected
-  the Kanboard configuration and injected in the page head as the `--sv-shrink-offset` CSS
+  in the page head as the `--sv-shrink-offset` CSS variable. Increase it if the scrollbar
-  variable. Increase it if the scrollbar is still clipped (for example with a taller theme
+  is still clipped (for example with a taller theme header); decrease it to make the
-  header); decrease it to make the collapsed columns taller. Default: 240.
+  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
 

Template/config/show.php

@@ -14,16 +14,17 @@
     </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) ?>
+        <?= $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('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.') ?>
+            <?= t('Thickness of the top horizontal scrollbar (Chromium/WebKit browsers only). Default: 25.') ?>
         </p>
     </fieldset>
 
     <fieldset>
-        <?= $this->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) ?>
+        <?= $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('Like Trello: click and drag on the empty board background to scroll the columns sideways. Dragging a task card or a handle still works as usual.') ?>
+            <?= 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>
 

Template/layout/variable.php

@@ -1,3 +1,9 @@
 <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;
+    }
+<?php if ((int) $this->app->config('shrink_vertically_column_gap', 1) === 1): ?>
+    #board { border-collapse: separate !important; border-spacing: var(--sv-bar-size, 25px) 0 !important; }
+<?php endif ?>
 </style>