Làm cách nào để thay đổi kích thước chiều rộng cột của danh sách trong Trello?

Làm thế nào để bạn thay đổi kích thước chiều rộng cột của một danh sách trong Trello?

Trong triển khai hiện tại của Trello, điều này không thể định cấu hình được: các danh sách có kích thước theo chương trình nằm trong khoảng 300 pixel210 pixel tùy thuộc vào không gian có sẵn.

Tuy nhiên, nếu bạn không bận tâm một chút về hack, bạn có thể đưa vấn đề vào tay của chính mình, với một số 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)

(Thay thế 500 với chiều rộng pixel mong muốn của riêng bạn.)

Bạn có thể thực hiện điều này tại bảng điều khiển của trình duyệt hoặc lưu nó dưới dạng bookmarklet sau , để nhấp bất cứ khi nào bạn muốn có chiều rộng hơn:

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

Chỉnh sửa : Một tùy chọn khác cho bookmarklet để yêu cầu bạn kích thước mong muốn thực tế là:

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

Nó sẽ không xác thực câu trả lời, vì vậy nếu bạn nhập một số không phải là số thì nó sẽ không hoạt động.

Để làm cho chi tiết thẻ rộng hơn, bạn có thể sử dụng tập lệnh đánh dấu này:

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

Đối với tôi, việc thêm 300px trông tốt hơn rất nhiều trên màn hình Full-HD

Đây là một câu trả lời được cập nhật một chút vì Trello hiện thiết lập bố cục danh sách bảng display: flexthay vì display: block, vì vậy widthtwist sẽ không hoạt động nữa.

Ngoài ra, lưu ý rằng Trello lều để tiêm phong cách cho mỗi thẻ mới được tạo. do đó, có thể là một ý tưởng tốt để tạo người quan sát và theo dõi mọi thay đổi DOM của trang, thực thi thay đổi kiểu đang diễn ra mọi lúc.

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

Tôi đã cố gắng để làm cho danh sách hẹp hơn bởi vì bảng hiện tại của tôi có rất nhiều trong số chúng và đối với hầu hết tất cả chúng, gạch có khoảng 75% chiều rộng của thẻ (thực tế, tôi nghĩ rằng tôi vẫn có thể chiếm đa số nếu tôi chỉ đếm những cái có tiêu đề nhỏ hơn 50% chiều rộng của thẻ).

Tôi đã thử tập lệnh JS được đề xuất ở đây (không phải tập lệnh mới nhất) và mặc dù nó thực sự làm cho danh sách hẹp hơn nhưng nó không xóa bỏ khoảng cách mới được hình thành giữa chúng. Vì vậy, tôi đã nghĩ ra cách thức nguyên thủy này nhưng 'thực hiện thủ thuật':

1. nhấn Ctrl + '-' cho đến khi bạn có được độ rộng danh sách mong muốn (có thể là khi tất cả các danh sách vừa với màn hình)
2. bây giờ văn bản có thể khá nhỏ, vì vậy hãy mở trình kiểm tra phần tử và chỉnh sửa css cho .list-card-title và tăng kích thước phông chữ (Tôi đã thêm 'font-size: lớn hơn;' và nó dường như là đủ).
3. (tùy chọn) nếu bạn thấy 'g và thiếu phần dưới của chúng, bạn có thể muốn thêm một vài pixel của phần đệm dưới cùng (tôi đã thêm 10).

Ngược lại (Phóng to và thu nhỏ văn bản) có thể hoạt động nếu bạn muốn tăng độ rộng danh sách.

Như tôi đã nói trước đây, đây có lẽ không phải là cách xử lý 'đúng đắn' nhưng nó mang lại cho tôi kết quả tôi muốn và nó nhanh chóng.

Đây không phải là một tùy chọn có sẵn và vì vậy độ rộng của các cột trong Trello được cố định.

Hiện tại đã có một tiện ích bổ sung dành cho Chrome có tên "Danh sách mỏng cho Trello" có sẵn trên Cửa hàng trực tuyến:

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

1. Tải xuống tiện ích mở rộng Chrome miễn phí Pro4Trello

2. Chọn "Áp dụng CSS tùy chỉnh" và thêm phần này:

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

Firefox hiện có một tiện ích bổ sung cho việc này: Trello Super Powers .