Bagaimana saya bisa mengubah ukuran lebar kolom daftar di Trello?


29

Bagaimana Anda mengubah ukuran lebar kolom daftar di Trello?

Jawaban:


23

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.


Ini bagus! Apakah Anda pikir Anda dapat membuat nomor dimasukkan melalui prompt javascript sehingga pengguna dapat memutuskan saat bookmarklet diklik?
Alpha

Tentu: Ganti 500dengan sesuatu seperti: prompt('List width?', '500').
Pi Delport

Terima kasih, saya harap Anda tidak keberatan, tetapi saya menambahkan itu ke jawaban Anda juga, untuk membuatnya lebih lengkap.
Alpha

1
Pembaruan kecil ke kode bookmarklet: kartu itu sendiri tidak diubah ukurannya (lebarnya dibatasi pada 300px dengan properti css max-lebar pada kelas .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
Bookmarklet sederhana yang berfungsi pada 2 Desember 2016:javascript javascript:(function() { $('.list-card').width('490px');$('.list-wrapper').width('500px');$('.list-card').css('max-width', '470px'); })();
jmgarnier

5

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


1

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

1

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.



0

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
Bagaimana cara mengatasi masalah ini? Bisakah Anda setidaknya menautkan ke alat yang Anda rekomendasikan?
ale

Ekstensi ini memecahkan masalah bagi saya. Harap pilih kembali Down-pemilih, OP sekarang telah menambahkan tautan dan ini adalah jawaban yang berguna.
yoyo

Ini hanya mengurangi lebar, dan tidak terlihat dapat dikonfigurasi untuk saya.
volvox


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.