extraction de styles pour la pagination

This commit is contained in:
Jérémy Lecour 2021-02-09 18:58:28 +01:00 committed by Jérémy Lecour
parent ee9c40391f
commit 82e16982b9
8 changed files with 32 additions and 8 deletions

View file

@ -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;
}
}

View file

@ -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>

View file

@ -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">

View file

@ -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>

View file

@ -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">

View file

@ -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">

View file

@ -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?}"} %>

View file

@ -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">