主にステマブログ

ガチャメーカーについてのブログです。つれづれなるままにひぐらし

kaminariのビューをsemantic-ui用にカスタマイズする

f:id:ylang365:20140302153535j:plain

turbo-linksを切ってscaffoldのscssを整理したら、semanticsのスタイルが思うように

動くようになってきたかもしれない。

画像はsemanticのページネーション。地味ですね・・

 

bootstrapは、それ用のviewを生成してくれるジェネレータがあるが

(ただしbootstrap v2しか対応してない様子) semanticにはそんなもんねえのです。

というわけでメモ。だれがgem作ってください。

 

kaminariをいれる

インストールと設定ファイル作成等の導入は、githubみてやる。

Usageは一番最後に書いたらいいじゃないの?順序が・・

amatsuda/kaminari · GitHub

こちらも。いつも拝見させていただいています。

kaminariをBootstrap3、Rails4環境で使う! - 酒と泪とRubyとRailsと

 

ビューカスタマイズ

まず、デフォルトのビューを生成する

rails g kaminari:views default

そしたら、views/kaminariフォルダができる。

ちなみに、上記のdefaultをbootstrapにするとbootstrap用のビューが生成されるよう。

 

ビューを編集する前にsemnticのPaginationのスタイルを確認しておく。

f:id:ylang365:20140302155729j:plain

 

これにあわせて、生成されたビューを書き直す。正直bootstrapの方が書き易い。

views/kaminari/_pagenator.html.erb 

<%= paginator.render do -%>
    <div class="ui pagination menu">
        <%= first_page_tag unless current_page.first? %>
        <%= prev_page_tag unless current_page.first? %>
        <% each_page do |page| -%>
          <% if page.left_outer? || page.right_outer? || page.inside_window? -%>
            <%= page_tag page %>
          <% elsif !page.was_truncated? -%>
            <%= gap_tag %>
          <% end -%>
        <% end -%>
        <%= next_page_tag unless current_page.last? %>
        <%= last_page_tag unless current_page.last? %>
  </div>
<% end -%>

views/kaminari/_first_page.html.erb 

<% unless current_page.first? %>
    <%= link_to url, remote: remote, class:"icon item" do %>
        <i class="double angle left icon"></i>
    <% end %>
<% end %>

views/kaminari/_last_page.html.erb 

<% unless current_page.last? %>
    <%= link_to url, remote: remote, class:"icon item" do%>
        <i class="double angle right icon"></i>
    <% end %>
<% end %>

views/kaminari/_next_page.html.erb 

<% unless current_page.last? %>
    <%= link_to url, rel:'next', remote: remote, class:"icon item" do%>
        <i class="right arrow icon"></i>
    <% end %>
<% end %>

views/kaminari/_prev_page.html.erb 

<% unless current_page.first? %>
    <%= link_to url, rel:'prev', remote: remote, class:"icon item" do%>
        <i class="left arrow icon"></i>
    <% end %>
<% end %>

views/kaminari/_page.html.erb 

<% if page.current? %>
    <a class="active item"><%= page %></a>
<% else %>
    <%= link_to url, remote: remote, class:"item" do %>
        <%= page %>
    <% end %>
<% end %>

 

完成。小一時間かかった・・やっぱり適切なgemがあると効率的だとおもった。

f:id:ylang365:20140302174009j:plain

両端の矢印はいらない気が。てかちゃんとうごいてんの?後日確認

 

owari