Fix side padding inconsistencies in collection view

This commit is contained in:
Claudio Ortolina
2024-10-15 14:58:14 +01:00
parent 2cd376ae5d
commit dafcd0ed6f
3 changed files with 30 additions and 31 deletions
@@ -489,7 +489,7 @@ defmodule MusicLibraryWeb.CoreComponents do
<tbody <tbody
id={@id} id={@id}
phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"} phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700" class="relative divide-y divide-zinc-100 border-t border-b border-zinc-200 text-sm leading-6 text-zinc-700"
> >
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50"> <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
<td <td
@@ -11,10 +11,7 @@ defmodule MusicLibraryWeb.Pagination do
assigns = assign(assigns, :page_links, page_links) assigns = assign(assigns, :page_links, page_links)
~H""" ~H"""
<div <div id={@id} class="flex items-center justify-between bg-white px-4 py-6 mb-4">
id={@id}
class="flex items-center justify-between border-t border-zinc-200 bg-white px-4 py-6 sm:px-6 mb-4"
>
<%!-- Only on smallest viewport --%> <%!-- Only on smallest viewport --%>
<div class={[ <div class={[
"flex flex-1 sm:hidden", "flex flex-1 sm:hidden",
@@ -1,30 +1,32 @@
<header class="gap-6 mb-2"> <div class="px-4 sm:px-0">
<h1 class="text-lg font-semibold leading-8 text-zinc-800">All Records</h1> <header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2"> <h1 class="text-lg font-semibold leading-8 text-zinc-800">All Records</h1>
<form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search"> <div class="flex items-center justify-between gap-6 mb-2 mt-2">
<input <form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search">
type="search" <input
class="w-full rounded-lg text-zinc-900 border-gray-300 focus:border-zinc-400 focus:ring-0 sm:text-sm sm:leading-6" type="search"
id={:query} class="w-full rounded-lg text-zinc-900 border-gray-300 focus:border-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
name={:query} id={:query}
value={@record_list_params.query} name={:query}
placeholder="Search" value={@record_list_params.query}
phx-debounce="500" placeholder="Search"
autocorrect="off" phx-debounce="500"
autocapitalize="none" autocorrect="off"
/> autocapitalize="none"
</form> />
<.link patch={~p"/records/import"}> </form>
<.button>Import</.button> <.link patch={~p"/records/import"}>
</.link> <.button>Import</.button>
</div> </.link>
</header> </div>
</header>
<p class="text-right text-base max-sm:text-xs mt-8"> <p class="text-right text-base max-sm:text-xs mt-8">
Showing <b><%= Enum.count(@streams.records) %></b> Showing <b><%= Enum.count(@streams.records) %></b>
of <b><%= @record_list_params.total_entries %></b> of <b><%= @record_list_params.total_entries %></b>
records records
</p> </p>
</div>
<.table <.table
id="records" id="records"