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]
|
@preloads [:notes]
|
||||||
@public_preloads [
|
@public_preloads [
|
||||||
notes:
|
notes: {
|
||||||
from(n in Note,
|
from(n in Note,
|
||||||
where: not is_nil(n.published_at),
|
where: not is_nil(n.published_at),
|
||||||
order_by: [desc: n.published_at]
|
order_by: [desc: n.published_at]
|
||||||
)
|
),
|
||||||
|
Chiya.Notes.note_preloads()
|
||||||
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
@doc """
|
@doc """
|
||||||
|
|
|
@ -8,6 +8,7 @@ defmodule Chiya.Notes do
|
||||||
alias Chiya.Notes.{Note, NoteImage, NoteNote, NoteTag}
|
alias Chiya.Notes.{Note, NoteImage, NoteNote, NoteTag}
|
||||||
|
|
||||||
@preloads [:channels, :images, :links_from, :links_to, :tags]
|
@preloads [:channels, :images, :links_from, :links_to, :tags]
|
||||||
|
def note_preloads(), do: @preloads
|
||||||
|
|
||||||
@doc """
|
@doc """
|
||||||
Returns the list of notes.
|
Returns the list of notes.
|
||||||
|
|
|
@ -68,6 +68,9 @@ defmodule ChiyaWeb do
|
||||||
quote do
|
quote do
|
||||||
use Phoenix.LiveComponent
|
use Phoenix.LiveComponent
|
||||||
|
|
||||||
|
# Import admin components
|
||||||
|
import ChiyaWeb.AdminComponents
|
||||||
|
|
||||||
unquote(html_helpers())
|
unquote(html_helpers())
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
@ -80,11 +83,11 @@ defmodule ChiyaWeb do
|
||||||
import Phoenix.Controller,
|
import Phoenix.Controller,
|
||||||
only: [get_csrf_token: 0, view_module: 1, view_template: 1]
|
only: [get_csrf_token: 0, view_module: 1, view_template: 1]
|
||||||
|
|
||||||
# Include general helpers for rendering HTML
|
|
||||||
unquote(html_helpers())
|
|
||||||
|
|
||||||
# Import admin components
|
# Import admin components
|
||||||
import ChiyaWeb.AdminComponents
|
import ChiyaWeb.AdminComponents
|
||||||
|
|
||||||
|
# Include general helpers for rendering HTML
|
||||||
|
unquote(html_helpers())
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -96,11 +99,11 @@ defmodule ChiyaWeb do
|
||||||
import Phoenix.Controller,
|
import Phoenix.Controller,
|
||||||
only: [get_csrf_token: 0, view_module: 1, view_template: 1]
|
only: [get_csrf_token: 0, view_module: 1, view_template: 1]
|
||||||
|
|
||||||
# Include general helpers for rendering HTML
|
|
||||||
unquote(html_helpers())
|
|
||||||
|
|
||||||
# Import public components
|
# Import public components
|
||||||
import ChiyaWeb.PublicComponents
|
import ChiyaWeb.PublicComponents
|
||||||
|
|
||||||
|
# Include general helpers for rendering HTML
|
||||||
|
unquote(html_helpers())
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
@ -11,7 +11,34 @@ defmodule ChiyaWeb.PublicComponents do
|
||||||
"""
|
"""
|
||||||
def line(assigns) do
|
def line(assigns) do
|
||||||
~H"""
|
~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
|
||||||
end
|
end
|
||||||
|
|
|
@ -23,8 +23,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<%= if @channel do %>
|
<%= if @channel do %>
|
||||||
<div class="mt-6 sm:w-auto flex flex-col gap-1.5">
|
<%= if @channel.layout == :default do %>
|
||||||
<%= for note <- @channel.notes do %>
|
<section class="default | mt-6 sm:w-auto flex flex-col gap-1.5">
|
||||||
|
<%= for note <- @channel.notes do %>
|
||||||
<a
|
<a
|
||||||
href={~p"/#{note.slug}"}
|
href={~p"/#{note.slug}"}
|
||||||
class="rounded-lg -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition"
|
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>
|
<span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
|
||||||
</a>
|
</a>
|
||||||
<% end %>
|
<% 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 %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -48,7 +48,7 @@ defmodule ChiyaWeb.NoteShowLive do
|
||||||
<article>
|
<article>
|
||||||
<a href={"/admin/notes/#{@note.id}/image/#{image.id}"}>
|
<a href={"/admin/notes/#{@note.id}/image/#{image.id}"}>
|
||||||
<img
|
<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)}
|
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?">
|
<.button phx-click="delete_image" phx-value-id={image.id} data-confirm="Are you sure?">
|
||||||
|
|
Loading…
Reference in a new issue