web-dev-qa-db-fra.com

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

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

trello
28
Deborah Wright

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, 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)

(Substituez le 500 avec votre propre largeur de pixel souhaitée.)

Vous pouvez l'exécuter sur la console de votre navigateur ou l'enregistrer sous le nom suivant bookmarklet , pour cliquer à tout moment si vous souhaitez augmenter la largeur:

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

Modifier : Une autre option permettant au bookmarklet de vous demander la taille réelle souhaitée est la suivante:

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.

23
Pi Delport

Pour élargir le détails de la carte, vous pouvez utiliser ce script bookmark:

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

Pour moi, l'ajout de 300 pixels est bien meilleur sur les écrans Full HD

5
Rob

J'essayais de réduire les listes parce que mon conseil actuel en a beaucoup et que pour presque toutes les tuiles représentaient environ 75% de la largeur de la carte (en fait, je pense que je pourrais toujours obtenir une majorité si je comptais 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 plus récent cependant) et, bien qu'il ait effectivement rendu les listes plus étroites, cela n'a pas éliminé le nouveau fossé qui les séparait. Donc, je suis venu avec cette méthode primitive mais "fait le tour" de le faire:

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

L'opposé (Zoom avant et réduction du texte) peut fonctionner si vous souhaitez augmenter la largeur de la liste.

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

1
Catalina Predoi

Ceci est une réponse légèrement mise à jour, Trello définissant maintenant la disposition de la liste des planches sur display: flex au lieu de display: block, de sorte que la torsion width ne fonctionne plus.

En outre, a noté que les tentes Trello 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 de la page dans le DOM, et 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
KS.Pan

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

0
insomniak29

  1. Téléchargez le extension de Pro4Trello Free Chrome

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

    .list {
  width: 375px;
}

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

Il existe maintenant un module complémentaire pour Chrome appelé "Listes minces pour Trello" disponible sur le Web Store:

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

0
user1007074