Day10 CSS二日目

#プロフィール更新画面
新規登録やログイン画面同様、レイアウト調整。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/531bd4ca-0a8c-7f80-6d7b-dd2bcab9ca26.png)
・divのなかの要素を真ん中に寄せるときは、text-align: center;
・Bootstrapで、input要素の高さを広げたいときは、row:5等と指定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/a7278f83-0ef8-417d-55ac-f4c0d8944d09.png)

#ユーザー一覧画面
##いいねエラー
一覧画面でもいいねの数を表示するようにしたが、一覧画面でいいねを取り消して、また一覧画面に戻ると、いいねのアイコンはピンク色のまま（つまりリンク先が削除）になってしまうという問題が発生した。
**ビュー**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/2fcfde9b-b596-d77c-6d7d-5150af07619b.png)
**問題発生時の一覧画面（赤丸のユーザに対してはいいねを削除したにもかかわらず、この表示）**
<img width="1336" alt="スクリーンショット 2020-01-20 19.55.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/9d077312-78a9-6f57-d76d-bede023b2404.png">
**原因**
いいねを表示するときに、Find_byの引数に、pro_id(いいねされたユーザのID）のみしか指定していなかったため、ログイン中のユーザのIDがいいねテーブルのuser_id(いいねしたユーザのID）になくても、ピンク色のいいねアイコンが表示されるようになっていた。そしてそれをクリックしてしまうと、当然ログイン中のユーザのIDがuser_idにもついいねテーブルのレコードはないためエラーがでてしまっていた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/6c4204ba-ccae-389e-e75e-a9d078140655.png)
**解決**
いいねを探すFind_byの引数に、user_id:currentuser.idと、ログインしているユーザーのIDも指定した。そうすることでいいねテーブルのuser_idがログイン中のユーザー、pro_idが対象のユーザID両方が合致したときのみピンク色のいいねアイコンになり、リンク先はクリエイトでエラーが起こることはなくなった。
##非公開ユーザの表示を境に見た目が崩れる問題
imageユーザの前は、Privateという非表示設定のユーザで、そこから画面四分割がされなくなった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/d4a7631e-c7a3-1e31-ce55-35e54a3cfc5f.png)
**原因**
画面を四分割している、col-md-3が、非表示ユーザ以外を表示する条件式のend文を囲えていなかったため。多分unlessの前に非表示含む全ユーザをeach文に入れていて、さらにそれはrowで囲われているので、１２分割するrowに含まれてしまったのだと思われる。
**解決**
rowをeach文から出して、col-md-3をeach文の中に入れるようにした。またこの修正で非表示ユーザがいるとき、そのコラムのみが空白になってしまったため、非表示ユーザと公開ユーザの一覧を格納する変数は別々にし、それぞれ別にPagenateした。
#問合せ画面
**Admin視点**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/caa3a5f9-007b-7d94-f57e-1fe6a2e13847.png)
**一般ユーザ視点**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/13d4bedb-dda4-7069-cd2e-70bc77fe691a.png)

このようにレイアウトを整えた。また問合せでなぜかValidationが機能せず、そのためにエラーメッセージが表示されないというわりと重大な問題が発生した。（保存自体はされない。エラーメッセージがerrorsに格納されてない）
Validationをみても問題はなさそうだし、.createだとValidationが効かないということで確認しても問題はなく、原因の切り分けができなかったため、暫定的にフラッシュメッセージで対応している。
#プロフィール画面（ホーム画面）
完成後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/b84b369c-d3e3-42ef-d931-8a12c0ddec69.png)
ホーム画面はだいぶひどかったけどなんとか見れるようにはなった・・・。
CSSはだいぶ苦手意識が正直あったのだけど、少しだけコツを掴めてきた気がする。（Bootstrapにたよりきりだけど・・・）
**CSSをいじって重要だと感じた点**
・ブロックやインラインを意識すること
どの要素をいれたら段落が変わったりするのかを意識することはレイアウトの予期せぬズレなども防ぐことができると思った。
・大枠を考えてから小枠を考えること
例えばBootstrapだったらまずはContainerで中央よせて、そのあとはrowで１２分割して、そこからどれくらいプロフィール画面に割くのか等を考えてある程度作ってから細かい点をコーディングするべきだと思った。
・ボーダーを活用すること。
大枠も小枠も、実際にボーダーを適用させて、自分がいじっているところはどこまであって、なにをどういじればどうなるかをしっかりと視認することができるようになるのでこれはすごくよかった。こんな感じに。
<img width="1421" alt="スクリーンショット 2020-01-21 3.01.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/af2af872-e1c2-771f-509d-88fe5e0bafb3.png">
#これから
ロジックと見た目の大枠がいよいよできたので、まずは操作していて出てきた細かい修正を行っていく。たとえば現時点であるのはこんな感じ。
・一日分の体重を登録してもグラフに反映されない。（グラフに反映されるには少なくとも二つの日付の離れたデータが必要）
・トップページのレスポンシブデザイン化。
・ヘッダーフッターの作成
・削除ボタンのポップアップ
・ロジックのセキュリティ強化・ミス点検
・グラフ編集ページのCSS

これらをやりながら、このサービスがどうなっているか、テーブルの相互関係、各機能のロジックを整理しておきたい。見た目とかやってると忘れてしまいそうになる。