Claudio Ortolina
6e638b8f20
- Remove unnecessary buttons - can click directly on cards - Enable shortcuts to lists filtered by format
57 lines
2.0 KiB
Plaintext
57 lines
2.0 KiB
Plaintext
<div>
|
|
<dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
|
|
<div
|
|
class="relative overflow-hidden rounded-lg bg-white px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6 sm:col-span-2 cursor-pointer"
|
|
phx-click={JS.navigate(~p"/records/#{@latest_record}")}
|
|
>
|
|
<dt>
|
|
<img
|
|
class="absolute max-w-14 rounded-lg shadow"
|
|
src={~p"/covers/#{@latest_record.id}"}
|
|
alt={@latest_record.title}
|
|
/>
|
|
<p class="ml-16 truncate text-xs sm:text-sm font-medium text-gray-500">
|
|
Latest record
|
|
</p>
|
|
</dt>
|
|
<dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
|
|
<p class="font-semibold">
|
|
<span class="text-sm md:text-base lg:text-2xl text-gray-900">
|
|
<%= format_artist_names(@latest_record.artists) %>
|
|
</span>
|
|
<span class="text-sm md:text-base block sm:inline text-gray-600">
|
|
<%= @latest_record.title %>
|
|
</span>
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
<div class="overflow-hidden rounded-lg bg-white px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6">
|
|
<dt>
|
|
<p class="truncate text-sm font-medium text-gray-500">Total Records</p>
|
|
</dt>
|
|
<dd class="flex items-baseline pb-6 sm:pb-7">
|
|
<a href={~p"/records"} class="text-2xl font-semibold text-gray-900">
|
|
<%= @records_count %>
|
|
</a>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div>
|
|
<dl class="mt-5 grid divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow grid-cols-5 md:divide-x md:divide-y-0">
|
|
<div :for={{format, count} <- @records_count_by_format} class="px-4 py-5 sm:p-6">
|
|
<dt class="text-base max-sm:text-xs font-normal text-gray-900 break-keep">
|
|
<%= Record.format_long_label(format) %>
|
|
</dt>
|
|
<dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
|
|
<div class="flex items-baseline text-2xl font-semibold">
|
|
<a href={~p"/records?query=format:#{format}"}>
|
|
<%= count %>
|
|
</a>
|
|
</div>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|