it-swarm.com.de

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

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

28
Deborah Wright

In der aktuellen Implementierung von Trello ist dies nicht konfigurierbar: Listen sind programmgesteuert so dimensioniert, 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 unter folgendem Lesezeichen speichern, um auf etwas mehr Breite zu klicken:

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 Sie nach der tatsächlich gewünschten Größe zu fragen, 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.

23
Pi Delport

Um das Kartendetails weiter zu machen, 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

5
Rob

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 (in der Tat 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 habe ich 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. Erhöhen Sie die Schriftgröße (ich habe 'font-size: larger;' hinzugefügt und es schien zu reichen).
  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.

1
Catalina Predoi

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

Außerdem ist zu beachten, dass Trello Zelte den Style auf jede neu erstellte Karte zaubert. Daher kann es eine gute Idee sein, einen Beobachter zu erstellen und alle DOM-Änderungen 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});
1
KS.Pan

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

0
insomniak29
  1. Laden Sie die Erweiterung Pro4Trello Free Chrome herunter

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

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

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

0
user1007074