72 lines
2.8 KiB
Markdown
72 lines
2.8 KiB
Markdown
# 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.
|
|
|
|
## The problem
|
|
|
|
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 - var(--sv-shrink-offset, 240px)) !important;
|
|
min-height: 0 !important;
|
|
}
|
|
```
|
|
|
|
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. 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.
|
|
|
|
## Menu labels
|
|
|
|
So it is obvious the collapsed behaviour comes from this plugin and not from core, a
|
|
small script (via `template:layout:js`) appends a `+` to the two gear-menu items, so they
|
|
read "Collapse vertically+" and "Expand vertically+". It only edits the rendered link
|
|
text, so it works in any locale.
|
|
|
|
## Requirements
|
|
|
|
- Kanboard >= 1.2.0
|
|
|
|
## Installation
|
|
|
|
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.
|
|
|
|
## 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.
|
|
|
|
## License
|
|
|
|
AGPL-3.0. See LICENSE.
|