[Enhancement] Improve layout of media item page on large displays (#192)
* Improved layout of media items page * Removed useless anchor tag
This commit is contained in:
Kieran
GitHub
parent
aea40a3f92
commit
6f78ec40d7
7 changed files with 49 additions and 19 deletions
|
|
@ -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>
|
||||
"""
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 :)</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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}"}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue