微妙に調整をすすめていくとgit管理の偉大さが身にしみる
プロフィールに何書くか忘れるのでコピペ用文章を表示させる
本当はプロフィールの項目ごとにカラム切ってテーブルにすべきなんだけども、とりま今はまるっと入れてる。
ただよく何をプロフにしているのか忘れるので、入力フィールドの上に項目を表示しておけばコピペできんじゃね?
ってことでやってみる。
_formでフォームエリアにくっついてるクラスを頼りにbootstrapのグリッド調整。
[_form.erb.html]
<%= simple_form_for [@anime_title, @anime_detail], wrapper: "horizontal_form", :html => { :class => 'form-horizontal' } do |f| %> <% @anime_detail.anime_title_id = @anime_title.id %> <%= f.input :anime_title_id, :readonly => true, input_html:{ style: 'width:50px;'} %> <p class="col-sm-3 control-label"></p><p class="col-sm-9">原作: 監督: 脚本: 音楽: アニメーション制作:</p> <%= f.input :profile, label: "プロフィール", input_html:{ class: 'form-group', :rows => 5 } %> ... <% end %>
それっぽいのができた。
col-sm-3はなくてもいけるかな、と思ったけど消したら崩れたので、記載する必要はあるっぽい。
pじゃなくてspanで書いたほうがいいのかもしれないけどとりあえず動いたからいいか。
レイアウトの微調整
detail画面のレイアウトを微調整していく。git diffを使えるようになると変更点がめちゃくちゃわかりやすい…!
以下びちょうせい。
- youtubeエンベッド動画の下部にマージン20px(scss追記)
- いけてない文章を修正
- detailページにアニメタイトルを表示
- OP/EDアーティスト、タイトルの修正
- 上部にマージンを追加
- アーティスト名称、タイトル名称を強調
上記2つはこんな感じ。(-が変更前、 +が変更後)
- <p>artist: <%= anime_detail.op_artist %></p> - <p>title: <%= anime_detail.op_title %></p><br/> + <br><p>artist:<span class="h3"> <%= anime_detail.op_artist %></span></p> + <p>title:<span class="h3"> <%= anime_detail.op_title %></span></p>
TODO:
- フォームの例外処理エラーとか横幅とかいろいろおかしい件
- トップからtitle/showへの遷移、2回目以降がなぜかおかしな位置(ページ中段)に遷移するので修正