フォームの長さ変えるだけで地獄をみる
なんか最近女性にマウントされることが多いです。めんどくせぇ。
というわけで、ひきつづき見た目の編集。
[ anime_titles/show.html.erb ]
<p> <strong>アニメの詳細情報:</strong> <%= render partial: 'anime_details/staffandcast', locals: { anime_title: @anime_title, anime_details: @anime_details } %> </p>
[ anime_titles_controller.rb ]
def show @anime_title = AnimeTitle.find(params[:id]) @anime_details = @anime_title.anime_details # @anime_title.[今のパス配下のid] のanime_detailsのみを参照する end
と、とりあえずパーシャルぶちこんで表示できた。(_staffandcast.html.erbにはanime_detailsテーブルを表示させてる)
あとは見た目のレイアウトを綺麗にしよう。
リストになっているデータをカラムごとに表示させる
違うテーマのcssを参考に。blacktie.co
このへんはキリがないので一旦ざっくりやって終わらそう。
[ style_b.css ] ※上のテーマから必要なものだけ抜き取って記述。application.css.scssで@importするのを忘れずに!
/* anime_details/_staffandcastで利用 */ .ptb {padding-top: 80px; padding-bottom: 80px;} .centered {text-align: center} .mb {margin-bottom: 50px;} /* grey section */ #g { padding-top: 50px; padding-bottom: 50px; background: #f5f5f5; }
[ anime_details/_staffandcast.html.erb ]
<dev class="container ptb"> <div class="row"> <h2 class="centered mb">スタッフなど</h2> <% @anime_details.each do |anime_detail| %> <div class="col-md-6"> <p><%= anime_detail.profile %></p> </div><!-- /col-md-6 --> <% end %> </div><!-- /row --> </dev><!-- /.container --> <div id="g"> <div class="container"> <div class="row centered"> <h2>オープニングテーマ</h2> <% @anime_details.each do |anime_detail| %> <div class="col-md-8 col-md-offset-2"> <p>artist: <%= anime_detail.op_artist %></p> <p>title: <%= anime_detail.op_title %></p><br/> </div><!-- /col-md-8 --> <% end %> </div><!-- /row --> </div><!-- /.container --> </div>
一応これでリストのカラムごとにレコードならべることできるのだけど、絶対スマートじゃないよね。もっといい方法ある気がする。
ついでに各ページへのリンクがおかしかったので修正。ネストされてる部分のリンクはだいたいこんな感じ。
<%= link_to 'Show', action: :show, anime_title_id: @anime_detail.anime_title_id, id: @anime_detail.id %> | <%= link_to 'Back', action: :index, anime_title_id: @anime_detail.anime_title_id %>
フォームを長くしたい
フォーム短すぎてイケてないので修正。以前にどっかのサイト見ながらやったやつやこれ。www.ohmyenter.com
色々やってみたけどsimple_formじゃないとうまく動かないぽいぞ。。。けどbootstrap-sass入れてるからlessの適用方法じゃどうにもならんしな。。。
とりあえず色々見た結果、まずはプロジェクトにインストールする必要があるらしい。
> rails g simple_form:install --bootstrap create config/initializers/simple_form.rb create config/initializers/simple_form_bootstrap.rb exist config/locales create config/locales/simple_form.en.yml create lib/templates/erb/scaffold/_form.html.erb =============================================================================== Be sure to have a copy of the Bootstrap stylesheet available on your application, you can get it on http://getbootstrap.com/. Inside your views, use the 'simple_form_for' with one of the Bootstrap form classes, '.form-horizontal' or '.form-inline', as the following: = simple_form_for(@user, html: { class: 'form-horizontal' }) do |form| ===============================================================================
...コードすっきりさせるだけでフィールドの長さは関係ないご様子。
クラスにwidth指定してみたけどどうもうまくいかず。ビューヘルパーのスタイル指定の方が優先されている疑惑。
これ以上いじってもアレすぎてアレなので、simple_formに書き換える。ruby-rails.hatenadiary.com
www.ohmyenter.com
www.ohmyenter.com
このあたりを参考に書き換え。
<%= simple_form_for [@anime_title, @anime_detail] do |f| %> <% @anime_detail.anime_title_id = @anime_title.id %> <%= f.input :anime_title_id, :readonly => true %> <%= f.input :profile %> <%= f.input :op_title %> <%= f.input :op_artist %> <%= f.input :op_movie %> <%= f.input :profile %> <%= f.input :ed_title %> <%= f.input :ed_artist %> <%= f.input :ed_movie %> <div class="actions"> <%= f.submit %> </div> <% end %>
simple_formだとついでに空テーブルができないようにバリデーションもつけれるので、モデルクラスに書いておく。
[ models/anime_detail.rb ]
... validates :profile, presence: true # プロフィールが空の場合エラー ...
横幅100%なのをどうにかしようと'form-horizontal'を入れてみる。
なぜ一緒にwrapperを記述する必要あるのかよくわかってなかったが、解説みっけた↓techracho.bpsinc.jp
<%= simple_form_for [@anime_title, @anime_detail], wrapper: "horizontal_form", :html => { :class => 'form-horizontal' } do |f| %>
すると幅がブラウザを微妙にはみ出すという事象が発生。
ちょっとだけ横に動くのが非常に気持ち悪い。なんとかならんのかこれ。
ruby-rails.hatenadiary.com
formそれぞれの属性を指定する方法を見つけた。大きく外枠にform-horizontal入れるだけではなくて、それぞれのフォームへもform-groupクラスを指定すればよいっぽい。
上のフォームがform-group指定した状態。こんな感じで変わりました。
他にも適用。anime_title_idは表示のみなのでフォームは最小限に。submitボタンへのクラス指定もちょっと変えてみる。
<%= 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;'} %> <%= f.input :profile, label: "プロフィール", input_html:{ class: 'form-group'} %> <%= f.input :op_title, label: "オープニングテーマ", input_html:{ class: 'form-group'} %> <%= f.input :op_artist, label: "OPアーティスト", input_html:{ class: 'form-group'} %> <%= f.input :op_movie, label: "OP動画", hint: "埋め込み用URLを入力", input_html:{ class: 'form-group'} %> <%= f.input :ed_title, label: "エンディングテーマ", input_html:{ class: 'form-group'} %> <%= f.input :ed_artist, label: "EDアーティスト", input_html:{ class: 'form-group'} %> <%= f.input :ed_movie, label: "ED動画", hint: "埋め込み用URLを入力", input_html:{ class: 'form-group'} %> <div class="actions"> <%= f.submit :class => 'btn-primary' %> </div> <% end %>
なんかまだちょっと動くな。。。まぁ、これ以上やると長くなるのでとりあえずここまで。
フォームを縦に長くする
rows使えば一瞬でした
<%= f.input :profile, label: "プロフィール", input_html:{ class: 'form-group', :rows => 5 } %>
フォーム、例外検証したらエラー発生した。。。なんなんだもう!原因わからn!
残課題
- detail情報を適当な形で表示する(youtube動画embed)
- anime_title#show内にdetail情報も入れ込む(パーシャル利用)
- レイアウトよくする
- フォームの例外処理エラー直す