Wie kann ich die Spaltenbreite der Liste in Trello ändern?

Wie kann die Spaltenbreite einer Liste in Trello geändert werden?

In der aktuellen Implementierung von Trello ist dies nicht konfigurierbar: Listen sind programmgesteuert so bemessen, dass sie je nach verfügbarem Speicherplatz zwischen 300 und 210 Pixel breit sind.

Wenn Ihnen ein bisschen Hack nichts ausmacht, können Sie die Dinge mit etwas JavaScript selbst in die Hand nehmen:

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

(Ersetzen Sie die 500 durch Ihre gewünschte Pixelbreite.)

Sie können dies an der Konsole Ihres Browsers ausführen oder als das folgende Lesezeichen speichern , um zu klicken, wann immer Sie mehr Breite wünschen:

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

Bearbeiten : Eine weitere Option für das Lesezeichen, um die tatsächlich gewünschte Größe anzufordern, ist:

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

Die Antwort wird nicht validiert. Wenn Sie also etwas eingeben, das keine Zahl ist, funktioniert dies nicht.

Um die Kartendetails zu erweitern, können Sie dieses Lesezeichen-Skript verwenden:

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

Für mich sieht das Hinzufügen von 300px auf Full-HD-Displays viel besser aus

Dies ist eine leicht überarbeitete Antwort, da Trello jetzt das Layout der Board-Liste auf display: flexanstatt gesetzt hat display: block, sodass der widthTwist nicht mehr funktioniert.

Außerdem sei angemerkt, dass Trello Zelte den Style auf jede neu erstellte Karte zaubert. Daher ist es eine gute Idee, einen Beobachter zu erstellen und alle DOM-Änderungen auf der Seite zu überwachen, um die Stiländerung zu erzwingen, die zu jeder Zeit stattfindet.

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

Ich habe versucht, die Listen enger zu machen, weil mein aktuelles Board viele davon hat und bei fast allen war das Plättchen ungefähr 75% der Kartenbreite (tatsächlich denke ich, ich könnte immer noch eine Mehrheit bekommen, wenn ich nur zähle Titel mit weniger als 50% der Kartenbreite).

Ich habe das hier vorgeschlagene JS-Skript ausprobiert (allerdings nicht das neueste), und obwohl die Listen dadurch zwar enger wurden, konnte die neu entstandene Lücke zwischen ihnen nicht beseitigt werden. Also, ich habe mir dieses Primitive ausgedacht, aber es macht den Trick:

1. drücke Strg + '-' bis die gewünschte Listenbreite erreicht ist (dann passen wahrscheinlich alle Listen auf den Bildschirm)
2. Inzwischen ist der Text wahrscheinlich ziemlich klein. Öffnen Sie den Elementinspektor und bearbeiten Sie die CSS-Datei für .list-card-title.
3. (optional) Wenn Sie sehen, dass die Gs und solche am unteren Teil fehlen, möchten Sie möglicherweise einige Pixel des unteren Abstands hinzufügen (ich habe 10 hinzugefügt).

Das Gegenteil (Vergrößern und Verkleinern des Texts) funktioniert möglicherweise, wenn Sie die Listenbreite erhöhen möchten.

Wie ich bereits sagte, ist dies wahrscheinlich nicht die 'richtige' Art, Dinge zu handhaben, aber es brachte mir das gewünschte Ergebnis und es ist schnell.

Da diese Option nicht verfügbar ist, sind die Spaltenbreiten in Trello festgelegt.

Es gibt jetzt ein Add-On für Chrome namens "Slim Lists for Trello" im Web Store:

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

1. Laden Sie die Pro4Trello Free Chrome-Erweiterung herunter

2. Aktivieren Sie das Kontrollkästchen "Benutzerdefiniertes CSS anwenden" und fügen Sie Folgendes hinzu:

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

Firefox hat jetzt ein Add-On dafür: Trello Super Powers .