#86 11/19 イベント作成ページのデザイン
このサイトCSSの様々なフォームとかのっててよい
https://kodocode.net/design-css-selectlist/
・イベントを探す
_event.html.erbがひとかたまり
・以下イメージ
画像
場所 年齢 名前
ひとこと
・まずHTMLでいるもの
日程の項目 →eventの方の、年数いる?
時間の表記 →時間だけで良い
年齢の表記 →生年月日から年齢の表示
騒ぎたい項目いる→?
日程/時間の項目
formatを作成
https://ruby-rails.hatenadiary.com/entry/20141226/1419600679
Date::DATE_FORMATS[:default] = "%m/%d"
これで成功。
時間の表記も、成功。
年齢の表記
→一旦ステイ。
騒ぎたい項目
→削除
■画像の調整
画像サイズ調整というよりは、
表示する際のサイズ調整
<div class="picture"><%= link_to image_tag(event.user.image.to_s,:size =>'320x480'), event.user,class:"picture" %></div>
クラスは、imagetag の()の中に記載!!
これが正解
https://qiita.com/sanstktkrsyhsk/items/8e8159f5c029a8e01333
object-fitの話(その部分だけ切り抜く)
https://www.webcreatorbox.com/tech/object-fit
■各項目の調整
https://jdash.info/archives/Masonry_CSS_on_Bootstrap
gridシステムについて
http://websae.net/twitter-bootstrap-grid-system-21060224/
■それを2つずつ表示
<col6>
row 画像
row 名前
row (col4 col4 col4) 場所 日程 時間
row コンテンツ
</col>
<div class="col-xs-6">
をgrid-user-item-listの上に書いて、成功。
xsにすることが重要!
■全体の背景
白でいく
■上の検索フォーム
周辺を、囲み枠でデザインしたら いい感じになった
https://saruwakakun.com/html-css/reference/box
■画像の大きさ
画像の縦横比。。。
高さが250px決まっているから 、中入れない、、
■文字が大きい時の処理
.event-list{
height: 100%;
}
で調整