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


29

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

Réponses:


23

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.


C'est bien! Pensez-vous que vous pourriez faire entrer le numéro via une invite javascript afin que l'utilisateur puisse décider au moment où le bookmarklet est cliqué?
Alpha

Bien sûr: Remplacez le 500avec quelque chose comme: prompt('List width?', '500').
Pi Delport

Merci, j'espère que cela ne vous dérange pas, mais j'ai également ajouté cela à votre réponse, pour la rendre encore plus complète.
Alpha

1
Mise à jour mineure du code du bookmarklet: les cartes elles-mêmes n'ont pas été redimensionnées (leur largeur a été limitée à 300 pixels avec la propriété css de largeur maximale sur la 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
Un bookmarklet plus simple qui fonctionne le 2 décembre 2016:javascript javascript:(function() { $('.list-card').width('490px');$('.list-wrapper').width('500px');$('.list-card').css('max-width', '470px'); })();
jmgarnier

5

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


1

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

1

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.


0

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


0

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
Comment cela résout-il le problème? Pouvez-vous au moins créer un lien vers l'outil que vous recommandez?
ale

Cette extension a résolu le problème pour moi. Votants, veuillez revoir, le PO a maintenant ajouté un lien et c'est une réponse utile.
yoyo

Cela ne fait que réduire la largeur et ne me semble pas configurable.
volvox


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.