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

* Improved layout of media items page

* Removed useless anchor tag

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>
-            <.media_preview media_item={@media_item} />
+            <section class="grid grid-cols-1 xl:grid-cols-2 xl:gap-6 mt-6">
+              <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">Attributes</h3>
+          <h3 class="font-bold text-xl mt-6">Raw 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}"}>