Como redimensionar a largura da coluna da lista no Trello?

29

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

Deborah Wright
fonte

Respostas:

23

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

Pi Delport
fonte
Isso é ótimo! Você acha que pode inserir o número por meio de um prompt de javascript, para que o usuário decida no momento em que o bookmarklet é clicado?
Alfa
Claro: Substitua o 500com algo como: prompt('List width?', '500').
Pi Delport 19/10/12
Obrigado, espero que você não se importe, mas acrescentei isso à sua resposta, para torná-la ainda mais completa.
Alpha
1
Atualização secundária no código do bookmarklet: os cartões em si não foram redimensionados (a largura foi limitada em 300px com a propriedade css de largura máxima na classe .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
Um bookmarklet simples que funciona em 02 de dezembro de 2016:javascript javascript:(function() { $('.list-card').width('490px');$('.list-wrapper').width('500px');$('.list-card').css('max-width', '470px'); })();
jmgarnier
5

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

Roubar
fonte
1

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});
KS.Pan
fonte
1

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.

Catalina Predoi
fonte
0

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

insomniak29
fonte
0

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

user1007074
fonte
1
Como isso resolve o problema? Você pode pelo menos vincular a ferramenta que está recomendando?
ale
Esta extensão resolveu o problema para mim. Os eleitores que se recusam a revisitar, o OP agora adicionou um link e esta é uma resposta útil.
yoyo
Isso reduz apenas a largura e não parece configurável para mim.
volvox
-1

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

Nadine
fonte