94 lines
3.9 KiB
Markdown
94 lines
3.9 KiB
Markdown
# ShrinkVertically -- keep the board horizontal scrollbar visible
|
|
|
|
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
|
|
|
|
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.
|
|
|
|
## 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
|
|
|
|
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.
|
|
- **Top Horizontal 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
|
|
|
|
AGPL-3.0. See LICENSE.
|