Created
August 24, 2015 04:10
-
-
Save takasek/47ed6b4c7a375424c76d to your computer and use it in GitHub Desktop.
WorkFlowy - 幅800px未満のブラウザ対応用パッチCSS for Stylish
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
なにこれ
アウトラインプロセッサ 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 まで。