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

Improve formatting of stats

Browse Source 
- Simple markup
- Better spacing at alignment on all viewports
This commit is contained in:
Claudio Ortolina
2024-10-28 11:19:30 +00:00
parent 850a3c7d90
commit 4cbdf6b2b2
2 changed files with 19 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/controllers/stats_html/index.html.heex
+18 -22
View File
@@ -70,19 +70,17 @@
<%= gettext("Formats") %>
</h1>
<dl class="mt-5 grid divide-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow grid-cols-5 divide-x">
<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 dark:text-gray-400 break-keep">
<div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4">
<dt class="text-base text-center 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 dark:text-gray-300 dark:hover:text-gray-200"
href={~p"/records?query=format:#{format}"}
>
<%= count %>
</a>
</div>
<dd class="mt-1 text-center">
<a
class="text-xl font-semibold hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
href={~p"/records?query=format:#{format}"}
>
<%= count %>
</a>
</dd>
</div>
</dl>
@@ -93,19 +91,17 @@
<%= gettext("Types") %>
</h1>
<dl class="mt-5 grid divide-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow grid-cols-6 divide-x">
<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 dark:text-gray-400 break-keep">
<div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4">
<dt class="text-base text-center 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 dark:text-gray-300 dark:hover:text-gray-200"
href={~p"/records?query=type:#{type}"}
>
<%= count %>
</a>
</div>
<dd class="mt-1 text-center">
<a
class="text-xl font-semibold hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
href={~p"/records?query=type:#{type}"}
>
<%= count %>
</a>
</dd>
</div>
</dl>
priv/gettext/default.pot
+1 -1
View File
@@ -330,7 +330,7 @@ msgstr ""
msgid "Formats"
msgstr ""
#: lib/music_library_web/controllers/stats_html/index.html.heex:93
#: lib/music_library_web/controllers/stats_html/index.html.heex:91
#, elixir-autogen, elixir-format
msgid "Types"
msgstr ""