[Enhancement] Improve handling of large media collections (#272)
* Added compound index for updated media item table for performance * Improved large number display on homepage * Improved UI around large numbers * Centered the content of homepage data cards * Renamed migration
This commit is contained in:
@@ -22,7 +22,9 @@ defmodule Pinchflat.Pages.HistoryTableLive do
|
||||
<div>
|
||||
<span class="mb-4 flex items-center">
|
||||
<.icon_button icon_name="hero-arrow-path" class="h-10 w-10" phx-click="reload_page" tooltip="Refresh" />
|
||||
<span class="ml-2">Showing <%= length(@records) %> of <%= @total_record_count %></span>
|
||||
<span class="ml-2">
|
||||
Showing <.localized_number number={length(@records)} /> of <.localized_number number={@total_record_count} />
|
||||
</span>
|
||||
</span>
|
||||
<div class="max-w-full overflow-x-auto">
|
||||
<.table rows={@records} table_class="text-white">
|
||||
|
||||
@@ -1,33 +1,39 @@
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-4">
|
||||
<div class="rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
|
||||
<a href={~p"/media_profiles"} class="mt-4 flex flex-col items-center justify-center">
|
||||
<span class="text-md font-medium">Media Profile(s)</span>
|
||||
<div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
|
||||
<a href={~p"/media_profiles"} class="flex flex-col items-center py-2">
|
||||
<span class="text-md font-medium">
|
||||
Media <.pluralize count={@media_profile_count} word="Profile" />
|
||||
</span>
|
||||
<h4 class="text-title-md font-bold text-white">
|
||||
<%= @media_profile_count %>
|
||||
<.localized_number number={@media_profile_count} />
|
||||
</h4>
|
||||
</a>
|
||||
</div>
|
||||
<div class="rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
|
||||
<a href={~p"/sources"} class="mt-4 flex flex-col items-center justify-center">
|
||||
<span class="text-md font-medium">Source(s)</span>
|
||||
<div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
|
||||
<a href={~p"/sources"} class="flex flex-col items-center py-2">
|
||||
<span class="text-md font-medium">
|
||||
<.pluralize count={@source_count} word="Source" />
|
||||
</span>
|
||||
<h4 class="text-title-md font-bold text-white">
|
||||
<%= @source_count %>
|
||||
<.localized_number number={@source_count} />
|
||||
</h4>
|
||||
</a>
|
||||
</div>
|
||||
<div class="rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
|
||||
<span class="mt-4 flex flex-col items-center justify-center">
|
||||
<span class="text-md font-medium">Downloaded Media</span>
|
||||
<div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
|
||||
<span class="flex flex-col items-center py-2">
|
||||
<span class="text-md font-medium">
|
||||
<.pluralize count={@media_item_count} word="Download" />
|
||||
</span>
|
||||
<h4 class="text-title-md font-bold text-white">
|
||||
<%= @media_item_count %>
|
||||
<.localized_number number={@media_item_count} />
|
||||
</h4>
|
||||
</span>
|
||||
</div>
|
||||
<div class="rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
|
||||
<span class="mt-4 flex flex-col items-center justify-center">
|
||||
<div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
|
||||
<span class="flex flex-col items-center py-2">
|
||||
<span class="text-md font-medium">Library Size</span>
|
||||
<h4 class="text-title-md font-bold text-white">
|
||||
<%= readable_media_filesize(@media_item_size) %>
|
||||
<.readable_media_filesize media_filesize={@media_item_size} />
|
||||
</h4>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user