Skip to content

dhp-venshop
dhp-venshop
Commit 0f75f6bb by Hoang Phuc Do
Options

Customize pagination template

parent 7b3c43dc
Showing with 107 additions and 25 deletions
app/assets/stylesheets/main_style.css
...@@ -154,6 +154,84 @@ blockquote cite { ...@@ -154,6 +154,84 @@ blockquote cite {
font-weight: 400; font-weight: 400;
} }
/* ----------- 3.Elements -------------
--------------------------------------*/
/* Pagination & Pager */
.pagination {
margin: 0 0 50px;
}
@media (min-width: 768px) {
.pagination {
margin-bottom: 60px;
}
}
.pagination > li > a,
.pagination > li > span {
border: 1px solid transparent;
border-radius: 50% !important;
transition: all .3s;
padding: 0px 3px;
margin: 0 6px 0 0;
min-width: 36px;
height: 36px;
line-height: 36px;
color: #717179;
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
background: transparent;
text-align: center;
}
@media (min-width: 768px) {
.pagination > li > a,
.pagination > li > span {
margin-right: 12px;
}
}
.pagination > li > a i,
.pagination > li > span i {
line-height: inherit;
font-weight: 500;
}
.pagination > li > a:hover, .pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
color: #dc9831;
background-color: transparent;
border-color: transparent;
}
.pagination > li:first-child:not(.active) > a,
.pagination > li:first-child:not(.active) > span {
min-width: 0;
padding-left: 0;
}
.pagination > li.dots > span {
min-width: 0;
padding: 0;
}
.pagination > .active > a,
.pagination > .active > span {
color: #262634;
border-color: #dc9831;
}
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
background-color: transparent;
color: #262634;
border-color: #dc9831;
}
/* ----------- 7.Category -------------- /* ----------- 7.Category --------------
--------------------------------------*/ --------------------------------------*/
.category-header { .category-header {
......
app/views/kaminari/_first_page.html.erb
...@@ -6,6 +6,6 @@ ...@@ -6,6 +6,6 @@
per_page: number of items to fetch per page per_page: number of items to fetch per page
remote: data-remote remote: data-remote
-%> -%>
<span class="first"> <li class="first">
<%= link_to_unless current_page.first?, t('views.pagination.first').html_safe, url, remote: remote %> <%= link_to_unless current_page.first?, t('views.pagination.first').html_safe, url, remote: remote %>
</span> </li>
app/views/kaminari/_gap.html.erb
...@@ -5,4 +5,6 @@ ...@@ -5,4 +5,6 @@
per_page: number of items to fetch per page per_page: number of items to fetch per page
remote: data-remote remote: data-remote
-%> -%>
<span class="page gap"><%= t('views.pagination.truncate').html_safe %></span> <li class="dots">
<a href="#"><%= t('views.pagination.truncate').html_safe %></a>
</li>
app/views/kaminari/_last_page.html.erb
...@@ -6,6 +6,6 @@ ...@@ -6,6 +6,6 @@
per_page: number of items to fetch per page per_page: number of items to fetch per page
remote: data-remote remote: data-remote
-%> -%>
<span class="last"> <li class="last">
<%= link_to_unless current_page.last?, t('views.pagination.last').html_safe, url, remote: remote %> <%= link_to_unless current_page.last?, t('views.pagination.last').html_safe, url, remote: remote %>
</span> </li>
app/views/kaminari/_next_page.html.erb
...@@ -6,6 +6,6 @@ ...@@ -6,6 +6,6 @@
per_page: number of items to fetch per page per_page: number of items to fetch per page
remote: data-remote remote: data-remote
-%> -%>
<span class="next"> <li class="next">
<%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, rel: 'next', remote: remote %> <%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, rel: 'next', remote: remote %>
</span> </li>
app/views/kaminari/_page.html.erb
...@@ -7,6 +7,6 @@ ...@@ -7,6 +7,6 @@
per_page: number of items to fetch per page per_page: number of items to fetch per page
remote: data-remote remote: data-remote
-%> -%>
<span class="page<%= ' current' if page.current? %>"> <li class="page<%= ' active' if page.current? %>">
<%= link_to_unless page.current?, page, url, {remote: remote, rel: page.rel} %> <%= link_to page, url, opts = {:remote => remote, :class => 'page-link', :rel => page.next? ? 'next' : page.prev? ? 'prev' : nil} %>
</span> </li>
app/views/kaminari/_paginator.html.erb
...@@ -7,19 +7,21 @@ ...@@ -7,19 +7,21 @@
paginator: the paginator that renders the pagination tags inside paginator: the paginator that renders the pagination tags inside
-%> -%>
<%= paginator.render do -%> <%= paginator.render do -%>
<nav class="pagination"> <nav aria-label="Page Navigation">
<%= first_page_tag unless current_page.first? %> <ul class="pagination">
<%= prev_page_tag unless current_page.first? %> <%= first_page_tag unless current_page.first? %>
<% each_page do |page| -%> <%= prev_page_tag unless current_page.first? %>
<% if page.display_tag? -%> <% each_page do |page| -%>
<%= page_tag page %> <% if page.display_tag? -%>
<% elsif !page.was_truncated? -%> <%= page_tag page %>
<%= gap_tag %> <% elsif !page.was_truncated? -%>
<%= gap_tag %>
<% end -%>
<% end -%> <% end -%>
<% end -%> <% unless current_page.out_of_range? %>
<% unless current_page.out_of_range? %> <%= next_page_tag unless current_page.last? %>
<%= next_page_tag unless current_page.last? %> <%= last_page_tag unless current_page.last? %>
<%= last_page_tag unless current_page.last? %> <% end %>
<% end %> </ul>
</nav> </nav>
<% end -%> <% end -%>
app/views/kaminari/_prev_page.html.erb
...@@ -6,6 +6,6 @@ ...@@ -6,6 +6,6 @@
per_page: number of items to fetch per page per_page: number of items to fetch per page
remote: data-remote remote: data-remote
-%> -%>
<span class="prev"> <li class="prev">
<%= link_to_unless current_page.first?, t('views.pagination.previous').html_safe, url, rel: 'prev', remote: remote %> <%= link_to_unless current_page.first?, t('views.pagination.previous').html_safe, url, rel: 'prev', remote: remote %>
</span> </li>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment