Jak mogę zmienić szerokość kolumny listy w Trello?

Jak zmienić rozmiar kolumny listy w Trello?

W bieżącej implementacji Trello nie można tego konfigurować: listy są programowo projektowane tak, aby miały szerokość między 300–210 pikseli w zależności od dostępnej przestrzeni.

Jeśli jednak nie przeszkadza ci odrobina włamania, możesz wziąć sprawy w swoje ręce za pomocą 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)

(Zamień 500 na własną pożądaną szerokość piksela.)

Możesz to zrobić w konsoli przeglądarki lub zapisać jako następującą skryptozakładkę , aby kliknąć, gdy chcesz uzyskać większą szerokość:

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

Edycja : Inną opcją bookmarkletu z żądaniem rzeczywistego pożądanego rozmiaru jest:

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

Nie potwierdzi odpowiedzi, więc jeśli wpiszesz coś, co nie jest liczbą, nie zadziała.

Aby poszerzyć szczegóły karty , możesz użyć tego skryptu zakładki:

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

Dla mnie dodanie 300 pikseli wygląda znacznie lepiej na wyświetlaczach Full HD

To nieco zaktualizowana odpowiedź, ponieważ Trello ustawił teraz układ listy plansz na display: flexzamiast display: block, więc widthzwrot nie będzie już działał.

Zauważono również, że namioty Trello wprowadzają styl do każdej nowej tworzonej karty. dlatego dobrym pomysłem może być utworzenie obserwatora i monitorowanie wszelkich zmian DOM strony, wymuszanie zmiany stylu zachodzącej przez cały czas.

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

Próbowałem zawęzić listę, ponieważ na mojej obecnej planszy jest ich dużo, a dla prawie wszystkich kafelek miał około 75% szerokości karty (tak naprawdę myślę, że mógłbym uzyskać większość, gdybym tylko policzył te z tytułami mniejszymi niż 50% szerokości karty).

Wypróbowałem skrypt JS zaproponowany tutaj (choć nie najnowszy) i chociaż rzeczywiście zawęził listy, nie wyeliminował nowo utworzonej luki między nimi. Tak więc wymyśliłem ten prymitywny sposób, ale „robi to trick”:

1. naciśnij Ctrl + '-', aż uzyskasz pożądaną szerokość listy (prawdopodobnie wtedy wszystkie listy pasują do ekranu)
2. do tej pory tekst jest prawdopodobnie dość mały, więc otwórz inspektor elementów i edytuj css dla .list-card-title i zwiększ rozmiar czcionki (dodałem „rozmiar czcionki: większy;” i wydawało się to wystarczające).
3. (opcjonalnie) jeśli widzisz „g” i brakuje im ich dolnej części, możesz dodać kilka pikseli dolnego wypełnienia (dodałem 10).

Przeciwnie (Powiększ i zmniejsz tekst) może działać, jeśli chcesz zwiększyć szerokość listy.

Jak powiedziałem wcześniej, prawdopodobnie nie jest to „właściwy” sposób postępowania, ale przyniósł mi oczekiwany rezultat i jest szybki.

To nie jest dostępna opcja, więc szerokości kolumn w Trello są stałe.

W sklepie internetowym dostępny jest teraz dodatek do Chrome o nazwie „Slim Lists for Trello”:

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

1. Pobierz rozszerzenie Pro4Trello Free Chrome

2. Zaznacz „Zastosuj niestandardowy CSS” i dodaj to:

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

Firefox ma teraz dodatek do tego: Trello Super Powers .