cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix pagination links for smallest viewport

Browse Source
This commit is contained in:
Claudio Ortolina
2024-09-27 10:39:08 +01:00
parent 92de18e493
commit 17b7a56e70
1 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/pagination.ex
+14 -7
View File
@@ -15,21 +15,24 @@ defmodule MusicLibraryWeb.Pagination do
class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
>
<%!-- Only on smallest viewport --%>
<div class="flex flex-1 justify-between sm:hidden">
<a
<div class={[
"flex flex-1 sm:hidden",
justify_content(@page_links.prev_page, @page_links.next_page)
]}>
<.link
:if={@page_links.prev_page}
href="#"
patch={"?" <> encode_query(page: @page_links.prev_page, page_size: @pagination_params.page_size, query: @pagination_params.query)}
class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
>
Previous
</a>
<a
</.link>
<.link
:if={@page_links.next_page}
href="#"
patch={"?" <> encode_query(page: @page_links.next_page, page_size: @pagination_params.page_size, query: @pagination_params.query)}
class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
>
Next
</a>
</.link>
</div>
<div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-items-center sm:justify-center">
<div>
@@ -74,6 +77,10 @@ defmodule MusicLibraryWeb.Pagination do
"""
end
defp justify_content(nil, _next_page), do: "justify-end"
defp justify_content(_prev_page, nil), do: "justify-start"
defp justify_content(_prev_page, _next_page), do: "justify-between"
attr :page_number, :integer, required: true
attr :page_size, :integer, required: true
attr :query, :string, required: true