inhji/chiya
inhji/chiya
1
1
Fork 0
Code Issues 8 Pull requests 9 Activity

improve featured_image component

Browse source
This commit is contained in:
Inhji 2023-07-25 06:55:04 +02:00
parent 23dba2b0fd
commit 8a893a6237
1 changed files with 44 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
lib/chiya_web/components/public_components.ex
View file

@ -158,10 +158,10 @@ defmodule ChiyaWeb.PublicComponents do
<article class="mt-4 first:mt-0"> <article class="mt-4 first:mt-0">
<.featured_images note={note} /> <.featured_images note={note} />
<div class="prose prose-gruvbox"> <div class="prose prose-gruvbox mt-2">
<%= raw(render(note.content)) %> <%= raw(render(note.content)) %>
</div> </div>
<footer class="mt-1"> <footer class="mt-4">
<time class="text-theme-base/75"> <time class="text-theme-base/75">
<%= pretty_datetime(note.published_at) %> <%= pretty_datetime(note.published_at) %>
</time> </time>
@ -231,12 +231,8 @@ defmodule ChiyaWeb.PublicComponents do
assigns = assign(assigns, :image, List.first(images)) assigns = assign(assigns, :image, List.first(images))
~H""" ~H"""
<figure class="mb-4"> <figure>
<img <.featured_image image={assigns.image} size={:full} class="rounded-lg" />
src={ChiyaWeb.Helpers.image_url(assigns.image, :full)}
class="rounded"
title={assigns.image.content}
/>
</figure> </figure>
""" """
@ -248,16 +244,8 @@ defmodule ChiyaWeb.PublicComponents do
~H""" ~H"""
<figure class="flex gap-1"> <figure class="flex gap-1">
<img <.featured_image image={assigns.first} size={:thumb} class="rounded-l flex-1 w-full" />
src={ChiyaWeb.Helpers.image_url(assigns.first, :thumb)} <.featured_image image={assigns.second} size={:thumb} class="rounded-r flex-1 w-full" />
class="rounded-l flex-1 w-full"
title={assigns.first.content}
/>
<img
src={ChiyaWeb.Helpers.image_url(assigns.second, :thumb)}
class="rounded-r flex-1 w-full"
title={assigns.second.content}
/>
</figure> </figure>
""" """
@ -270,26 +258,49 @@ defmodule ChiyaWeb.PublicComponents do
~H""" ~H"""
<figure class="flex gap-1"> <figure class="flex gap-1">
<img <.featured_image image={assigns.first} size={:thumb} class="flex-1 w-full rounded-l" />
src={ChiyaWeb.Helpers.image_url(assigns.first, :thumb)} <.featured_image image={assigns.second} size={:thumb} class="flex-1 w-full" />
class="flex-1 w-full rounded-l" <.featured_image image={assigns.third} size={:thumb} class="flex-1 w-full rounded-r" />
title={assigns.first.content} </figure>
/> """
<img
src={ChiyaWeb.Helpers.image_url(assigns.second, :thumb)} _ ->
class="flex-1 w-full" assigns =
title={assigns.second.content} assigns
/> |> assign(:first, Enum.at(images, 0))
<img |> assign(:second, Enum.at(images, 1))
src={ChiyaWeb.Helpers.image_url(assigns.third, :thumb)} |> assign(:third, Enum.at(images, 2))
class="flex-1 w-full rounded-r" |> assign(:fourth, Enum.at(images, 3))
title={assigns.third.content}
/> ~H"""
<figure class="flex gap-1 flex-col">
<section class="flex gap-1">
<.featured_image image={assigns.first} size={:thumb} class="flex-1 w-full rounded-tl-lg" />
<.featured_image image={assigns.second} size={:thumb} class="flex-1 w-full rounded-tr-lg" />
</section>
<section class="flex gap-1">
<.featured_image image={assigns.third} size={:thumb} class="flex-1 w-full rounded-bl-lg" />
<.featured_image image={assigns.fourth} size={:thumb} class="flex-1 w-full rounded-br-lg" />
</section>
</figure> </figure>
""" """
end end
end end
attr :image, :map, required: true
attr :class, :string
attr :size, :atom, default: :thumb
defp featured_image(assigns) do
~H"""
<img
src={ChiyaWeb.Helpers.image_url(assigns.image, assigns.size)}
class={assigns.class}
title={assigns.image.content}
/>
"""
end
defp gallery_name(note), do: "gallery-#{note.id}" defp gallery_name(note), do: "gallery-#{note.id}"
defp main_images(note), defp main_images(note),