Rails6+Reactで付箋アプリっぽいページを作ってみた。4 (UI作成編2)

# 記事について
[前回](https://qiita.com/hanaitama-kaz/items/9b680c50566161046690)まででUIの作成を行いましたが、見た目があまりに寂しいので、
スタイルシートを使って、それっぽく見せてみます。

# 関連する記事
書いているうちに分量がすごくなって記事を分割したので、リンク先をまとめておきます。
[その１(環境構築〜モデル作成編)](https://qiita.com/hanaitama-kaz/items/5b68b9c665f75020bcd4)
[その２(API作成編)](https://qiita.com/hanaitama-kaz/items/b461ff8564a5368523fc)
[その３(UI作成編1)](https://qiita.com/hanaitama-kaz/items/9b680c50566161046690)
[その４(UI作成編2)](https://qiita.com/hanaitama-kaz/items/e82a9ec9538914861746)
[その５(react-contenteditable導入編)](https://qiita.com/hanaitama-kaz/items/17832369f279ba0e331a)
[おまけ(モデルのテスト編)](https://qiita.com/hanaitama-kaz/items/d3b9e54913139aecf530)

# スタイルシート
white_board/main.htmlで使われるwhite_board.scssを編集して、各DOM要素の見た目を目ます。
全体的なレイアウトにはflexレイアウト。
付箋の中身は段組が指定しやすかったのでgridレイアウトを使用しています。

```scss: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: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

// ユーザ毎の箱
div.UserBox {
  margin: 1px;
  width: 45vw;
  height: 45vh;
  border: 1px solid;
  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: 1px solid;
}

// 付箋表示エリア
// ここもflexレイアウト
div.TaskArea {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  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 #FFFF00 solid;
  background-color: #FFFF00;
  box-shadow: 0 5px 5px rgba(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: #FF0000 1px solid;
  
}

// タスクの本文
div.TaskDescription {
  grid-row: 2 / 6;
  grid-column: 1 / 3;
  font-size: 10px;
  font-family: monospace;
}

// タスクの期日
div TaskDueDate {
  grid-row: 7 / 8;
  grid-column: 1 / 3;
  font-size:8px;
  font-family: monospace;
}  
```

# 完成イメージ
こんな感じになると思います。
これで少しはましになったかなぁ。
<img width="751" alt="スクリーンショット 2020-05-16 9.07.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244595/a3d676fb-68fb-0c91-8ecf-ab9fcb019b82.png">

# スタイルの変更後もテストだ。
まずは、これまで作ったテストを流してみます。
（間違ってvisible: hiddenになってしまったりなどの影響がないことが確認できます。）

で、狙ったスタイルが適用されているかもテストしてみます。

```ruby:test/system/whiteboards_test.rb
  test "style check" do
    # white_board/mainを開く。
    visit white_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.each do | username_div |
      username_div.assert_matches_style("font-weight" => "700", "font-size" => "18px");
    end

    # 付箋
    # 色はrgba(赤, 緑, 青, 透過率)で比較するようです。
    stickies = all("div", class: "Sticky");

    stickies.each do | sticky |
      sticky.assert_matches_style("background-color" => "rgba(255, 255, 0, 1)", "width" => "100px", "display" => "grid");
    end

  end
```

こういうテストを作っておくとスタイルシートの書き間違いなどで、狙ったスタイルが適用されてないことを検出することができます。
さらに、期日が近くなったら背景を赤くするなどの仕組みを取り入れたら、そういうのも自動でテストできるようになります。