ฉันจะปรับขนาดความกว้างคอลัมน์ของรายการใน 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))

มันจะไม่ตรวจสอบคำตอบดังนั้นถ้าคุณป้อนสิ่งที่ไม่ใช่ตัวเลขมันจะไม่ทำงาน

ในการทำให้รายละเอียดการ์ดกว้างขึ้นคุณสามารถใช้ bookmark-script นี้:

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

สำหรับฉันการเพิ่ม 300px นั้นดูดีขึ้นมากใน Full-HD-Displays

นี่เป็นคำตอบที่ได้รับการปรับปรุงเล็กน้อยเมื่อ 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. โดยตอนนี้ข้อความอาจจะค่อนข้างเล็กดังนั้นให้เปิดตัวตรวจสอบองค์ประกอบและแก้ไข css สำหรับ .list-card-title และเพิ่มขนาดตัวอักษร (ฉันเพิ่ม 'font-size: large;' และดูเหมือนจะเพียงพอ)
3. (ไม่บังคับ) หากคุณเห็น 'g's และส่วนที่ขาดหายไปของส่วนล่างคุณอาจต้องการเพิ่มช่องว่างด้านล่างสองสามพิกเซล (ฉันเพิ่ม 10)

ตรงกันข้าม (ซูมเข้าและย่อขนาดตัวอักษร) อาจใช้งานได้หากคุณต้องการเพิ่มความกว้างของรายการ

อย่างที่ฉันพูดไว้ก่อนหน้านี้อาจไม่ใช่วิธีที่ 'เหมาะสม' ในการจัดการสิ่งต่าง ๆ แต่มันทำให้ฉันได้รับผลลัพธ์ที่ต้องการและรวดเร็ว

นี่ไม่ใช่ตัวเลือกที่ใช้ได้และดังนั้นความกว้างของคอลัมน์ใน Trello ได้รับการแก้ไข

ขณะนี้มีส่วนเสริมสำหรับ Chrome ชื่อ "Slim Lists for Trello" ที่มีอยู่ในเว็บสโตร์:

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