[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:
Kieran
2024-05-29 12:38:03 -07:00
committed by GitHub
parent 22439e0273
commit e751c65424
12 changed files with 146 additions and 42 deletions
@@ -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>