2015/07/19

ルック&フィールを一気に片付ける

kaminari でページ、bootstrapで全体フィール、ransackで検索とソート を作っておしまいにする

bootstrapとkaminariは以下の記事を参考にして、さくさくっと。
http://ruby-rails.hatenadiary.com/entry/20140801/1406818800
http://ruby-rails.hatenadiary.com/entry/20141113/1415874683#kaminari-install-with-bootstrap

Gemfileに以下を追加して、bundle install !
gem 'kaminari'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'ransack'

kaminari
$ rails g kaminari:config

コントローラファイル編集
@programs = Program.all

@programs = Program.page(params[:page])

ビューファイル編集
<%= paginate @programs %>

を最後に加えるだけ

bootstrap
$ rails g bootstrap:install
$ rails g bootstrap:themed Programs
$ rails g kaminari:views bootstrap3 ← rail3だと適応できなかったけど、rail4だと大丈夫だ。

これでProgramビューを一気にいい感じにしてくれる。


ここまでやったら、viewsを少し整えます。

models/programs.rb

  belongs_to :channel
  belongs_to :category
と書いておくと、あら不思議、channel_idとcategory_idから勝手にjoinした状態でアクセスできるようになります。

views/programs/index.html.erb
@program.channel_idを、@program.channel.nameに書き換えれば、その番組のchannel名を簡単に表示される。

scaffoldやbootstrapで自動作成したリストから不要な表示を削除してすっきりさせる。
showページへは、idからのリンクではなく、titleからのリンクにしたいので
id表示を削除して、title部分を

<td><%= link_to program.title, program_path(program) %></td>

のようにします。
detailや、録画予約ボタンはshowページで後ほど。

config/initializers/time_formats.rb ファイルを作成し、以下のように

Time::DATE_FORMATS[:default] = '%Y/%m/%d %H:%M'
class Integer
    def time_duration
        Time.at(self).utc.strftime('%H:%M')
    end
end

開始と終了時間、及び長さの時間表示フォーマットをここで定義しちゃいます。
durationは整数なんでIntegerクラスに変換メソッドを定義しておきます。

で、start_at,end_atは勝手にそのフォーマットで表示され、durationは、duration.time_durationってやれば時:分で表示されるように。

後は、config/application.rb で日本だよってやって、
    config.time_zone = 'Tokyo'
    config.active_record.default_timezone = :local
    config.i18n.default_locale = :ja

config/locales/ja.yml を用意して
ja:
  activerecord:
    models:
      program: 番組
    attributes:
      program:
        title: タイトル
      programs:
        title: タイトル
  title: タイトル
  start_at: 開始時間
  end_at: 終了時間
  duration: 長さ
  channel: チャンネル
  category: カテゴリ
 みたいにしておくとリストヘッダとか諸々日本語になる。
 プライベートアプリなので、直接日本語書いてしまえばいいと思うが、遠回りすることが実験なのでね。

0 件のコメント:

コメントを投稿