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

Update colors for stats page

Browse Source
This commit is contained in:
Claudio Ortolina
2024-10-23 20:33:28 +01:00
parent eba1e2eca8
commit ebc827dcfe
1 changed files with 31 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/controllers/stats_html/index.html.heex
+31 -19
View File
@@ -1,10 +1,10 @@
<div>
<h1 class="mt-5 text-base lg:text-2xl text-gray-900 font-semibold">
<h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold">
<%= gettext("Basics") %>
</h1>
<dl class="mt-5 grid grid-cols-2 gap-5 sm:grid-cols-5">
<div
class="relative overflow-hidden rounded-lg bg-white px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6 col-span-2 sm:col-span-3 cursor-pointer"
class="relative overflow-hidden rounded-lg bg-white dark:bg-zinc-700 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6 col-span-2 sm:col-span-3 cursor-pointer"
phx-click={JS.navigate(~p"/records/#{@latest_record}")}
>
<dt>
@@ -13,7 +13,7 @@
src={~p"/covers/#{@latest_record.id}"}
alt={@latest_record.title}
/>
<p class="ml-24 truncate text-xs sm:text-sm font-medium text-gray-500">
<p class="ml-24 truncate text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400">
<%= gettext("Latest purchase") %>
</p>
</dt>
@@ -21,37 +21,43 @@
<p class="font-semibold">
<.link
:for={artist <- @latest_record.artists}
class="text-sm md:text-base lg:text-2xl text-gray-900 hover:text-gray-500"
class="text-sm md:text-base lg:text-2xl text-gray-900 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
patch={~p"/records?query=mbid:#{artist.musicbrainz_id}"}
>
<%= artist.name %>
</.link>
<span class="text-sm md:text-base block text-gray-600">
<span class="text-sm md:text-base block text-gray-600 dark:text-gray-200">
<%= @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">
<div class="overflow-hidden rounded-lg bg-white dark:bg-zinc-700 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6">
<dt>
<p class="truncate text-sm font-medium text-gray-500">
<p class="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
<%= gettext("Total collection") %>
</p>
</dt>
<dd class="flex items-baseline pb-6 sm:pb-7">
<a href={~p"/records"} class="text-2xl font-semibold text-gray-900 hover:text-gray-500">
<a
href={~p"/records"}
class="text-2xl font-semibold text-gray-900 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
>
<%= @collection_count %>
</a>
</dd>
</div>
<div class="overflow-hidden rounded-lg bg-white px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6">
<div class="overflow-hidden rounded-lg bg-white dark:bg-zinc-700 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6">
<dt>
<p class="truncate text-sm font-medium text-gray-500">
<p class="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
<%= gettext("Total wishlist") %>
</p>
</dt>
<dd class="flex items-baseline pb-6 sm:pb-7">
<a href={~p"/wishlist"} class="text-2xl font-semibold text-gray-900 hover:text-gray-500">
<a
href={~p"/wishlist"}
class="text-2xl font-semibold text-gray-900 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
>
<%= @wishlist_count %>
</a>
</dd>
@@ -60,17 +66,20 @@
</div>
<div>
<h1 class="mt-5 text-base lg:text-2xl text-gray-900 font-semibold">
<h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold">
<%= gettext("Formats") %>
</h1>
<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">
<dl class="mt-5 grid divide-y divide-gray-200 dark:divide-slate-300/10 overflow-hidden rounded-lg bg-white dark:bg-zinc-700 shadow grid-cols-5 md:divide-x md:divide-y-0">
<div :for={{format, count} <- @collection_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">
<dt class="text-base max-sm:text-xs font-normal text-gray-900 dark:text-gray-400 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 class="hover:text-gray-500" href={~p"/records?query=format:#{format}"}>
<a
class="hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
href={~p"/records?query=format:#{format}"}
>
<%= count %>
</a>
</div>
@@ -80,17 +89,20 @@
</div>
<div>
<h1 class="mt-5 text-base lg:text-2xl text-gray-900 font-semibold">
<h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold">
<%= gettext("Types") %>
</h1>
<dl class="mt-5 grid divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow grid-cols-6 md:divide-x md:divide-y-0">
<dl class="mt-5 grid divide-y divide-gray-200 dark:divide-slate-300/10 overflow-hidden rounded-lg bg-white dark:bg-zinc-700 shadow grid-cols-6 md:divide-x md:divide-y-0">
<div :for={{type, count} <- @collection_count_by_type} class="px-4 py-5 sm:p-6">
<dt class="text-base max-sm:text-xs font-normal text-gray-900 break-keep">
<dt class="text-base max-sm:text-xs font-normal text-gray-900 dark:text-gray-400 break-keep">
<%= Record.type_long_label(type) %>
</dt>
<dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
<div class="flex items-baseline text-2xl font-semibold">
<a class="hover:text-gray-500" href={~p"/records?query=type:#{type}"}>
<a
class="hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
href={~p"/records?query=type:#{type}"}
>
<%= count %>
</a>
</div>