¿Cómo se redimensiona el ancho de columna de una lista en Trello?
29
En la implementación actual de Trello, esto no es configurable: las listas tienen un tamaño programático para tener entre 300 y 210 píxeles de ancho, dependiendo del espacio disponible.
Sin embargo, si no le importa un poco de pirateo, puede tomar el asunto en sus propias manos, con algo de JavaScript:
(function(w) {
$('.list').width(w);
$('.list-area').width($('.list').length * (w+12)); // 12px inter-list spacing
$('body').addClass('layout-horiz-scroll'); // force-enable horizontal scrolling
})(500)
(Sustituya el 500 con su propio ancho de píxel deseado).
Puede ejecutar esto en la consola de su navegador, o guardarlo como el siguiente marcador , para hacer clic cuando quiera un ancho más:
javascript:(function(w) { $('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(500)
Editar : Otra opción para que el marcador le solicite el tamaño real deseado es:
javascript:(function(w) { $('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(prompt("List width?", 500))
No validará la respuesta, por lo que si ingresa algo que no es un número, no funcionará.
500
con algo como:prompt('List width?', '500')
.javascript:(function(w) { $('.list-card').css('max-width', 'none');$('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(prompt("List width?", 500))
javascript javascript:(function() { $('.list-card').width('490px');$('.list-wrapper').width('500px');$('.list-card').css('max-width', '470px'); })();
Para ampliar los detalles de la tarjeta , puede usar este script-bookmark:
Para mí, agregar 300px se ve mucho mejor en pantallas Full-HD
fuente
Esta es una respuesta ligeramente actualizada ya que Trello ahora establece el diseño de la lista del tablero en
display: flex
lugar dedisplay: block
, por lo que elwidth
giro ya no funcionará.Además, señaló que las tiendas Trello inyectan el estilo a cada nueva tarjeta creada. por lo tanto, podría ser una buena idea crear un observador y monitorear cualquier cambio de DOM de la página, aplicar el cambio de estilo que tiene lugar en todo momento.
fuente
Intenté hacer las listas más angostas porque mi tablero actual tiene muchas y para casi todas las fichas tenían aproximadamente el 75% del ancho de la tarjeta (de hecho, creo que aún podría obtener una mayoría si solo contara los que tengan títulos inferiores al 50% del ancho de la tarjeta).
Probé el script JS sugerido aquí (aunque no el más reciente) y aunque efectivamente redujo las listas, no eliminó la brecha recién formada entre ellos. Entonces, se me ocurrió esta forma primitiva pero 'hace el truco' de hacerlo:
Lo contrario (acercar y reducir el texto) podría funcionar si desea aumentar el ancho de la lista.
Como dije antes, probablemente esta no sea la forma "adecuada" de manejar las cosas, pero me dio el resultado que quería y es rápido.
fuente
Esta no es una opción disponible, por lo que los anchos de las columnas en Trello son fijos.
fuente
Ahora hay un complemento para Chrome llamado "Slim Lists for Trello" disponible en la tienda web:
https://chrome.google.com/webstore/detail/slim-lists-for-trello/pjlejgbmijmafmobaofcgblpdbkaodod
fuente
Descargue la extensión Pro4Trello Free Chrome
Marque "Aplicar CSS personalizado" y agregue esto:
fuente
Firefox ahora tiene un complemento para esto: Trello Super Powers .
fuente