Come posso ridimensionare la larghezza della colonna dell'elenco in Trello?

Come si ridimensiona la larghezza della colonna di un elenco in Trello?

Nell'attuale implementazione di Trello, questo non è configurabile: gli elenchi sono dimensionati in modo programmatico tra 300 e 210 pixel in base allo spazio disponibile.

Tuttavia, se non ti dispiace un po 'di un trucco, puoi prendere le cose nelle tue mani, con un po' di 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)

(Sostituisci il 500 con la tua larghezza di pixel desiderata.)

Puoi eseguirlo sulla console del tuo browser o salvarlo come il seguente bookmarklet , per fare clic ogni volta che vuoi un po 'più di larghezza:

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

Modifica : un'altra opzione per il bookmarklet per richiedere la dimensione desiderata effettiva è:

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

Non convaliderà la risposta, quindi se inserisci qualcosa che non è un numero non funzionerà.

Per allargare i dettagli della carta , puoi usare questo script segnalibro:

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

Per me, l'aggiunta di 300 px sembra molto meglio sui display Full HD

Questa è una risposta leggermente aggiornata poiché Trello ora imposta il layout dell'elenco delle schede display: flexinvece di display: block, quindi il widthtwist non funzionerà più.

Inoltre, ha osservato che le tende Trello iniettano lo stile in ogni nuova carta creata. pertanto potrebbe essere una buona idea creare un osservatore e monitorare eventuali cambiamenti DOM della pagina, applicare il cambio di stile in qualsiasi momento.

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

Stavo cercando di restringere le liste perché la mia scheda attuale ne ha molte e per quasi tutte la tessera era circa il 75% della larghezza della carta (in effetti, penso che potrei ancora ottenere la maggioranza se contassi solo quelli con titoli inferiori al 50% della larghezza della carta).

Ho provato lo script JS suggerito qui (non l'ultimo però) e sebbene abbia effettivamente ristretto le liste, non ha eliminato il divario appena formato tra di loro. Quindi, mi è venuta in mente questa primitiva ma 'fa il trucco' per farlo:

1. premi Ctrl + '-' fino ad ottenere la larghezza desiderata dell'elenco (probabilmente è quando tutte le liste si adattano allo schermo)
2. ormai il testo è probabilmente piuttosto piccolo, quindi apri la finestra di ispezione degli elementi e modifica il CSS per .list-card-title e aumenta la dimensione del carattere (ho aggiunto 'font-size: larger;' e mi è sembrato sufficiente).
3. (facoltativo) se vedi le 'g' e tale manca la loro parte inferiore potresti voler aggiungere qualche pixel di imbottitura inferiore (ho aggiunto 10).

Il contrario (ingrandire e ridurre il testo) potrebbe funzionare se si desidera aumentare la larghezza dell'elenco.

Come ho detto prima, questo probabilmente non è il modo "corretto" di gestire le cose, ma mi ha dato il risultato che volevo ed è rapido.

Questa non è un'opzione disponibile e quindi le larghezze delle colonne in Trello sono fisse.

Esiste ora un componente aggiuntivo per Chrome chiamato "Slim Lists for Trello" disponibile sul Web Store:

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

1. Scarica l' estensione gratuita di Pro4Trello per Chrome

2. Seleziona "Applica CSS personalizzato" e aggiungi questo:

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

Firefox ora ha un componente aggiuntivo per questo: Trello Super Powers .