Як я можу змінити розмір списку стовпців у списку 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 на потрібну ширину пікселів.)

Ви можете виконати це на консолі свого веб-переглядача або зберегти його як наступний закладка , щоб натискати, коли вам потрібна ще якась ширина:

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

Редагувати : Ще одна опція закладок для запиту фактичного потрібного розміру:

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

Для мене додавання 300px виглядає набагато краще на Full-HD-дисплеях

Це дещо оновлена ​​відповідь, оскільки 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. (необов’язково), якщо ви бачите "г" і такі відсутні у їх нижній частині, ви можете додати кілька пікселів нижньої прокладки (я додав 10).

Навпаки (збільшення та зменшення тексту) може спрацювати, якщо ви хочете збільшити ширину списку.

Як я вже говорив раніше, це, мабуть, не «правильний» спосіб поводження з речами, але це дало мені результат, якого я хотів, і це швидко.

Це недоступний варіант, тому ширина стовпців у Trello фіксована.

Зараз у Веб-магазині доступна надбудова для Chrome під назвою "Slim Lists for Trello":

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

1. Завантажте розширення Безкоштовний Chrome Pro4Trello

2. Поставте галочку "Застосувати спеціальний CSS" та додайте це:

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

Firefox тепер має додаток до цього: Суперсили Trello .