113 lines
5.1 KiB
Markdown
113 lines
5.1 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 scrollbar just above the columns.
|
|
|
|
It is a custom track + draggable thumb (`Asset/js/top-scrollbar.js`, loaded only when the
|
|
option is on), not a native scrollbar, so it renders and can be sized the same in every
|
|
browser (Chrome, Firefox, Safari) and on touch. Drag the thumb or click the track to move
|
|
the board; the thumb tracks the board when you scroll it by other means. Its thickness
|
|
follows the "Top Horizontal Scrollbar thickness" setting.
|
|
|
|
## 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 custom top
|
|
scrollbar (all browsers). 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.
|
|
|
|
## More Kanboard plugins by Ruben (drbeco)
|
|
|
|
All free and AGPL-3.0, at [code.beco.cc](https://code.beco.cc/beco):
|
|
|
|
- **[RecoReco](https://code.beco.cc/beco/RecoReco)** -- calendar-scheduled recurring cards (yearly,
|
|
monthly, weekly, daily), driven by the card due date.
|
|
- **[FinanceBuddy](https://code.beco.cc/beco/FinanceBuddy)** -- attach a money value (debit/credit
|
|
and installments) to cards, shown on the card and totalled per column.
|
|
- **[OrganonTweaks](https://code.beco.cc/beco/OrganonTweaks)** -- an umbrella of small
|
|
quality-of-life board tweaks: remove an empty column, always show the comment icon, emphasize due
|
|
dates, extra search keywords and shared board filters, and more.
|
|
- **[BulkMoveTasks](https://code.beco.cc/beco/BulkMoveTasks)** -- move every task from one board
|
|
column to another in a single action.
|
|
- **[TweakDrag](https://code.beco.cc/beco/TweakDrag)** -- board drag and touch niceties:
|
|
drag-to-scroll, a wider column gap, and smoother card dragging.
|