Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5560c42bcc | |||
| 86f40ff6ae | |||
| 89292492db | |||
| f0d9974a31 |
@@ -28,15 +28,17 @@
|
|||||||
* max-height alone does nothing. A stylesheet !important overrides the inline
|
* max-height alone does nothing. A stylesheet !important overrides the inline
|
||||||
* (non-important) min-height so max-height can win.
|
* (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
|
* 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
|
* you unable to drop a card into an empty collapsed column. 250px gives a comfortable drop
|
||||||
* drag placeholder (.draggable-placeholder) with margin, and stays well below max-height
|
* target (well above Kanboard's 70px .draggable-placeholder) while staying below the
|
||||||
* so tall columns still shrink; non-empty columns are unaffected (their content is taller).
|
* 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 {
|
#board td .board-task-list.board-task-list-compact {
|
||||||
max-height: calc(100vh - var(--sv-shrink-offset, 240px)) !important;
|
max-height: calc(100vh - var(--sv-shrink-offset, 240px)) !important;
|
||||||
min-height: 100px !important;
|
min-height: 250px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|||||||
@@ -26,6 +26,10 @@
|
|||||||
// Keep the thumb wide enough to grab, even on a very wide board.
|
// Keep the thumb wide enough to grab, even on a very wide board.
|
||||||
var MIN_THUMB = 24;
|
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() {
|
function getContainer() {
|
||||||
return document.getElementById("board-container");
|
return document.getElementById("board-container");
|
||||||
}
|
}
|
||||||
@@ -74,17 +78,29 @@
|
|||||||
thumb.style.transform = "translateX(" + Math.round(left) + "px)";
|
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() {
|
function layout() {
|
||||||
var m = metrics();
|
var m = metrics();
|
||||||
|
|
||||||
if (!m || m.content <= m.viewport || m.trackW <= 0) {
|
if (!m || m.trackW <= 0) {
|
||||||
track.style.display = "none";
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
track.style.display = "";
|
track.style.display = "";
|
||||||
|
|
||||||
|
if (!needsScroll(m)) {
|
||||||
|
thumb.style.width = "0px";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var thumbW = Math.round(m.trackW * m.viewport / m.content);
|
var thumbW = Math.round(m.trackW * m.viewport / m.content);
|
||||||
if (thumbW < MIN_THUMB) { thumbW = MIN_THUMB; }
|
if (thumbW < MIN_THUMB) { thumbW = MIN_THUMB; }
|
||||||
if (thumbW > m.trackW) { thumbW = m.trackW; }
|
if (thumbW > m.trackW) { thumbW = m.trackW; }
|
||||||
@@ -99,6 +115,7 @@
|
|||||||
if (c && c.parentNode && track.nextSibling !== c) {
|
if (c && c.parentNode && track.nextSibling !== c) {
|
||||||
c.parentNode.insertBefore(track, c);
|
c.parentNode.insertBefore(track, c);
|
||||||
}
|
}
|
||||||
|
observeSizes();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Board scrolled by any other means -> keep the thumb in sync. Capture-phase on
|
// Board scrolled by any other means -> keep the thumb in sync. Capture-phase on
|
||||||
@@ -107,7 +124,7 @@
|
|||||||
if (dragging) { return; }
|
if (dragging) { return; }
|
||||||
if (e.target !== getContainer()) { return; }
|
if (e.target !== getContainer()) { return; }
|
||||||
var m = metrics();
|
var m = metrics();
|
||||||
if (!m || m.content <= m.viewport) { return; }
|
if (!needsScroll(m)) { return; }
|
||||||
positionThumb(m, thumb.offsetWidth);
|
positionThumb(m, thumb.offsetWidth);
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
@@ -153,7 +170,7 @@
|
|||||||
track.addEventListener("pointerdown", function (e) {
|
track.addEventListener("pointerdown", function (e) {
|
||||||
if (e.target === thumb || dragging) { return; }
|
if (e.target === thumb || dragging) { return; }
|
||||||
var m = metrics();
|
var m = metrics();
|
||||||
if (!m || m.content <= m.viewport) { return; }
|
if (!needsScroll(m)) { return; }
|
||||||
|
|
||||||
var thumbW = thumb.offsetWidth;
|
var thumbW = thumb.offsetWidth;
|
||||||
var maxThumb = m.trackW - thumbW;
|
var maxThumb = m.trackW - thumbW;
|
||||||
@@ -169,18 +186,48 @@
|
|||||||
positionThumb(m, thumbW);
|
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
|
function observeSizes() {
|
||||||
// a card move / AJAX polling; re-seat the track and recompute sizes on any change.
|
if (!sizeObserver) {
|
||||||
if (window.MutationObserver) {
|
|
||||||
new MutationObserver(function () {
|
|
||||||
reattachTrack();
|
|
||||||
layout();
|
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") {
|
if (document.readyState === "loading") {
|
||||||
|
|||||||
@@ -51,7 +51,7 @@ class Plugin extends Base
|
|||||||
|
|
||||||
public function getPluginVersion()
|
public function getPluginVersion()
|
||||||
{
|
{
|
||||||
return '1.4.2';
|
return '1.5.2';
|
||||||
}
|
}
|
||||||
|
|
||||||
public function getPluginHomepage()
|
public function getPluginHomepage()
|
||||||
|
|||||||
16
README.md
16
README.md
@@ -94,3 +94,19 @@ These settings are global (per Kanboard instance) and admin-only. Go to
|
|||||||
## License
|
## License
|
||||||
|
|
||||||
AGPL-3.0. See 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.
|
||||||
|
|||||||
Reference in New Issue
Block a user