4 Commits

5 changed files with 85 additions and 20 deletions

View File

@@ -28,15 +28,17 @@
* max-height alone does nothing. A stylesheet !important overrides the inline
* (non-important) min-height so max-height can win.
*
* We override it to a small NON-ZERO value, not 0: Kanboard relies on that same inline
* We override it to a NON-ZERO value, not 0: Kanboard relies on that same inline
* min-height to keep EMPTY columns tall enough to be a drop target, so zeroing it makes
* you unable to drop a card into an empty collapsed column. 100px clears Kanboard's 70px
* drag placeholder (.draggable-placeholder) with margin, and stays well below max-height
* so tall columns still shrink; non-empty columns are unaffected (their content is taller).
* you unable to drop a card into an empty collapsed column. 250px gives a comfortable drop
* target (well above Kanboard's 70px .draggable-placeholder) while staying below the
* collapsed max-height, so the board never overflows the viewport (which would re-hide the
* horizontal scrollbar). Non-empty columns are unaffected -- their content is taller -- and
* short columns simply get this min-height, which is only cosmetic (no scrollbar).
*/
#board td .board-task-list.board-task-list-compact {
max-height: calc(100vh - var(--sv-shrink-offset, 240px)) !important;
min-height: 100px !important;
min-height: 250px !important;
}
/*

View File

@@ -26,6 +26,10 @@
// Keep the thumb wide enough to grab, even on a very wide board.
var MIN_THUMB = 24;
// Ignore a few px of residual overflow (padding / sub-pixel rounding) so a board that visually
// fits is treated as "no horizontal scroll" instead of showing an immovable near-full thumb.
var FIT_TOLERANCE = 4;
function getContainer() {
return document.getElementById("board-container");
}
@@ -74,17 +78,29 @@
thumb.style.transform = "translateX(" + Math.round(left) + "px)";
}
// Recompute thumb width/position; hide the whole bar when nothing to scroll.
// The board needs scrolling only if its content exceeds the viewport by more than the
// tolerance (absorbs a residual px or two so a fitting board reads as "no scroll").
function needsScroll(m) {
return m && m.content - m.viewport > FIT_TOLERANCE;
}
// Recompute the thumb. The (light) track stays visible for a STABLE height; when the board
// fits, just drop the knob (thumb width 0) so it reads as "nothing to scroll" without the
// layout jump that hiding the whole bar would cause.
function layout() {
var m = metrics();
if (!m || m.content <= m.viewport || m.trackW <= 0) {
track.style.display = "none";
if (!m || m.trackW <= 0) {
return;
}
track.style.display = "";
if (!needsScroll(m)) {
thumb.style.width = "0px";
return;
}
var thumbW = Math.round(m.trackW * m.viewport / m.content);
if (thumbW < MIN_THUMB) { thumbW = MIN_THUMB; }
if (thumbW > m.trackW) { thumbW = m.trackW; }
@@ -99,6 +115,7 @@
if (c && c.parentNode && track.nextSibling !== c) {
c.parentNode.insertBefore(track, c);
}
observeSizes();
}
// Board scrolled by any other means -> keep the thumb in sync. Capture-phase on
@@ -107,7 +124,7 @@
if (dragging) { return; }
if (e.target !== getContainer()) { return; }
var m = metrics();
if (!m || m.content <= m.viewport) { return; }
if (!needsScroll(m)) { return; }
positionThumb(m, thumb.offsetWidth);
}, true);
@@ -153,7 +170,7 @@
track.addEventListener("pointerdown", function (e) {
if (e.target === thumb || dragging) { return; }
var m = metrics();
if (!m || m.content <= m.viewport) { return; }
if (!needsScroll(m)) { return; }
var thumbW = thumb.offsetWidth;
var maxThumb = m.trackW - thumbW;
@@ -169,18 +186,48 @@
positionThumb(m, thumbW);
});
window.addEventListener("resize", layout);
// Single source of truth for recomputing the thumb: a ResizeObserver on the container
// (viewport) and #board (content). It fires exactly when the width settles/changes -- the
// right moment -- which also fixes the stale thumb from the first layout() running before the
// board finished sizing. Both are replaced on a board refresh, so re-observe the current ones
// (from reattachTrack). Without ResizeObserver, fall back to a window resize listener.
var sizeObserver = window.ResizeObserver ? new ResizeObserver(function () { layout(); }) : null;
var observedContainer = null;
var observedBoard = null;
// Observe the STABLE parent so we keep working after #board-container is replaced by
// a card move / AJAX polling; re-seat the track and recompute sizes on any change.
if (window.MutationObserver) {
new MutationObserver(function () {
reattachTrack();
function observeSizes() {
if (!sizeObserver) {
layout();
}).observe(boardParent, { childList: true, subtree: true });
return;
}
layout();
var c = getContainer();
var b = document.getElementById("board");
if (c && c !== observedContainer) {
if (observedContainer) { sizeObserver.unobserve(observedContainer); }
sizeObserver.observe(c);
observedContainer = c;
}
if (b && b !== observedBoard) {
if (observedBoard) { sizeObserver.unobserve(observedBoard); }
sizeObserver.observe(b);
observedBoard = b;
}
}
if (!sizeObserver) {
window.addEventListener("resize", layout);
}
// Re-seat the track and re-observe after #board-container is replaced by a card move / AJAX
// polling (we watch the STABLE parent, since the container itself is swapped out).
if (window.MutationObserver) {
new MutationObserver(reattachTrack).observe(boardParent, { childList: true, subtree: true });
}
observeSizes();
}
if (document.readyState === "loading") {

View File

@@ -51,7 +51,7 @@ class Plugin extends Base
public function getPluginVersion()
{
return '1.4.2';
return '1.5.2';
}
public function getPluginHomepage()

View File

@@ -94,3 +94,19 @@ These settings are global (per Kanboard instance) and admin-only. Go to
## 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.

View File

@@ -1 +1 @@
ShrinkVertically v1.4.2
ShrinkVertically v1.5.2