Como redimensionar a largura da coluna da lista no Trello?

Como você redimensiona a largura da coluna de uma lista no Trello?

Na implementação atual do Trello, isso não é configurável: as listas são programaticamente dimensionadas para ter entre 300–210 pixels de largura, dependendo do espaço disponível.

No entanto, se você não se importa com um hack, pode resolver o problema com suas próprias mãos, com algum 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)

(Substitua os 500 pela largura de pixel desejada).

Você pode executar isso no console do navegador ou salvá-lo como o seguinte bookmarklet , para clicar sempre que quiser mais largura:

javascript:(function(w) { $('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(500)

Editar : Outra opção para o bookmarklet solicitar o tamanho real desejado é:

javascript:(function(w) { $('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(prompt("List width?", 500))

Não validará a resposta, portanto, se você digitar algo que não é um número, não funcionará.

Para aumentar os detalhes do cartão , você pode usar este script de marcador:

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

Para mim, adicionar 300 pixels parece muito melhor em monitores Full-HD

Essa é uma resposta um pouco atualizada, já que o Trello agora define o layout da lista de quadros em display: flexvez de display: block, para que o widthtoque não funcione mais.

Além disso, observou que as barracas do Trello injetam o estilo em todos os novos cartões criados. portanto, pode ser uma boa ideia criar um observador e monitorar qualquer alteração de DOM da página, impor a alteração de estilo que ocorre o tempo todo.

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

Eu estava tentando tornar as listas mais estreitas porque meu quadro atual tem muitas delas e, para quase todas, o bloco tinha cerca de 75% da largura do cartão (na verdade, acho que ainda conseguiria a maioria se apenas contasse aqueles com títulos inferiores a 50% da largura do cartão).

Eu tentei o script JS sugerido aqui (embora não seja o mais recente) e, embora ele tenha tornado as listas mais estreitas, não eliminou a lacuna recém-formada entre eles. Então, eu vim com essa maneira primitiva, mas 'faz o truque' de fazê-lo:

1. pressione Ctrl + '-' até obter a largura desejada da lista (provavelmente quando todas as listas couberem na tela)
2. a essa altura, o texto provavelmente é bem pequeno, então abra o inspetor de elementos e edite o css para .list-card-title e aumente o tamanho da fonte (eu adicionei 'font-size: maior;' e parecia suficiente).
3. (opcional) se você vir os 'g's e sua parte inferior, poderá adicionar alguns pixels de preenchimento inferior (adicionei 10).

O oposto (ampliar e reduzir o texto) pode funcionar se você quiser aumentar a largura da lista.

Como eu disse antes, essa provavelmente não é a maneira 'correta' de lidar com as coisas, mas me deu o resultado que eu queria e é rápido.

Essa não é uma opção disponível e, portanto, as larguras das colunas no Trello são fixas.

Agora existe um complemento para o Chrome chamado "Slim Lists for Trello" disponível na Web Store:

https://chrome.google.com/webstore/detail/slim-lists-for-trello/pjlejgbmijmafmobaofcgblpdbkaodod

1. Faça o download da extensão Pro4Trello Free Chrome

2. Marque a opção "Aplicar CSS personalizado" e adicione:

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

O Firefox agora tem um complemento para isso: Trello Super Powers .