Trello에서 목록의 열 너비를 어떻게 조정할 수 있습니까?

Trello에서 목록의 열 너비를 어떻게 조정합니까?

Trello의 현재 구현에서는이를 구성 할 수 없습니다. 사용 가능한 공간에 따라 목록의 너비는 300-210 픽셀 사이입니다.

그러나 약간의 해킹이 마음에 들지 않으면 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)

(500을 원하는 픽셀 너비로 대체하십시오.)

브라우저 콘솔에서 이것을 실행하거나 다음 bookmarklet 으로 저장하여 너비를 더 원할 때마다 클릭 할 수 있습니다.

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

편집 : Bookmarklet에서 실제 원하는 크기를 요청하는 또 다른 옵션은 다음과 같습니다.

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

답변의 유효성을 검사하지 않으므로 숫자가 아닌 것을 입력하면 작동하지 않습니다.

하려면 카드 세부 사항을 더 넓은, 당신은이 책갈피 - 스크립트를 사용할 수 있습니다 :

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

나를 위해 Full-HD-Displays에서 300px를 추가하는 것이 훨씬 나아 보입니다.

Trello는 이제 보드 목록 레이아웃을 display: flex대신로 설정했기 때문에 약간 업데이트 된 답변 display: block이므로 width더 이상 꼬이지 않습니다.

또한 Trello 텐트는 생성 된 모든 새 카드에 스타일을 주입합니다. 따라서 관찰자를 만들고 페이지의 DOM 변경 사항을 모니터링하고 항상 스타일 변경을 적용하는 것이 좋습니다.

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

현재 보드에 많은 것들이 있기 때문에 목록을 더 좁히려 고했습니다. 거의 모든 타일은 카드 너비의 약 75 %입니다 (사실, 세어도 여전히 대다수를 얻을 수 있다고 생각합니다 제목이 카드 너비의 50 % 미만인 경우).

여기에 제안 된 JS 스크립트 (최신 스크립트는 아님)를 시도했지만 실제로 목록을 좁히는 동안 새로 형성된 간격을 제거하지 못했습니다. 그래서 나는이 원시적을 생각해 냈지만 그것을 수행하는 '트릭을 수행'합니다.

1. 원하는 목록 너비를 얻을 때까지 Ctrl + '-'를 누르십시오 (모든 목록이 화면에 맞는 경우 일 수 있음).
2. 이제 텍스트는 꽤 작을 것이므로 요소 관리자를 열고 .list-card-title에 대한 CSS를 편집하고 글꼴 크기를 늘리십시오 ( 'font-size : large;'를 추가하면 충분합니다).
3. (선택 사항) 'g'가 표시되고 하단 부분이 누락되면 하단 픽셀 몇 픽셀을 추가 할 수 있습니다 (10을 추가했습니다).

목록 너비를 늘리려면 반대 (텍스트 확대 및 축소)가 작동 할 수 있습니다.

내가 전에 말했듯이, 이것은 아마도 물건을 다루는 '적절한'방법은 아니지만 내가 원하는 결과를 얻었고 빠르다.

이것은 사용 가능한 옵션이 아니므로 Trello의 열 너비가 고정됩니다.

웹 스토어에서 "Trello 용 슬림 목록"이라는 Chrome 용 추가 기능이 제공됩니다.

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

1. Pro4Trello 무료 Chrome 확장 프로그램 다운로드

2. "사용자 정의 CSS 적용"을 선택하고 다음을 추가하십시오.

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

Firefox는 Trello Super Powers 에 추가되었습니다 .