From 893890a2e9ee32d957570f19da172b455e93f4d8 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Fri, 1 Nov 2024 18:52:09 +0000
Subject: [PATCH] Don't hardcode column classes in stats

The Tailwind build step requires all needed classes to be explicitly
referenced in the source code, and not dynamically generated. This
implies that one cannot (for example) interpolate a number in a class
name.
---
 lib/music_library_web/live/stats_live/index.ex | 18 ++++++++++++++++++
 .../live/stats_live/index.html.heex            | 10 ++++++++--
 priv/gettext/default.pot                       |  2 +-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/lib/music_library_web/live/stats_live/index.ex b/lib/music_library_web/live/stats_live/index.ex
index 0cbe483c..a1f86a33 100644
--- a/lib/music_library_web/live/stats_live/index.ex
+++ b/lib/music_library_web/live/stats_live/index.ex
@@ -34,4 +34,22 @@ defmodule MusicLibraryWeb.StatsLive.Index do
        nav_section: :stats
      )}
   end
+
+  # The Tailwind build step requires all needed classes to be explicitly referenced
+  # in the source code, and not dynamically generated. This implies that one cannot
+  # (for example) interpolate a number in a class name.
+  defp stats_class(collection) do
+    case Enum.count(collection) do
+      1 -> "grid-cols-1"
+      2 -> "grid-cols-2"
+      3 -> "grid-cols-3"
+      4 -> "grid-cols-4"
+      5 -> "grid-cols-5"
+      6 -> "grid-cols-6"
+      7 -> "grid-cols-7"
+      8 -> "grid-cols-8"
+      9 -> "grid-cols-9"
+      _other -> ""
+    end
+  end
 end
diff --git a/lib/music_library_web/live/stats_live/index.html.heex b/lib/music_library_web/live/stats_live/index.html.heex
index 7e3fb870..57743413 100644
--- a/lib/music_library_web/live/stats_live/index.html.heex
+++ b/lib/music_library_web/live/stats_live/index.html.heex
@@ -17,7 +17,10 @@
   <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-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow grid-cols-5 divide-x">
+  <dl class={[
+    "mt-5 grid divide-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow divide-x",
+    stats_class(@collection_count_by_format)
+  ]}>
     <div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4">
       <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 text-center max-sm:text-xs break-keep">
         <%= Record.format_long_label(format) %>
@@ -38,7 +41,10 @@
   <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-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow grid-cols-6 divide-x">
+  <dl class={[
+    "mt-5 grid divide-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow divide-x",
+    stats_class(@collection_count_by_type)
+  ]}>
     <div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4">
       <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 text-center max-sm:text-xs break-keep">
         <%= Record.type_long_label(type) %>
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 9c927325..2118af3c 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -302,7 +302,7 @@ msgstr ""
 msgid "Type"
 msgstr ""
 
-#: lib/music_library_web/live/stats_live/index.html.heex:39
+#: lib/music_library_web/live/stats_live/index.html.heex:42
 #, elixir-autogen, elixir-format
 msgid "Types"
 msgstr ""