Как я могу изменить ширину столбца списка в 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. (необязательно), если вы видите буквы «g» и такие, пропускающие их нижнюю часть, вы можете добавить несколько пикселей нижнего отступа (я добавил 10).

Обратное (увеличение и уменьшение текста) может сработать, если вы хотите увеличить ширину списка.

Как я уже говорил, это, вероятно, не «правильный» способ обработки вещей, но он дал мне тот результат, который я хотел, и это быстро.

Это недоступный параметр, поэтому ширина столбцов в Trello фиксирована.

Теперь в интернет-магазине доступно дополнение для Chrome под названием «Slim Lists for Trello»:

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

1. Загрузите расширение Pro4Trello Free Chrome

2. Отметьте «Применить пользовательский CSS» и добавьте это:

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

Firefox теперь имеет дополнение для этого: Trello Super Powers .