[Enhancement] Improve layout of media item page on large displays (#192)

* Improved layout of media items page

* Removed useless anchor tag

lib/pinchflat_web/components/core_components.ex

@@ -19,7 +19,6 @@ defmodule PinchflatWeb.CoreComponents do
   import PinchflatWeb.Gettext
 
   alias Phoenix.LiveView.JS
-  alias PinchflatWeb.CustomComponents.TextComponents
 
   @doc """
   Renders a modal.
@@ -638,9 +637,11 @@ defmodule PinchflatWeb.CoreComponents do
 
     ~H"""
     <ul>
-      <li :for={{k, v} <- @iterable_attributes} class="mb-2">
+      <li :for={{k, v} <- @iterable_attributes} class="mb-2 w-2/3">
         <strong><%= k %>:</strong>
-        <TextComponents.inline_code><%= v %></TextComponents.inline_code>
+        <code class="inline-block text-sm font-mono text-gray p-0.5 mx-0.5">
+          <%= v %>
+        </code>
       </li>
     </ul>
     """

lib/pinchflat_web/components/custom_components/text_components.ex

@@ -35,11 +35,12 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
   Renders a subtle link with the given href and content.
   """
   attr :href, :string, required: true
+  attr :target, :string, default: "_self"
   slot :inner_block
 
   def subtle_link(assigns) do
     ~H"""
-    <.link href={@href} class="underline decoration-bodydark decoration-1 hover:decoration-white">
+    <.link href={@href} target={@target} class="underline decoration-bodydark decoration-1 hover:decoration-white">
       <%= render_slot(@inner_block) %>
     </.link>
     """
@@ -59,4 +60,22 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
     </.link>
     """
   end
+
+  @doc """
+  Renders a block of text with each line broken into a separate span.
+  """
+  attr :text, :string, required: true
+
+  def break_on_newline(assigns) do
+    broken_text =
+      assigns.text
+      |> String.split("\n", trim: false)
+      |> Enum.intersperse(Phoenix.HTML.Tag.tag(:span, class: "inline-block mt-2"))
+
+    assigns = Map.put(assigns, :text, broken_text)
+
+    ~H"""
+    <span><%= @text %></span>
+    """
+  end
 end

lib/pinchflat_web/controllers/media_items/media_item_html/media_preview.heex

@@ -1,12 +1,12 @@
 <%= if media_type(@media_item) == :video do %>
-  <video controls class="max-h-96 w-full lg:w-2/3 xl:w-1/2">
+  <video controls class="max-h-96 w-full">
     <source src={~p"/media/#{@media_item.uuid}/stream"} type="video/mp4" />
     Your browser does not support the video element.
   </video>
 <% end %>
 
 <%= if media_type(@media_item) == :audio do %>
-  <audio controls class="w-full lg:w-2/3 xl:w-1/2">
+  <audio controls class="w-full">
     <source src={~p"/media/#{@media_item.uuid}/stream"} type="audio/mpeg" />
     Your browser does not support the audio element.
   </audio>

lib/pinchflat_web/controllers/media_items/media_item_html/show.html.heex

@@ -23,23 +23,33 @@
         <.actions_dropdown media_item={@media_item} />
       </:tab_append>
 
-      <:tab title="Attributes">
+      <:tab title="Media">
         <div class="flex flex-col gap-10 dark:text-white">
           <%= if media_file_exists?(@media_item) do %>
-            <h3 class="font-bold text-xl">Preview</h3>
+            <section class="grid grid-cols-1 xl:grid-cols-2 xl:gap-6 mt-6">
-            <.media_preview media_item={@media_item} />
+              <div>
+                <.media_preview media_item={@media_item} />
+              </div>
+              <aside class="mt-4 xl:mt-0">
+                <div>Uploaded: <%= @media_item.upload_date %></div>
+                <div>
+                  <.subtle_link href={@media_item.original_url} target="_blank">Open Original</.subtle_link>
+                </div>
+                <div class="mt-4 text-bodydark">
+                  <.break_on_newline text={@media_item.description} />
+                </div>
+              </aside>
+            </section>
           <% end %>
 
-          <h2 class="font-bold text-2xl"><%= @media_item.title %></h2>
+          <h3 class="font-bold text-xl mt-6">Raw Attributes</h3>
-          <h3 class="font-bold text-xl">Attributes</h3>
           <section>
             <strong>Source:</strong>
             <.subtle_link href={~p"/sources/#{@media_item.source_id}"}>
               <%= @media_item.source.custom_name %>
             </.subtle_link>
+            <.list_items_from_map map={Map.from_struct(@media_item)} />
           </section>
-
-          <.list_items_from_map map={Map.from_struct(@media_item)} />
         </div>
       </:tab>
       <:tab title="Tasks">

lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex

@@ -43,9 +43,9 @@
         </.button_dropdown>
       </:tab_append>
 
-      <:tab title="Attributes">
+      <:tab title="Media Profile">
         <div class="flex flex-col gap-10 text-white">
-          <h3 class="font-bold text-xl">Attributes for "<%= @media_profile.name %>"</h3>
+          <h3 class="font-bold text-xl mt-6">Raw Attributes</h3>
           <.list_items_from_map map={Map.from_struct(@media_profile)} />
         </div>
       </:tab>

lib/pinchflat_web/controllers/pages/page_html/home.html.heex

@@ -16,12 +16,12 @@
     </a>
   </div>
   <div class="rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
-    <a href="#" class="mt-4 flex flex-col items-center justify-center">
+    <span class="mt-4 flex flex-col items-center justify-center">
       <span class="text-md font-medium">Media Item(s)</span>
       <h4 class="text-title-md font-bold text-white">
         <%= @media_item_count %>
       </h4>
-    </a>
+    </span>
   </div>
   <span class="text-strokedark">I know this page isn't super useful yet, but give it time :&rpar;</span>
 </div>

lib/pinchflat_web/controllers/sources/source_html/show.html.heex

@@ -23,9 +23,9 @@
         <.actions_dropdown source={@source} conn={@conn} />
       </:tab_append>
 
-      <:tab title="Attributes">
+      <:tab title="Source">
         <div class="flex flex-col gap-10 text-white">
-          <h3 class="font-bold text-lg">Attributes</h3>
+          <h3 class="font-bold text-xl mt-6">Raw Attributes</h3>
           <section>
             <strong>Media Profile:</strong>
             <.subtle_link href={~p"/media_profiles/#{@source.media_profile_id}"}>