Skip to content

Instantly share code, notes, and snippets.

@chrisfcarroll
Last active December 8, 2022 22:29
Show Gist options
  • Save chrisfcarroll/72af8356b189dbdaaaea to your computer and use it in GitHub Desktop.
Save chrisfcarroll/72af8356b189dbdaaaea to your computer and use it in GitHub Desktop.
// ==UserScript==
// @name Trello Wrap-n-Stack-To-Fit
// @namespace http://tampermonkey.net/
// @version 0.73
// @description Trello: Auto-wrap, stack and resize your Trello lists so they don't go offscreen. And kill that horizontal scroll-bar.
// @author chrisfcarroll
// @match https://trello.com/*
// @grant none
// ==/UserScript==
// jshint -W097
'use strict';
;(function(){
if(window.location.search.indexOf("nowrap=")>0){ $( window ).load( function(){$("#board").css('overflow-x','hidden');}) ; return;}
//
// --- parameters you can adjust. Do greasemonkey scripts do parameters? ----------
var allowHideBottomButShowAtLeastTopNCardsPerList= 1; // Don't wrap if it will result lists so short you can't see even 1 card
var allowHideBottomFractionOfLongList= 0.95; //Above 90% this rule will rarely override the TopNCardsPerList rule
var allowHideRightmostFractionOfList= 0.3;
var marginwanted= 4 /*pixels*/ ;
// ----------------------------------------
//
var lists, addlist, board, listwidth, allowOffRightEdgePixels;
var minCardHeight= 35 /*pixels*/ ;
function firstRun(){
//-------------------------
// definitions which must track trello changes
board= $("#board");
lists= $("#board .js-list");
addlist= $(".js-add-list");
//--------------------------
listwidth= lists.width() + 2 * marginwanted;
allowOffRightEdgePixels= listwidth * allowHideRightmostFractionOfList;
//console.log("Wrap-n-Stack : lists.length= ", lists.length);
board
.css('overflow-x','hidden')
.css('overflow-y','hidden')
; // .css('margin-left', -allowOffRightEdgePixels +'px');
lists
.css('margin', marginwanted + 'px')
; // lists.last()
// .css('margin-right', '-' + allowOffRightEdgePixels + 'px')
// .css('margin-left', (2* marginwanted + allowOffRightEdgePixels) + 'px');
addlist
.css('margin-top', marginwanted + 'px')
; // .css('margin-left', (2* marginwanted + allowOffRightEdgePixels) + 'px');
}
function wrapListsToFit(){
if(!lists || !lists.length){firstRun();}
var boardwidth= board.width();
var fittableColumns= Math.trunc( boardwidth / listwidth);
var rowwidth= listwidth * lists.length;
var rowspredicted=1;
if ( rowwidth > boardwidth + allowOffRightEdgePixels ){
rowspredicted= 1 + Math.trunc( (lists.length-1) / fittableColumns );
}
/*
console.log("----------------------------------------");
console.log("boardHeight: ", board.height());
console.log("boardwidth: ", boardwidth);
console.log("listwidth: ", listwidth);
console.log("fittableColumns: ", fittableColumns);
console.log("rowwidth: ", rowwidth);
*/
var fittableRows= fittableRowsGivenListHeight();
var heightpredicted= board.height() / fittableRows - marginwanted;
//console.log("fittableRows: ", fittableRows);
//console.log("heightpredicted: ", heightpredicted);
lists
.css('float', fittableRows>1 ? 'left' : 'initial')
.css('max-height', heightpredicted );
//
function fittableRowsGivenListHeight()
{
if(rowspredicted==1){return 1;}
//
var showAtLeastListHeightFraction= Math.max(0.001, 1 - allowHideBottomFractionOfLongList);
var visibleColumns= lists.slice(0,fittableColumns);
var heightOfTallestVisibleList= minCardHeight * Math.max(showAtLeastListHeightFraction, allowHideBottomButShowAtLeastTopNCardsPerList);
visibleColumns.each(function(i,l){
heightOfTallestVisibleList= Math.max(heightOfTallestVisibleList, listHeight(l))
});
var rowsPossible= Math.trunc(board.height()/ (heightOfTallestVisibleList*showAtLeastListHeightFraction + marginwanted ));
rowsPossible= Math.max(1, rowsPossible);
/*console.log("heightOfTallestVisibleList: ", heightOfTallestVisibleList);
console.log("rowspredicted: ", rowspredicted);
console.log("rowsPossible: ", rowsPossible);
*/
return Math.min(rowsPossible, rowspredicted);
function listHeight(list){
var cardsheight= 0 ;
$(".list-card",list).each(function(i,card){
cardsheight += $(card).height();
});
return cardsheight + $(".list-header",list).height() + $(".open-card-composer",list).height();
}
}
}
$( window ).load( wrapListsToFit ).resize(wrapListsToFit);
}());
@chrisfcarroll
Copy link
Author

GreaseMonkey / Tampermonkey script to stack Trello lists two-or-more-high when there are more columns than fit on the screen. And to kill the scroll-bar.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment