¿Cómo puedo cambiar el tamaño del ancho de columna de la lista en Trello?

29

¿Cómo se redimensiona el ancho de columna de una lista en Trello?

Deborah Wright
fuente

Respuestas:

23

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á.

Pi Delport
fuente
¡Esto es genial! ¿Cree que podría ingresar el número a través de un indicador de JavaScript para que el usuario pueda decidir en el momento en que se hace clic en el marcador?
Alfa
Seguro: Sustituir el 500con algo como: prompt('List width?', '500').
Pi Delport
Gracias, espero que no te importe, pero también agregué eso a tu respuesta para hacerlo aún más completo.
Alfa el
1
Actualización menor al código de marcador: las tarjetas en sí no se redimensionaron (su ancho se limitó a 300 px con la propiedad css de ancho máximo en la clase .list-card). 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))
antonlitvinenko
1
Un bookmarklet más simple que funciona el 2 de diciembre de 2016:javascript javascript:(function() { $('.list-card').width('490px');$('.list-wrapper').width('500px');$('.list-card').css('max-width', '470px'); })();
jmgarnier
5

Para ampliar los detalles de la tarjeta , puede usar este script-bookmark:

javascript:(function(w) { 
$('.window').css('width', w+'px');
$('.window-main-col').css('width', (w-184)+'px');
})(prompt("New Width? (default 730)", 1030))

Para mí, agregar 300px se ve mucho mejor en pantallas Full-HD

Robar
fuente
1

Esta es una respuesta ligeramente actualizada ya que Trello ahora establece el diseño de la lista del tablero en display: flexlugar de display: block, por lo que el widthgiro 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.

var newWidth = 400;
var cardNewHeight = 40;
function enforceNewWidth() {
  (function(w) {
      $('.list').css({flex: '0 0 ' + w + 'px'});

      // updated 2015-04-01
      $('.list').css('max-width', w + 'px');

      $('.list-card').css('max-width', w + 'px');
      $('.list-card').css('min-height', cardNewHeight + 'px');
      // $('.list-area').width($('.list').length * (w+12));  // 12px inter-list spacing    
      $('textarea.list-card-composer-textarea').css({width: (w - 40) + 'px'});
  })(newWidth);
}

enforceNewWidth();

var observer = new MutationObserver(function(mutations) {
  enforceNewWidth();
});

observer.observe(document, {childList: true, subtree: true});
KS.Pan
fuente
1

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:

  1. presione Ctrl + '-' hasta que obtenga el ancho de lista deseado (es probable que todas las listas quepan en la pantalla)
  2. ahora el texto es probablemente bastante pequeño, así que abra el inspector de elementos y edite el CSS para .list-card-title y aumente el tamaño de la fuente (agregué 'font-size: larger;' y parecía ser suficiente).
  3. (opcional) si ve que las 'g' y tales faltan en su parte inferior, es posible que desee agregar algunos píxeles de relleno inferior (agregué 10).

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.

Catalina Predoi
fuente
0

Esta no es una opción disponible, por lo que los anchos de las columnas en Trello son fijos.

insomniak29
fuente
0

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

user1007074
fuente
1
¿Cómo resuelve esto el problema? ¿Puedes al menos vincular a la herramienta que estás recomendando?
cerveza
Esta extensión resolvió el problema para mí. Votantes abajo, por favor revisiten, el OP ahora ha agregado un enlace y esta es una respuesta útil.
yoyo
Esto solo reduce el ancho y no me parece configurable.
volvox