Skip to content

Instantly share code, notes, and snippets.

@takasek
Created August 24, 2015 04:10
Show Gist options
  • Save takasek/47ed6b4c7a375424c76d to your computer and use it in GitHub Desktop.
Save takasek/47ed6b4c7a375424c76d to your computer and use it in GitHub Desktop.
WorkFlowy - 幅800px未満のブラウザ対応用パッチCSS for Stylish
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("workflowy.com") {
.selected>.name>#controls>#controlsLeft {
left: 100px;
top: 45px;
}
#header {
min-width: 0px;
}
#logo {
display: none;
}
#helpButton {
display: none;
}
}
@takasek
Copy link
Author

takasek commented Aug 24, 2015

なにこれ

アウトラインプロセッサ WorkFlowyは、幅800px以上あるブラウザを前提にしているようです。充分なブラウザ幅が確保できない場合、いくつかの問題(後述)が起こります。
その問題を解決しつつ、あまり使わないコンポーネントを削除してヘッダ幅を確保します。

拡張機能「Stylish」で、新規スタイルとして記述してください。

WorkFlowyをブラウザから使うことを前提としています。
ブラウザで使う理由は、彩郎さんのブログ「単純作業に愛をこめて」の記事参照。
「WorkFlowy専用Firefox」によって、パソコンからのWorkFlowyを、さらに強力なツールに育て上げる(Windows&Mac)

いくつかの問題 とは

問題1: トップのトピックにマウスオーバーしたときに出てくるコンテキストメニューが見切れる

WorkFlowyは、ブラウザの横幅が800px以上あることが前提のレイアウトになっているようです。
そのため、ブラウザの横幅をそれ未満にした場合、トピックにマウスオーバーしたときに出てくるコンテキストメニューが画面外に見切れて、押せなくなります。

問題2: ヘッダの右側にあるコントロール(プルダウン、Saveボタン等)が見切れる

問題1と同様に、ブラウザの横幅を800px未満にした場合、ヘッダ右側にあるこれらのボタンが画面外に見切れて、押せなくなります。

問題3: 使わないコントロールが陣取ってて邪魔

拙作Text counter for WorkFlowyは、ヘッダの余白にコントロールを追加することで機能を実現していますが、充分な横幅がないと、表示領域が確保できず、コントロールがヘッダ外に押し出されてしまいます。
同じような発想で別のコントロールをヘッダに追加したい場合にも、余白はあったほうが嬉しいでしょう。
そこで、WorkFlowyロゴとHelpボタンを非表示にするカスタマイズを行い、ヘッダを広く取ります。

※helpButtonがなくなるのは、初心者にとっては一長一短なので、#helpButton の記述は、ご自分のWorkFlowyの習熟度に相談しつつ適用するか決めてください。

こちらもおすすめ

WorkFlowyのCompletedボタンをシンプルにする
のスクリプトを併用するのもお勧めです。

FAQ

Stylishって何?

Google is your friend!

Stylish使いたくない…ブックマークレットとかで代用できない?

かつてJavaScriptで解決しようとしたときのエントリがありますので、そちらをお使いにもなれます。
WorkFlowyでブラウザの横幅が足りない時に起こる問題を解決する

他、なにかあれば

https://twitter.com/takasek まで。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment