From e6479c9ed96e1c6a0f190b3c8aa7405da224169a Mon Sep 17 00:00:00 2001 From: Ruben Carlo Benante Date: Sun, 28 Jun 2026 17:03:17 -0300 Subject: [PATCH] menu css and wire --- Asset/css/shrink-vertically.css | 8 +++++--- Plugin.php | 8 +++++++- README.md | 21 ++++++++++++++------- 3 files changed, 26 insertions(+), 11 deletions(-) diff --git a/Asset/css/shrink-vertically.css b/Asset/css/shrink-vertically.css index 029ba1c..b4452f7 100644 --- a/Asset/css/shrink-vertically.css +++ b/Asset/css/shrink-vertically.css @@ -13,8 +13,10 @@ * breathing room). A fixed-px budget is more reliable than a proportional vh value * because that chrome is a fixed height regardless of screen size. * - * Tune the single number below (240px) if the scrollbar is still clipped or if you - * want the columns taller. + * The pixel budget is the --sv-shrink-offset CSS variable. It is injected in the + * page head from the plugin setting (Settings -> Shrink Vertically); when unset it + * falls back to 240px below. Increase it if the scrollbar is still clipped, or + * decrease it to make the columns taller. * * The selector is intentionally more specific than core's single-class rule, and * uses !important, so this override wins even alongside a theme (e.g. Essential). @@ -27,6 +29,6 @@ * (non-important) min-height, so we reset it to 0 and let max-height win. */ #board td .board-task-list.board-task-list-compact { - max-height: calc(100vh - 240px) !important; + max-height: calc(100vh - var(--sv-shrink-offset, 240px)) !important; min-height: 0 !important; } diff --git a/Plugin.php b/Plugin.php index 9b400e8..1caf471 100644 --- a/Plugin.php +++ b/Plugin.php @@ -14,11 +14,17 @@ class Plugin extends Base 'template' => 'plugins/ShrinkVertically/Asset/css/shrink-vertically.css', )); + // Inject the configured pixel offset as a CSS variable in the page head. + $this->template->hook->attach('template:layout:head', 'shrinkVertically:layout/variable'); + // Append a "+" to the two vertical-collapse menu labels so it is visible // that the behaviour is modified by this plugin. $this->hook->on('template:layout:js', array( 'template' => 'plugins/ShrinkVertically/Asset/js/shrink-vertically.js', )); + + // Add a "Shrink Vertically" entry to the Settings sidebar. + $this->template->hook->attach('template:config:sidebar', 'shrinkVertically:config/sidebar'); } public function getPluginName() @@ -38,7 +44,7 @@ class Plugin extends Base public function getPluginVersion() { - return '0.1.0'; + return '0.4.0'; } public function getPluginHomepage() diff --git a/README.md b/README.md index 01a4ff1..96e4f0e 100644 --- a/README.md +++ b/README.md @@ -25,13 +25,19 @@ list: ```css #board td .board-task-list.board-task-list-compact { - max-height: calc(100vh - 240px) !important; + max-height: calc(100vh - var(--sv-shrink-offset, 240px)) !important; + min-height: 0 !important; } ``` -The `240px` reserves room for the page header, the board column header, the horizontal +The offset reserves room for the page header, the board column header, the horizontal scrollbar, and a little breathing space. A fixed-pixel budget is more reliable than a -proportional value because that chrome is a fixed height regardless of screen size. +proportional value because that chrome is a fixed height regardless of screen size. It +defaults to `240px` and is configurable (see Settings below). + +The `min-height: 0` is essential: Kanboard's drag-and-drop sets an inline `min-height` on +each column equal to its full content height, and in CSS `min-height` beats `max-height`, +so without this reset the tall columns would never shrink. The override only applies while columns are collapsed (when core adds the `board-task-list-compact` class). It changes no data and runs no database migration. @@ -53,11 +59,12 @@ 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. -## Tuning +## Settings -Edit the single `240px` value in `Asset/css/shrink-vertically.css`. Increase it if the -scrollbar is still clipped (for example with a taller theme header); decrease it to make -the collapsed columns taller. +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. ## License