From ffb369862b384577ac506f995e8e9c00e1d365b1 Mon Sep 17 00:00:00 2001
From: Kieran Eglin <kieran.eglin@gmail.com>
Date: Thu, 29 Feb 2024 11:55:15 -0800
Subject: [PATCH] Improved responsive UX for media profiles

---
 .../components/core_components.ex             | 15 ++++++++-----
 .../custom_components/button_components.ex    |  2 +-
 .../custom_components/text_components.ex      | 14 ++++++++++++
 .../layouts/partials/header.html.heex         |  2 +-
 .../layouts/partials/sidebar.html.heex        | 12 +++++-----
 .../components/layouts/root.html.heex         |  2 +-
 .../media_profile_html/index.html.heex        | 22 ++++++-------------
 .../media_profile_form.html.heex              |  2 +-
 .../media_profile_html/show.html.heex         | 12 +++++-----
 9 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/lib/pinchflat_web/components/core_components.ex b/lib/pinchflat_web/components/core_components.ex
index 939169b..f9477df 100644
--- a/lib/pinchflat_web/components/core_components.ex
+++ b/lib/pinchflat_web/components/core_components.ex
@@ -16,9 +16,11 @@ defmodule PinchflatWeb.CoreComponents do
   """
   use Phoenix.Component
 
-  alias Phoenix.LiveView.JS
   import PinchflatWeb.Gettext
 
+  alias Phoenix.LiveView.JS
+  alias PinchflatWeb.CustomComponents.TextComponents
+
   @doc """
   Renders a modal.
 
@@ -591,11 +593,12 @@ defmodule PinchflatWeb.CoreComponents do
     assigns = assign(assigns, iterable_attributes: attrs)
 
     ~H"""
-    <.list>
-      <:item :for={{k, v} <- @iterable_attributes} title={k}>
-        <%= v %>
-      </:item>
-    </.list>
+    <ul>
+      <li :for={{k, v} <- @iterable_attributes} class="mb-2">
+        <strong><%= k %>:</strong>
+        <TextComponents.inline_code><%= v %></TextComponents.inline_code>
+      </li>
+    </ul>
     """
   end
 
