4 Commits

Author SHA1 Message Date
f7227eaef1 css rules changed 2026-06-28 16:37:36 -03:00
79b4a9a8f6 README first draft 2026-06-28 16:37:10 -03:00
e46a124bad plugin v0.2 2026-06-28 16:36:58 -03:00
248cfe201b reshaping first draft 2026-06-28 16:36:14 -03:00
11 changed files with 72 additions and 67 deletions

View File

@@ -0,0 +1,24 @@
/*
* ShrinkVertically -- keep the board's horizontal scrollbar visible when columns
* are vertically collapsed (gear menu "collapse vertically" / shortcut, which sets
* localStorage vertical_scroll=0 and adds the class .board-task-list-compact).
*
* Kanboard core sets: .board-task-list-compact { max-height: 90vh; }
* That 90vh is measured from the top of the viewport and ignores the page header
* above the board, so column + header together exceed the viewport and push the
* horizontal scrollbar below the fold.
*
* We instead reserve a fixed pixel budget for the chrome above and below the task
* list (page header + board column header + the horizontal scrollbar + a little
* 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 (120px) if the scrollbar is still clipped or if you
* want 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).
*/
#board td .board-task-list.board-task-list-compact {
max-height: calc(100vh - 120px) !important;
}

View File

@@ -1 +0,0 @@
/* Skeleton plugin styles -- add CSS here. Loaded via template:layout:css. */

View File

@@ -1 +0,0 @@
// Skeleton plugin script -- add JS here. Loaded via template:layout:js.

View File

View File

View File

View File

@@ -1,6 +1,6 @@
<?php
namespace Kanboard\Plugin\Skeleton;
namespace Kanboard\Plugin\ShrinkVertically;
use Kanboard\Core\Plugin\Base;
@@ -8,28 +8,21 @@ class Plugin extends Base
{
public function initialize()
{
// 1. Render a visible word at the top of every page (the demo output).
$this->template->hook->attach('template:layout:top', 'skeleton:layout/header');
// 2. Load the plugin stylesheet (currently empty -- proves the CSS hook fires).
// Inject a small CSS override that reduces the height of vertically
// collapsed board columns so the horizontal scrollbar stays visible.
$this->hook->on('template:layout:css', array(
'template' => 'plugins/Skeleton/Asset/css/skeleton.css',
));
// 3. Load the plugin script (currently empty -- proves the JS hook fires).
$this->hook->on('template:layout:js', array(
'template' => 'plugins/Skeleton/Asset/js/skeleton.js',
'template' => 'plugins/ShrinkVertically/Asset/css/shrink-vertically.css',
));
}
public function getPluginName()
{
return 'Skeleton';
return 'ShrinkVertically';
}
public function getPluginDescription()
{
return t('Reusable skeleton/template for building Kanboard plugins.');
return t('Shrink vertically-collapsed board columns so the horizontal scrollbar stays visible.');
}
public function getPluginAuthor()
@@ -44,7 +37,7 @@ class Plugin extends Base
public function getPluginHomepage()
{
return 'https://code.beco.cc/beco/kanboard-plugin-skeleton';
return 'https://code.beco.cc/beco/shrink-vertically';
}
public function getCompatibleVersion()

View File

@@ -1,19 +1,40 @@
# Skeleton -- a Kanboard plugin template
# ShrinkVertically -- keep the board horizontal scrollbar visible
A minimal, working Kanboard plugin that you copy and rename as the starting point for a
real plugin. By itself it does only one trivial thing: it renders the word "Skeleton" at
the top of every page. It changes no data and runs no database migration.
A tiny Kanboard plugin that fixes the vertically-collapsed board view so the bottom
horizontal scrollbar stays on screen.
## What it demonstrates
## The problem
- A complete `Plugin.php` registration class with all the metadata Kanboard shows in
Settings -> Plugins (name, description, author, version, homepage, compatible version).
- A template hook (`template:layout:top`) that injects a template into the page.
- Asset hooks (`template:layout:css` and `template:layout:js`) that load a stylesheet and
a script. They are empty for now but prove the injection path works -- handy when a real
plugin needs custom CSS or JS.
- The standard plugin directory layout, with stub folders (`Controller/`, `Model/`,
`Schema/`, `Locale/`, `Test/`) ready to grow into.
Kanboard's board gear menu has an "expand vertically / collapse vertically" toggle. When
collapsed, each column gets a limited height so the horizontal scrollbar sits closer.
Core implements this with a single rule:
```css
.board-task-list-compact { max-height: 90vh; }
```
That `90vh` is measured from the top of the viewport and does not account for the page
header above the board. So even when collapsed, the column plus the header together
exceed the viewport height and the horizontal scrollbar is pushed below the fold.
## The fix
This plugin injects one CSS rule (via the `template:layout:css` hook) that replaces the
proportional `90vh` with a fixed-pixel budget for the chrome above and below the task
list:
```css
#board td .board-task-list.board-task-list-compact {
max-height: calc(100vh - 120px) !important;
}
```
The `120px` 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.
It changes nothing else: no data, no JavaScript, no database migration. The override only
applies while columns are collapsed (when core adds the `board-task-list-compact` class).
## Requirements
@@ -21,45 +42,15 @@ the top of every page. It changes no data and runs no database migration.
## Installation
No build step and no dependencies.
Copy this folder into your Kanboard installation as `plugins/ShrinkVertically/`. The
directory name must be exactly `ShrinkVertically` (Kanboard derives the plugin namespace
from the folder name). Reload the board; no build step, no configuration.
1. Copy this folder into your Kanboard installation as `plugins/Skeleton/`.
2. Reload any page. The word "Skeleton" appears at the top.
3. Confirm it under Settings -> Plugins.
## Tuning
To uninstall, delete `plugins/Skeleton/`. Nothing else is left behind.
## Directory layout
```
Skeleton/
Plugin.php Registration and hook wiring (the only required file).
README.md
LICENSE AGPL-3.0.
Template/
layout/header.php The visible "Skeleton" word.
Asset/
css/skeleton.css Loaded via template:layout:css.
js/skeleton.js Loaded via template:layout:js.
Controller/ Stub for future request handlers.
Model/ Stub for future business logic / DB access.
Schema/ Stub for future database migrations.
Locale/ Stub for future translations (e.g. pt_BR/, fr_FR/).
Test/ Stub for future unit tests.
```
## How to fork this into a new plugin
1. Copy the folder and rename it, e.g. `plugins/MyPlugin/`. The folder name must match the
namespace and start with a capital letter.
2. In `Plugin.php`, change the namespace from `Kanboard\Plugin\Skeleton` to
`Kanboard\Plugin\MyPlugin`.
3. Update the metadata methods (`getPluginName`, `getPluginDescription`, `getPluginAuthor`,
`getPluginVersion`, `getPluginHomepage`, `getCompatibleVersion`).
4. Update the hook target paths: the lowercase prefix in `'skeleton:layout/header'` and the
`plugins/Skeleton/Asset/...` asset paths must match the new plugin name.
5. Replace `Template/layout/header.php` with your real template, or attach to a different
hook. See the Kanboard plugin hooks documentation for the full list of hook points.
Edit the single `120px` 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.
## License

View File

View File

@@ -1 +0,0 @@
<div class="skeleton-plugin-marker">Skeleton</div>

View File