Trello'da listenin sütun genişliğini nasıl yeniden boyutlandırabilirim?

Trello'da bir listenin sütun genişliğini nasıl yeniden boyutlandırırsınız?

Trello'nun şu anki uygulamasında, bu yapılandırılamaz: listeler, mevcut alana bağlı olarak 300-210 piksel genişliğinde olacak şekilde programatik olarak boyutlandırılır.

Bununla birlikte, biraz kesmek sakıncası yoksa, bazı JavaScript'leri kullanarak sorunları kendi elinize alabilirsiniz:

(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)

(İstediğiniz piksel genişliğiyle 500'ü değiştirin.)

Daha fazla genişlik istediğinizde tıklamak için bunu tarayıcınızın konsolunda çalıştırabilir veya aşağıdaki yer imi olarak kaydedebilirsiniz :

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

Düzenleme : Yer imi için istenen gerçek boyutu istemek için başka bir seçenek:

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

Cevabı doğrulamaz, bu yüzden sayı olmayan bir şey girerseniz işe yaramaz.

Yapmak için kart ayrıntılarını daha geniş, bu imi-komut dosyasını kullanabilirsiniz:

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

Benim için 300px eklemek, Full-HD Ekranlarda çok daha iyi görünüyor

Bu, Trello'nun artık pano listesi düzenini display: flexyerine ayarladığı için biraz güncellenmiş bir cevaptır display: block, böylece widthbüküm artık işe yaramaz.

Ayrıca, Trello'nun yarattığı her yeni karta tarzı enjekte etme eğiliminde olduğunu belirtti. bu nedenle, bir gözlemci oluşturmak ve sayfanın DOM değişikliklerini izlemek, her zaman gerçekleşen stil değişikliğini uygulamak iyi bir fikir olabilir.

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

Listeleri daraltmaya çalışıyordum çünkü şu anki bordumda bir sürü var ve neredeyse hepsi için karo kartın genişliğinin yaklaşık% 75'ini oluşturuyordu (aslında, sadece sayılırsam hala çoğunluğu alabileceğimi düşünüyorum) kart genişliğinin% 50'sinden daha az başlığa sahip olanlar).

Burada önerilen JS betiğini denedim (en yenisi olmasa da) ve listeleri gerçekten daha dar hale getirmesine rağmen, aralarında yeni kurulan boşluğu ortadan kaldırmadı. Böylece, bu ilkel olanla geldim ama 'hile yapar' yapmanın yolu:

1. istediğiniz liste genişliğini elde edinceye kadar Ctrl + '-' tuşlarına basın (muhtemelen tüm listeler ekrana sığdığında)
2. şimdiye kadar metin muhtemelen oldukça küçüktür, bu yüzden element denetçisini açın ve .list-card-başlık için css dosyasını düzenleyin ve yazı tipi boyutunu artırın ('font-size: large;' ekledim ve yeterli görünüyordu).
3. (isteğe bağlı) 'g' yi görür ve alt kısımlarını bu kadar özlüyorsanız, birkaç piksel alt dolgu eklemek isteyebilirsiniz (10 ekledim).

Liste genişliğini artırmak istiyorsanız, bunun tersi (metni yakınlaştır ve küçült) işe yarayabilir.

Daha önce de söylediğim gibi, bu muhtemelen olayları ele almanın 'uygun' yolu değildir, ancak istediğim sonucu verdi ve hızlı.

Bu uygun bir seçenek değildir ve bu nedenle Trello'daki sütunların genişlikleri sabittir.

Artık Web Mağazasında bulunan Chrome için "Trello için İnce Listeler" adlı bir eklenti var:

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

1. Pro4Trello Free Chrome eklentisini indirin

2. "Özel CSS Uygula" seçeneğini işaretleyin ve şunu ekleyin:

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

Firefox şimdi bunun için bir eklenti var: Trello Süper Güçler .