diff --git a/lib/pinchflat_web/components/custom_components/button_components.ex b/lib/pinchflat_web/components/custom_components/button_components.ex
index 0240f3c..a278577 100644
--- a/lib/pinchflat_web/components/custom_components/button_components.ex
+++ b/lib/pinchflat_web/components/custom_components/button_components.ex
@@ -23,7 +23,7 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
     <button
       class={[
         "text-center font-medium text-white",
-        "#{@rounding} inline-flex items-center justify-center px-10 py-4",
+        "#{@rounding} inline-flex items-center justify-center px-8 py-4",
         "#{@color}",
         "hover:bg-opacity-90 lg:px-8 xl:px-10",
         @class
diff --git a/lib/pinchflat_web/components/custom_components/text_components.ex b/lib/pinchflat_web/components/custom_components/text_components.ex
index a109666..44b2cb0 100644
--- a/lib/pinchflat_web/components/custom_components/text_components.ex
+++ b/lib/pinchflat_web/components/custom_components/text_components.ex
@@ -2,6 +2,8 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
   @moduledoc false
   use Phoenix.Component
 
+  alias PinchflatWeb.CoreComponents
+
   @doc """
   Renders a code block with the given content.
   """
@@ -28,4 +30,16 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
     </.link>
     """
   end
+
+  attr :href, :string, required: true
+  attr :icon, :string, required: true
+  attr :class, :string, default: ""
+  # TODO: docs
+  def icon_link(assigns) do
+    ~H"""
+    <.link navigate={@href} class={["hover:text-secondary duration-200 ease-in-out", @class]}>
+      <CoreComponents.icon name={@icon} />
+    </.link>
+    """
+  end
 end
diff --git a/lib/pinchflat_web/components/layouts/partials/header.html.heex b/lib/pinchflat_web/components/layouts/partials/header.html.heex
index 49a2822..f643e9f 100644
--- a/lib/pinchflat_web/components/layouts/partials/header.html.heex
+++ b/lib/pinchflat_web/components/layouts/partials/header.html.heex
@@ -3,7 +3,7 @@
     <div class="flex items-center gap-2 sm:gap-4 lg:hidden">
       <button
         class="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
-        @click.stop="sidebarToggle = !sidebarToggle"
+        @click.stop="sidebarVisible = !sidebarVisible"
       >
         <.icon name="hero-bars-3" />
       </button>
diff --git a/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex b/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex
index 88d1c50..2a9536c 100644
--- a/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex
+++ b/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex
@@ -1,15 +1,15 @@
 <aside
-  x-bind:class="sidebarToggle ? 'translate-x-0' : '-translate-x-full'"
-  class="absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0"
-  @click.outside="sidebarToggle = false"
+  x-bind:class="sidebarVisible ? 'translate-x-0' : '-translate-x-full'"
+  class="-translate-x-full absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0"
+  @click.outside="sidebarVisible = false"
 >
   <div class="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
     <a href="/" class="flex items-center">
-      <img src={~p"/images/logo.png"} alt="Pinchflat" class="w-9 h-9" />
+      <img src={~p"/images/logo.png?cachebust=2024-02-29"} alt="Pinchflat" class="w-9 h-9" />
       <h2 class="text-xl font-bold text-white pl-2">Pinchflat</h2>
     </a>
 
-    <button class="block lg:hidden" @click.stop="sidebarToggle = !sidebarToggle">
+    <button class="block lg:hidden" @click.stop="sidebarVisible = !sidebarVisible">
       <.icon name="hero-arrow-left" class="fill-current" />
     </button>
   </div>
@@ -19,9 +19,7 @@
         <h3 class="mb-4 ml-4 text-sm font-medium text-bodydark2">MENU</h3>
         <ul class="mb-6 flex flex-col gap-1.5">
           <.sidebar_item icon="hero-home" text="Home" navigate={~p"/"} />
-
           <.sidebar_item icon="hero-tv" text="Sources" navigate={~p"/sources"} />
-
           <.sidebar_item icon="hero-adjustments-vertical" text="Media Profiles" navigate={~p"/media_profiles"} />
         </ul>
       </div>
diff --git a/lib/pinchflat_web/components/layouts/root.html.heex b/lib/pinchflat_web/components/layouts/root.html.heex
index 66b05ed..8dbdc8d 100644
--- a/lib/pinchflat_web/components/layouts/root.html.heex
+++ b/lib/pinchflat_web/components/layouts/root.html.heex
@@ -12,7 +12,7 @@
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body x-data="{ 'sidebarToggle': false }" class="dark text-bodydark bg-boxdark-2">
+  <body x-data="{ 'sidebarVisible': false }" class="dark text-bodydark bg-boxdark-2">
     <%= @inner_content %>
   </body>
 </html>
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex
index e1d90dd..7ba4ad8 100644
--- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex
+++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex
@@ -1,9 +1,11 @@
 <div class="mb-6 flex gap-3 flex-row items-center justify-between">
-  <h2 class="text-title-md2 font-bold text-black dark:text-white">All Media Profiles</h2>
+  <h2 class="text-title-md2 font-bold text-black dark:text-white">
+    Media Profiles
+  </h2>
   <nav>
     <.link navigate={~p"/media_profiles/new"}>
       <.button color="bg-primary" rounding="rounded-full">
-        <span class="font-bold mx-2">+</span> New Media Profile
+        <span class="font-bold text-xl mx-2">+</span> New <span class="hidden sm:inline pl-1">Media Profile</span>
       </.button>
     </.link>
   </nav>
@@ -11,7 +13,7 @@
 
 <div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
   <div class="max-w-full overflow-x-auto">
-    <div class="flex flex-col gap-10">
+    <div class="flex flex-col gap-10 min-w-max">
       <.table rows={@media_profiles} table_class="text-black dark:text-white">
         <:col :let={media_profile} label="Name">
           <%= media_profile.name %>
@@ -23,18 +25,8 @@
           <%= media_profile.preferred_resolution %>
         </:col>
         <:col :let={media_profile} label="" class="flex place-content-evenly">
-          <.link
-            navigate={~p"/media_profiles/#{media_profile.id}"}
-            class="hover:text-secondary duration-200 ease-in-out mx-0.5"
-          >
-            <.icon name="hero-eye" />
-          </.link>
-          <.link
-            navigate={~p"/media_profiles/#{media_profile.id}/edit"}
-            class="hover:text-secondary duration-200 ease-in-out mx-0.5"
-          >
-            <.icon name="hero-pencil-square" />
-          </.link>
+          <.icon_link href={~p"/media_profiles/#{media_profile.id}"} icon="hero-eye" class="mx-1" />
+          <.icon_link href={~p"/media_profiles/#{media_profile.id}/edit"} icon="hero-pencil-square" class="mx-1" />
         </:col>
       </.table>
     </div>
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/media_profile_form.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/media_profile_form.html.heex
index 09c8de2..a2c2fa9 100644
--- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/media_profile_form.html.heex
+++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/media_profile_form.html.heex
@@ -97,7 +97,7 @@
     help="Will grab the closest available resolution if your preferred is not available"
   />
 
-  <.button class="mt-15 mb-5 sm:mb-7.5">Save Media profile</.button>
+  <.button class="my-10 sm:mb-7.5 w-full sm:w-auto">Save Media profile</.button>
 
   <div class="rounded-sm dark:bg-meta-4 p-4 md:p-6 mb-5">
     <.output_template_help />
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex
index 7032a88..a7833b1 100644
--- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex
+++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex
@@ -1,17 +1,17 @@
 <div class="mb-6 flex gap-3 flex-row items-center justify-between">
-  <div class="flex gap-3 items-center">
+  <div class="flex items-center">
     <.link navigate={~p"/media_profiles"}>
       <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
     </.link>
-    <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
-      Media Profile #<%= @media_profile.id %>
+    <h2 class="text-title-md2 font-bold text-black dark:text-white ml-2">
+      Media Profile <span class="hidden sm:inline">#<%= @media_profile.id %></span>
     </h2>
   </div>
 
   <nav>
     <.link navigate={~p"/media_profiles/#{@media_profile}/edit"}>
       <.button color="bg-primary" rounding="rounded-full">
-        <.icon name="hero-pencil-square" class="mr-2" /> Edit Media Profile
+        <.icon name="hero-pencil-square" class="mr-2" />Edit <span class="hidden sm:inline pl-1">Media Profile</span>
       </.button>
     </.link>
   </nav>
@@ -19,7 +19,7 @@
 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
   <div class="max-w-full overflow-x-auto">
     <div class="flex flex-col gap-10 dark:text-white">
-      <h3 class="font-bold text-xl">Attributes</h3>
+      <h3 class="font-bold text-xl">Attributes for "<%= @media_profile.name %>"</h3>
       <.list_items_from_map map={Map.from_struct(@media_profile)} />
     </div>
 
@@ -40,7 +40,7 @@
         class="mt-5 md:mt-0"
       >
         <.button color="bg-meta-1" rounding="rounded-full">
-          Delete Profile, Sources and Files
+          Delete Profile, Sources, and Files
         </.button>
       </.link>
     </section>