implement gallery layout for channel, first pass
This commit is contained in:
parent
ddec18b7e9
commit
34a15d5fff
6 changed files with 75 additions and 13 deletions
|
@ -10,11 +10,13 @@ defmodule Chiya.Channels do
|
|||
|
||||
@preloads [:notes]
|
||||
@public_preloads [
|
||||
notes:
|
||||
notes: {
|
||||
from(n in Note,
|
||||
where: not is_nil(n.published_at),
|
||||
order_by: [desc: n.published_at]
|
||||
)
|
||||
),
|
||||
Chiya.Notes.note_preloads()
|
||||
}
|
||||
]
|
||||
|
||||
@doc """
|
||||
|
|
|
@ -8,6 +8,7 @@ defmodule Chiya.Notes do
|
|||
alias Chiya.Notes.{Note, NoteImage, NoteNote, NoteTag}
|
||||
|
||||
@preloads [:channels, :images, :links_from, :links_to, :tags]
|
||||
def note_preloads(), do: @preloads
|
||||
|
||||
@doc """
|
||||
Returns the list of notes.
|
||||
|
|
|
@ -68,6 +68,9 @@ defmodule ChiyaWeb do
|
|||
quote do
|
||||
use Phoenix.LiveComponent
|
||||
|
||||
# Import admin components
|
||||
import ChiyaWeb.AdminComponents
|
||||
|
||||
unquote(html_helpers())
|
||||
end
|
||||
end
|
||||
|
@ -80,11 +83,11 @@ defmodule ChiyaWeb do
|
|||
import Phoenix.Controller,
|
||||
only: [get_csrf_token: 0, view_module: 1, view_template: 1]
|
||||
|
||||
# Include general helpers for rendering HTML
|
||||
unquote(html_helpers())
|
||||
|
||||
# Import admin components
|
||||
import ChiyaWeb.AdminComponents
|
||||
|
||||
# Include general helpers for rendering HTML
|
||||
unquote(html_helpers())
|
||||
end
|
||||
end
|
||||
|
||||
|
@ -96,11 +99,11 @@ defmodule ChiyaWeb do
|
|||
import Phoenix.Controller,
|
||||
only: [get_csrf_token: 0, view_module: 1, view_template: 1]
|
||||
|
||||
# Include general helpers for rendering HTML
|
||||
unquote(html_helpers())
|
||||
|
||||
# Import public components
|
||||
import ChiyaWeb.PublicComponents
|
||||
|
||||
# Include general helpers for rendering HTML
|
||||
unquote(html_helpers())
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
@ -11,7 +11,34 @@ defmodule ChiyaWeb.PublicComponents do
|
|||
"""
|
||||
def line(assigns) do
|
||||
~H"""
|
||||
<hr class="my-6 border-theme-dim" />
|
||||
<hr class="my-6 border-theme-base/20" />
|
||||
"""
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders a header with title.
|
||||
"""
|
||||
attr :class, :string, default: nil
|
||||
attr :inline, :boolean, default: false
|
||||
|
||||
slot :inner_block, required: true
|
||||
slot :subtitle
|
||||
slot :actions
|
||||
|
||||
def header(assigns) do
|
||||
~H"""
|
||||
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
|
||||
<div>
|
||||
<h1 class="text-lg font-semibold leading-8 text-gray-800 dark:text-gray-200">
|
||||
<%= render_slot(@inner_block) %>
|
||||
<span :if={@inline} class="text-sm leading-6 font-normal text-gray-600 dark:text-gray-400"><%= render_slot(@subtitle) %></span>
|
||||
</h1>
|
||||
<p :if={@subtitle != [] && @inline == false} class="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-400">
|
||||
<%= render_slot(@subtitle) %>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-none"><%= render_slot(@actions) %></div>
|
||||
</header>
|
||||
"""
|
||||
end
|
||||
end
|
||||
|
|
|
@ -23,8 +23,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<%= if @channel do %>
|
||||
<div class="mt-6 sm:w-auto flex flex-col gap-1.5">
|
||||
<%= for note <- @channel.notes do %>
|
||||
<%= if @channel.layout == :default do %>
|
||||
<section class="default | mt-6 sm:w-auto flex flex-col gap-1.5">
|
||||
<%= for note <- @channel.notes do %>
|
||||
<a
|
||||
href={~p"/#{note.slug}"}
|
||||
class="rounded-lg -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition"
|
||||
|
@ -35,6 +36,34 @@
|
|||
<span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
|
||||
</a>
|
||||
<% end %>
|
||||
</div>
|
||||
</section>
|
||||
<% end %>
|
||||
|
||||
<%= if @channel.layout == :gallery do %>
|
||||
<section class="gallery | mt-6">
|
||||
<%= for note <- @channel.notes do %>
|
||||
<article>
|
||||
<section class="flex flex-wrap justify-start gap-3">
|
||||
<%= for image <- note.images do %>
|
||||
<a
|
||||
href={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)}
|
||||
class="lightbox | w-28"
|
||||
data-gallery="note"
|
||||
data-description={ChiyaWeb.Markdown.render(image.content)}
|
||||
>
|
||||
<img
|
||||
src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
|
||||
loading="lazy"
|
||||
/>
|
||||
</a>
|
||||
<% end %>
|
||||
</section>
|
||||
<a href={~p"/#{note.slug}"} class="text-theme-primary text-lg/10 font-semibold rounded-lg -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition"><%= note.name %> <span class="text-theme-muted font-normal text-sm"><%= pretty_date(note.published_at) %></span></a>
|
||||
</article>
|
||||
|
||||
<.line />
|
||||
<% end %>
|
||||
</section>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
@ -48,7 +48,7 @@ defmodule ChiyaWeb.NoteShowLive do
|
|||
<article>
|
||||
<a href={"/admin/notes/#{@note.id}/image/#{image.id}"}>
|
||||
<img
|
||||
class="rounded-lg border border-theme-dim w-28"
|
||||
class="rounded-lg border border-theme-dim w-28 mb-3"
|
||||
src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
|
||||
/>
|
||||
<.button phx-click="delete_image" phx-value-id={image.id} data-confirm="Are you sure?">
|
||||
|
|
Loading…
Reference in a new issue