ロイの奮闘記録

PdMをやってるロイの日記です。人のつながりを増やしたいと思いながら、社会と奮闘しています

#86 イベント作成/イベントを探すページのデザイン

#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%;
}

で調整