From e31e522a33b547d031b51fc96045ab8c09f843e4 Mon Sep 17 00:00:00 2001
From: Kieran Eglin <kieran.eglin@gmail.com>
Date: Thu, 29 Feb 2024 12:13:25 -0800
Subject: [PATCH] Improved responsiveness for other pages

---
 .../components/layouts/partials/sidebar.html.heex    |  5 ++++-
 .../controllers/sources/source_html/index.html.heex  | 12 ++++--------
 .../controllers/sources/source_html/show.html.heex   | 10 ++++++----
 .../sources/source_html/source_form.html.heex        |  2 +-
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex b/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex
index 2a9536c..13b72e1 100644
--- a/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex
+++ b/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex
@@ -1,6 +1,9 @@
 <aside
   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"
+  class={[
+    "-translate-x-full absolute left-0 top-0 z-9999 flex h-screen w-60 flex-col overflow-y-hidden",
+    "bg-black duration-300 ease-linear shadow-lg sm:shadow-none 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">
diff --git a/lib/pinchflat_web/controllers/sources/source_html/index.html.heex b/lib/pinchflat_web/controllers/sources/source_html/index.html.heex
index 796dc4b..e720165 100644
--- a/lib/pinchflat_web/controllers/sources/source_html/index.html.heex
+++ b/lib/pinchflat_web/controllers/sources/source_html/index.html.heex
@@ -3,7 +3,7 @@
   <nav>
     <.link navigate={~p"/sources/new"}>
       <.button color="bg-primary" rounding="rounded-full">
-        <span class="font-bold mx-2">+</span> New Source
+        <span class="font-bold mx-2">+</span> New <span class="hidden sm:inline pl-1">Source</span>
       </.button>
     </.link>
   </nav>
@@ -11,7 +11,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={@sources} table_class="text-black dark:text-white">
         <:col :let={source} label="Name">
           <%= source.friendly_name || source.collection_name %>
@@ -29,12 +29,8 @@
           </.link>
         </:col>
         <:col :let={source} label="" class="flex place-content-evenly">
-          <.link navigate={~p"/sources/#{source.id}"} class="hover:text-secondary duration-200 ease-in-out mx-0.5">
-            <.icon name="hero-eye" />
-          </.link>
-          <.link navigate={~p"/sources/#{source.id}/edit"} class="hover:text-secondary duration-200 ease-in-out mx-0.5">
-            <.icon name="hero-pencil-square" />
-          </.link>
+          <.icon_link href={~p"/sources/#{source.id}"} icon="hero-eye" class="mx-1" />
+          <.icon_link href={~p"/sources/#{source.id}/edit"} icon="hero-pencil-square" class="mx-1" />
         </:col>
       </.table>
     </div>
diff --git a/lib/pinchflat_web/controllers/sources/source_html/show.html.heex b/lib/pinchflat_web/controllers/sources/source_html/show.html.heex
index 0f2489b..b5fa0e3 100644
--- a/lib/pinchflat_web/controllers/sources/source_html/show.html.heex
+++ b/lib/pinchflat_web/controllers/sources/source_html/show.html.heex
@@ -4,14 +4,14 @@
       <.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">
-      Source #<%= @source.id %>
+      Source <span class="hidden sm:inline">#<%= @source.id %></span>
     </h2>
   </div>
 
   <nav>
     <.link navigate={~p"/sources/#{@source}/edit"}>
       <.button color="bg-primary" rounding="rounded-full">
-        <.icon name="hero-pencil-square" class="mr-2" /> Edit Source
+        <.icon name="hero-pencil-square" class="mr-2" /> Edit <span class="hidden sm:inline pl-1">Source</span>
       </.button>
     </.link>
   </nav>
@@ -19,7 +19,9 @@
 <div class="rounded-sm border border-stroke bg-white px-5 py-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5">
   <div class="max-w-full overflow-x-auto">
     <div class="flex flex-col gap-10 dark:text-white">
-      <h3 class="mt-14 font-bold text-xl">Relationships</h3>
+      <h3 class="font-bold text-xl">Attributes for "<%= @source.friendly_name %>"</h3>
+
+      <h3 class="font-bold text-lg">Relationships</h3>
       <.list>
         <:item title="media_profile">
           <.link
@@ -31,7 +33,7 @@
         </:item>
       </.list>
 
-      <h3 class="font-bold text-xl">Attributes</h3>
+      <h3 class="font-bold text-lg">Attributes</h3>
       <.list_items_from_map map={Map.from_struct(@source)} />
 
       <h3 class="font-bold text-xl">Downloaded Media</h3>
diff --git a/lib/pinchflat_web/controllers/sources/source_html/source_form.html.heex b/lib/pinchflat_web/controllers/sources/source_html/source_form.html.heex
index 8e3bbfe..c4f8f70 100644
--- a/lib/pinchflat_web/controllers/sources/source_html/source_form.html.heex
+++ b/lib/pinchflat_web/controllers/sources/source_html/source_form.html.heex
@@ -35,6 +35,6 @@
   />
 
   <:actions>
-    <.button class="mt-15 mb-5 sm:mb-7.5">Save Source</.button>
+    <.button class="my-10 sm:mb-7.5 w-full sm:w-auto">Save Source</.button>
   </:actions>
 </.simple_form>