Tbpgr Blog

Ruby プログラマ tbpgr(てぃーびー) のブログ

Greasemonkey で Trello の見にくい Description を見やすくする #trello

概要

Greasemonkey で Trello の見にくい Description を見やすくする

経緯

Trello のカードの Description では、 Markdown を利用できるのですが、 CSS の設定がいまいちで見にくいレイアウトになっています。

そこで、同僚に Greasemonkey のユーザースクリプトを使って見出しを見やすく してもらえるように依頼しました。 すると、業務時間外で個人的に作ってくれました。感謝! ( ※業務時間外での対応を依頼したわけではない。自発的にやってくれただけ。 )

使ってみる

共通 Markdown

## H2_1
test

### H3_1_1
test

### H3_1_2
test

## H2_2
### H3_2_1
test

### H3_2_2
test

## H2_3
### H3_3_1
test

### H3_3_2
test

Before

GreaseMonkey 利用前。 見出しの隙間が狭く、見にくい。

f:id:tbpg:20150424001934p:plain

After 1

私が添削する前 見出しの隙間が広くなり、見やすくなった。

f:id:tbpg:20150424001939p:plain

After 2

私が添削した後(好みの領域) 表示条件とスタイルを少しいじりました。(しばらくしたらリポジトリにも反映されるかな?)

var update = function() {
  $('div.current.markeddown.hide-on-edit.js-card-desc.js-show-with-desc :header').each(function(i){
    if ($(this)[0].tagName == "H2") {
      $(this).css("margin-bottom", "5px");
      $(this).css("border-left", "5px solid #48832C");
      $(this).css("border-bottom", "1px solid #48832C");
    } else {
      $(this).css("margin", "20px 0px 5px 0px");
      $(this).css("border-bottom", "1px solid #48832C");
    }
  });
};

$(document).ready(function() {
  setInterval(update, 5000);
});

f:id:tbpg:20150424001944p:plain

Complete!

めっちゃ見やすくなった

外部資料