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

Improve stats interface

Browse Source 
- Remove unnecessary buttons - can click directly on cards
- Enable shortcuts to lists filtered by format
This commit is contained in:
Claudio Ortolina
2024-10-14 09:50:30 +01:00
parent aa120f674e
commit 6e638b8f20
1 changed files with 11 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/controllers/stats_html/index.html.heex
+11 -21
View File
@@ -1,6 +1,9 @@
<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-12 pt-5 shadow sm:px-6 sm:pt-6 sm:col-span-2">
<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"
@@ -20,31 +23,16 @@
<%= @latest_record.title %>
</span>
</p>
<div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
<div class="text-sm">
<a
href={~p"/records/#{@latest_record.id}"}
class="font-medium text-zinc-600 hover:text-zinc-500"
>
View<span class="sr-only"> record</span>
</a>
</div>
</div>
</dd>
</div>
<div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
<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">
<p class="text-2xl font-semibold text-gray-900"><%= @records_count %></p>
<div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
<div class="text-sm">
<a href={~p"/records"} class="font-medium text-zinc-600 hover:text-zinc-500">
View all<span class="sr-only"> records</span>
</a>
</div>
</div>
<a href={~p"/records"} class="text-2xl font-semibold text-gray-900">
<%= @records_count %>
</a>
</dd>
</div>
</dl>
@@ -58,7 +46,9 @@
</dt>
<dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
<div class="flex items-baseline text-2xl font-semibold">
<%= count %>
<a href={~p"/records?query=format:#{format}"}>
<%= count %>
</a>
</div>
</dd>
</div>