Comment puis-je redimensionner la largeur de colonne de la liste dans Trello?

Comment redimensionnez-vous la largeur de colonne d'une liste dans Trello?

Dans l'implémentation actuelle de Trello, cela n'est pas configurable: les listes sont dimensionnées par programme pour avoir une largeur comprise entre 300 et 210 pixels en fonction de l'espace disponible.

Cependant, si cela ne vous dérange pas un peu, vous pouvez prendre les choses en main, avec du 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)

(Remplacez le 500 par la largeur de pixel souhaitée.)

Vous pouvez l'exécuter sur la console de votre navigateur, ou l'enregistrer en tant que bookmarklet suivant , pour cliquer à chaque fois que vous souhaitez un peu plus de largeur:

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

Modifier : Une autre option pour que le bookmarklet vous demande la taille réelle souhaitée est:

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

Cela ne validera pas la réponse, donc si vous entrez quelque chose qui n'est pas un nombre, cela ne fonctionnera pas.

Pour élargir les détails de la carte , vous pouvez utiliser ce script de signet:

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

Pour moi, ajouter 300 pixels semble beaucoup mieux sur les écrans Full HD

Ceci est une réponse légèrement mis à jour Trello maintenant définir la mise en page de la liste du conseil d'administration à la display: flexplace de display: block, de sorte que la widthtorsion ne fonctionnera plus.

A également noté que les tentes Trello pour injecter le style à chaque nouvelle carte créée. par conséquent, il peut être judicieux de créer un observateur et de surveiller les modifications DOM de la page, afin d'appliquer le changement de style à tout moment.

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

J'essayais de rendre les listes plus étroites parce que mon tableau actuel en contient beaucoup et pour presque toutes la tuile était d'environ 75% de la largeur de la carte (en fait, je pense que je pourrais encore obtenir une majorité si je comptais seulement ceux dont le titre est inférieur à 50% de la largeur de la carte).

J'ai essayé le script JS suggéré ici (pas le dernier cependant) et bien qu'il ait effectivement réduit les listes, il n'a pas éliminé l'écart nouvellement formé entre eux. Donc, je suis venu avec cette primitive, mais la façon de faire "le truc":

1. appuyez sur Ctrl + '-' jusqu'à ce que vous obteniez la largeur de liste souhaitée (c'est probablement lorsque toutes les listes correspondent à l'écran)
2. maintenant le texte est probablement assez petit alors ouvrez l'inspecteur d'éléments et éditez le css pour .list-card-title et augmentez la taille de la police (j'ai ajouté 'font-size: larger;' et cela semblait être suffisant).
3. (facultatif) si vous voyez les 'g et autres manquant leur partie inférieure, vous voudrez peut-être ajouter quelques pixels de remplissage inférieur (j'ai ajouté 10).

L'inverse (Zoom avant et réduire le texte) peut fonctionner si vous souhaitez augmenter la largeur des listes.

Comme je l'ai déjà dit, ce n'est probablement pas la bonne façon de gérer les choses, mais cela m'a donné le résultat que je voulais et c'est rapide.

Ce n'est pas une option disponible et donc les largeurs des colonnes dans Trello sont fixes.

Il existe maintenant un module complémentaire pour Chrome appelé "Slim Lists for Trello" disponible sur le Web Store:

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

1. Téléchargez l' extension Pro4Trello Free Chrome

2. Cochez la case "Appliquer le CSS personnalisé" et ajoutez ceci:

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

Firefox a maintenant un module complémentaire pour cela: Trello Super Powers .