From 4cbdf6b2b2348a545909d72b985dc7b613106749 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 28 Oct 2024 11:19:30 +0000
Subject: [PATCH] Improve formatting of stats

- Simple markup
- Better spacing at alignment on all viewports
---
 .../controllers/stats_html/index.html.heex    | 40 +++++++++----------
 priv/gettext/default.pot                      |  2 +-
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/lib/music_library_web/controllers/stats_html/index.html.heex b/lib/music_library_web/controllers/stats_html/index.html.heex
index fe4c4359..6c078bd9 100644
--- a/lib/music_library_web/controllers/stats_html/index.html.heex
+++ b/lib/music_library_web/controllers/stats_html/index.html.heex
@@ -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>
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 3fc0b988..39024ebf 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -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 ""