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

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

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

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

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});

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.

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

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

1. Descargue la extensión Pro4Trello Free Chrome

2. Marque "Aplicar CSS personalizado" y agregue esto:

   .list {
     width: 375px;
   }
   
   .list-wrapper {
     width: 375px;
   }
   

Firefox ahora tiene un complemento para esto: Trello Super Powers .