記事について
前回まででUIの作成を行いましたが、見た目があまりに寂しいので、
スタイルシートを使って、それっぽく見せてみます。
関連する記事
書いているうちに分量がすごくなって記事を分割したので、リンク先をまとめておきます。
その１(環境構築〜モデル作成編)
その２(API作成編)
その３(UI作成編1)
その４(UI作成編2)
おまけ(モデルのテスト編)
スタイルシート
white_board/main.htmlで使われるwhite_board.scssを編集して、各DOM要素の見た目を目ます。
全体的なレイアウトにはflexレイアウト。
付箋の中身は段組が指定しやすかったのでgridレイアウトを使用しています。
app/assets/stylesheets/white_board.scss
// タイトル要素div#WhiteBoardTitle{font-weight:bold;font-family:Monospace;font-size:24px;border-collapse:collapse;}// ホワイトボード全体// "display: flex"でflexレイアウトを指定しています。// 左上からピチっと並べてもらいます。div#WhiteBoard{width:100vw;height:100vh;display:flex;flex-flow:rowwrap;justify-content:flex-start;align-items:flex-start;align-content:flex-start;}// ユーザ毎の箱div.UserBox{margin:1px;width:45vw;height:45vh;border:1pxsolid;border-collapse:collapse;}// ユーザ名を表示する箱div.UserName{width:100%;height:25px;font-weight:bold;font-size:18px;font-family:Monospace;text-align:center;background-color:#FFEEAA;border-bottom:1pxsolid;}// 付箋表示エリア// ここもflexレイアウトdiv.TaskArea{width:100%;height:100%;display:flex;flex-flow:rowwrap;align-items:flex-start;align-content:flex-start;}// 付箋本体// 影をつけてそれっぽくdiv.Sticky{display:grid;padding:1px;margin:5px;width:100px;height:80px;font-size:10px;font-family:monospace;text-align:left;border:1px#FFFF00solid;background-color:#FFFF00;box-shadow:05px5pxrgba(0,0,0,0.3);}// タスクのタイトルdiv.TaskTitle{grid-row:1;grid-column:1/3;font-size:12px;font-weight:bold;font-family:monospace;border-bottom:#FF00001pxsolid;}// タスクの本文div.TaskDescription{grid-row:2/6;grid-column:1/3;font-size:10px;font-family:monospace;}// タスクの期日divTaskDueDate{grid-row:7/8;grid-column:1/3;font-size:8px;font-family:monospace;}完成イメージ
こんな感じになると思います。
これで少しはましになったかなぁ。
スタイルの変更後もテストだ。
まずは、これまで作ったテストを流してみます。
（間違ってvisible: hiddenになってしまったりなどの影響がないことが確認できます。）
で、狙ったスタイルが適用されているかもテストしてみます。
test/system/whiteboards_test.rb
test"style check"do# white_board/mainを開く。visitwhite_board_main_url;# タイトルはfont-weigt: bold, font-size: 24pxのはず。# font-weightをマッチする時はboldでなく、数値(700)でマッチします。find("div#WhiteBoardTitle").assert_matches_style("font-weight"=>"700","font-size"=>"24px");find("div#WhiteBoard").assert_matches_style("display"=>"flex","flex-flow"=>"row wrap","align-content"=>"flex-start","align-items"=>"flex-start");# ユーザ名部分username_divs=all("div",class: "UserName");username_divs.eachdo|username_div|username_div.assert_matches_style("font-weight"=>"700","font-size"=>"18px");end# 付箋# 色はrgba(赤, 緑, 青, 透過率)で比較するようです。stickies=all("div",class: "Sticky");stickies.eachdo|sticky|sticky.assert_matches_style("background-color"=>"rgba(255, 255, 0, 1)","width"=>"100px","display"=>"grid");endendこういうテストを作っておくとスタイルシートの書き間違いなどで、狙ったスタイルが適用されてないことを検出することができます。
さらに、期日が近くなったら背景を赤くするなどの仕組みを取り入れたら、そういうのも自動でテストできるようになります。