extraction de styles pour la pagination
This commit is contained in:
parent
ee9c40391f
commit
82e16982b9
|
@ -16,4 +16,28 @@
|
|||
.nav-tab {
|
||||
@apply text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium;
|
||||
}
|
||||
|
||||
.paginate-page {
|
||||
@apply relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
|
||||
}
|
||||
|
||||
.paginate-prev-page,
|
||||
.paginate-next-page,
|
||||
.paginate-first-page,
|
||||
.paginate-last-page, {
|
||||
@apply px-2
|
||||
}
|
||||
.paginate-page--current {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
.paginate-first-page {
|
||||
@apply rounded-l-md;
|
||||
}
|
||||
.paginate-last-page {
|
||||
@apply rounded-r-md;
|
||||
}
|
||||
.paginate-page-single {
|
||||
@apply rounded-md text-gray-700 hover:text-gray-500;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -17,8 +17,8 @@
|
|||
|
||||
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
||||
<div class="flex-1 flex justify-between sm:hidden">
|
||||
<%= link_to_previous_page @emails, 'Previous page', class: "ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500" %>
|
||||
<%= link_to_next_page @emails, 'Next Page', class: "relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500" %>
|
||||
<%= link_to_previous_page @emails, 'Previous page', class: "ml-3 paginate-page paginate-page-single" %>
|
||||
<%= link_to_next_page @emails, 'Next Page', class: "paginate-page paginate-page-single" %>
|
||||
</div>
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
per_page: number of items to fetch per page
|
||||
remote: data-remote
|
||||
-%>
|
||||
<%= link_to (current_page.first? ? '#' : url), rel: 'first', remote: remote, class: "relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" do %>
|
||||
<%= link_to (current_page.first? ? '#' : url), rel: 'first', remote: remote, class: "paginate-page paginate-first-page" do %>
|
||||
<span class="sr-only"><%= t('views.pagination.first').html_safe %></span>
|
||||
<!-- Heroicon name: solid/chevron-double-left -->
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
|
|
|
@ -6,6 +6,6 @@
|
|||
remote: data-remote
|
||||
-%>
|
||||
|
||||
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
|
||||
<span class="paginate-page">
|
||||
<%= t('views.pagination.truncate').html_safe %>
|
||||
</span>
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
per_page: number of items to fetch per page
|
||||
remote: data-remote
|
||||
-%>
|
||||
<%= link_to (current_page.last? ? '#' : url), rel: 'last', remote: remote, class: "relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" do %>
|
||||
<%= link_to (current_page.last? ? '#' : url), rel: 'last', remote: remote, class: "paginate-page paginate-last-page" do %>
|
||||
<span class="sr-only"><%= t('views.pagination.last').html_safe %></span>
|
||||
<!-- Heroicon name: solid/chevron-double-right -->
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
per_page: number of items to fetch per page
|
||||
remote: data-remote
|
||||
-%>
|
||||
<%= link_to (current_page.last? ? '#' : url), rel: 'next', remote: remote, class: "relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" do %>
|
||||
<%= link_to (current_page.last? ? '#' : url), rel: 'next', remote: remote, class: "paginate-page paginate-next-page" do %>
|
||||
<span class="sr-only"><%= t('views.pagination.next').html_safe %></span>
|
||||
<!-- Heroicon name: solid/chevron-right -->
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
|
|
|
@ -7,4 +7,4 @@
|
|||
per_page: number of items to fetch per page
|
||||
remote: data-remote
|
||||
-%>
|
||||
<%= link_to page, url, { remote: false, rel: page.rel, class: "inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 #{"bg-gray-100" if page.current?}"} %>
|
||||
<%= link_to page, url, { remote: false, rel: page.rel, class: "paginate-page #{"paginate-page--current" if page.current?}"} %>
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
per_page: number of items to fetch per page
|
||||
remote: data-remote
|
||||
-%>
|
||||
<%= link_to (current_page.first? ? '#' : url), rel: 'prev', remote: remote, class: "relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" do %>
|
||||
<%= link_to (current_page.first? ? '#' : url), rel: 'prev', remote: remote, class: "paginate-page paginate-prev-page" do %>
|
||||
<span class="sr-only"><%= t('views.pagination.previous').html_safe %></span>
|
||||
<!-- Heroicon name: solid/chevron-left -->
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
|
|
Loading…
Reference in a new issue