Bagaimana saya bisa mengubah ukuran lebar kolom daftar di Trello?

Bagaimana Anda mengubah ukuran lebar kolom daftar di Trello?

Dalam implementasi Trello saat ini, ini tidak dapat dikonfigurasi: daftar berukuran terprogram antara 300-210 piksel tergantung pada ruang yang tersedia.

Namun, jika Anda tidak keberatan sedikit peretasan, Anda dapat menangani sendiri, dengan 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)

(Gantikan 500 dengan lebar piksel yang Anda inginkan.)

Anda dapat menjalankan ini di konsol browser Anda, atau menyimpannya sebagai bookmarklet berikut , untuk mengklik setiap kali Anda ingin lebih lebar:

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

Sunting : Opsi lain untuk bookmarklet untuk meminta Anda ukuran yang sebenarnya diinginkan adalah:

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

Itu tidak akan memvalidasi jawabannya, jadi jika Anda memasukkan sesuatu yang bukan angka itu tidak akan berfungsi.

Untuk membuat detail kartu lebih luas, Anda dapat menggunakan skrip bookmark ini:

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

Bagi saya, menambahkan 300px terlihat jauh lebih baik pada Tampilan Full-HD-Display

Ini adalah jawaban yang sedikit diperbarui karena Trello sekarang mengatur tata letak daftar papan, display: flexbukan display: block, sehingga widthtwist tidak akan berfungsi lagi.

Juga, perhatikan bahwa tenda Trello untuk menyuntikkan gaya ke setiap kartu baru yang dibuat. karena itu bisa menjadi ide yang baik untuk membuat pengamat dan memonitor setiap perubahan DOM halaman, memberlakukan perubahan gaya yang terjadi setiap saat.

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

Saya mencoba untuk membuat daftar lebih sempit karena papan saya saat ini memiliki banyak dari mereka dan untuk hampir semua dari mereka ubin sekitar 75% dari lebar kartu (pada kenyataannya, saya pikir saya masih bisa mendapatkan mayoritas jika saya hanya menghitung yang memiliki judul kurang dari 50% dari lebar kartu).

Saya mencoba skrip JS yang disarankan di sini (bukan yang terbaru) dan walaupun memang membuat daftar lebih sempit, tidak menghilangkan kesenjangan yang baru terbentuk di antara mereka. Jadi, saya datang dengan cara primitif ini tetapi melakukan caranya:

1. tekan Ctrl + '-' hingga Anda mendapatkan lebar daftar yang diinginkan (saat itulah semua daftar sesuai dengan layar)
2. sekarang teks mungkin cukup kecil jadi buka inspektur elemen dan edit css untuk .list-card-title dan tingkatkan ukuran font (saya menambahkan 'ukuran font: lebih besar;' dan sepertinya sudah cukup).
3. (opsional) jika Anda melihat 'g's dan bagian bawahnya hilang, Anda mungkin ingin menambahkan beberapa piksel padding bawah (saya menambahkan 10).

Sebaliknya (Memperbesar dan memperkecil teks) mungkin berfungsi jika Anda ingin menambah lebar daftar.

Seperti yang saya katakan sebelumnya, ini mungkin bukan cara yang 'tepat' dalam menangani hal-hal tetapi itu memberi saya hasil yang saya inginkan dan cepat.

Ini bukan opsi yang tersedia dan lebar kolom di Trello tetap.

Sekarang ada add-on untuk Chrome yang disebut "Daftar Slim untuk Trello" yang tersedia di Web Store:

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

1. Unduh ekstensi Chrome Pro4Trello Gratis

2. Centang "Terapkan CSS khusus" dan tambahkan ini:

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

Firefox sekarang memiliki tambahan untuk ini: Trello Super Powers .