Make calendar layout better on mobile

Author: RoyalIcing

lib/components_guide_web/components/calendar_component.ex

@@ -34,7 +34,7 @@ defmodule ComponentsGuideWeb.CalendarComponent do
             <% date = Date.add(@current_row_start_date, week_offset * 7 + (weekday - 1)) %>
             <% current_day? = week_offset == 0 && @current_day_of_week == weekday %>
             <td aria-current={if current_day?, do: "date", else: "false"} class={td_class(%{current_day?: current_day?, weekday: weekday, week_offset: week_offset})}>
-              <div class={td_text_class(week_offset)}><%= Calendar.strftime(date, "%d %b") %></div>
+              <div class={td_text_class(week_offset, weekday, current_day?)}><%= Calendar.strftime(date, "%d %b") %></div>
               <%= @extra.(date) %>
             </td>
           <% end %>
@@ -50,8 +50,13 @@ defmodule ComponentsGuideWeb.CalendarComponent do
   defp td_class(%{week_offset: 0}), do: "bg-green-900/25"
   defp td_class(_), do: "bg-black"
 
-  defp td_text_class(0), do: "text-sm opacity-100"
-  defp td_text_class(week_offset) when week_offset in [-1, 1], do: "text-sm opacity-75"
-  defp td_text_class(week_offset) when week_offset in [-2, 2], do: "text-sm opacity-60"
-  defp td_text_class(_), do: "text-sm opacity-50"
+  defp td_text_class(0, weekday, current_day?), do: "text-sm opacity-100 #{td_text_class_weekday(weekday, current_day?)}"
+  defp td_text_class(week_offset, weekday, current_day?) when week_offset in [-1, 1], do: "text-sm opacity-90 #{td_text_class_weekday(weekday, current_day?)}"
+  defp td_text_class(week_offset, weekday, current_day?) when week_offset in [-2, 2], do: "text-sm opacity-80 #{td_text_class_weekday(weekday, current_day?)}"
+  defp td_text_class(_, weekday, current_day?), do: "text-sm opacity-75 #{td_text_class_weekday(weekday, current_day?)}"
+
+  defp td_text_class_weekday(1, _current_day?), do: ""
+  defp td_text_class_weekday(5, _current_day?), do: ""
+  defp td_text_class_weekday(_, true), do: ""
+  defp td_text_class_weekday(_weekday, _current_day?), do: "hidden"
 end

lib/components_guide_web/controllers/calendar_controller.ex

@@ -302,7 +302,7 @@ defmodule ComponentsGuideWeb.CalendarView do
     }
 
     ~H"""
-    <a href={@href}>
+    <a href={@href} class="flex flex-col md:block">
       <span class="text-3xl not-prose"><%= @icon %></span>
       <%= @what %>
     </a>
@@ -313,10 +313,10 @@ defmodule ComponentsGuideWeb.CalendarView do
     assigns = %{ids: ids}
 
     ~H"""
-    <div>
+    <div class="flex flex-col gap-2">
       <%= for id <- @ids do %>
       <div>
-      <%= ComponentsGuideWeb.CalendarView.icon_link(id, Map.get(links, id)) %>
+      <%= icon_link(id, Map.get(links, id)) %>
       </div>
       <% end %>
     </div>