add note_list component
This commit is contained in:
parent
62e7aae0fc
commit
df27f03db1
3 changed files with 66 additions and 59 deletions
|
@ -6,6 +6,8 @@ defmodule ChiyaWeb.PublicComponents do
|
||||||
router: ChiyaWeb.Router,
|
router: ChiyaWeb.Router,
|
||||||
statics: ChiyaWeb.static_paths()
|
statics: ChiyaWeb.static_paths()
|
||||||
|
|
||||||
|
import ChiyaWeb.Format
|
||||||
|
|
||||||
@doc """
|
@doc """
|
||||||
Renders a horizontal line
|
Renders a horizontal line
|
||||||
"""
|
"""
|
||||||
|
@ -46,4 +48,66 @@ defmodule ChiyaWeb.PublicComponents do
|
||||||
</header>
|
</header>
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
|
attr :layout, :atom, default: :list
|
||||||
|
attr :notes, :list, required: true
|
||||||
|
|
||||||
|
def note_list(assigns) do
|
||||||
|
case assigns.layout do
|
||||||
|
:gallery ->
|
||||||
|
~H"""
|
||||||
|
<section class="note-list gallery | mt-6">
|
||||||
|
<%= for note <- assigns.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={gallery_name(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>
|
||||||
|
"""
|
||||||
|
|
||||||
|
_ ->
|
||||||
|
~H"""
|
||||||
|
<section class="default | mt-6 sm:w-auto flex flex-col gap-1.5">
|
||||||
|
<%= for note <- assigns.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"
|
||||||
|
>
|
||||||
|
<span class="text-theme-primary text-lg font-semibold leading-8">
|
||||||
|
<%= note.name %>
|
||||||
|
</span>
|
||||||
|
<span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
|
||||||
|
</a>
|
||||||
|
<% end %>
|
||||||
|
</section>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
defp gallery_name(note), do: "gallery-#{note.id}"
|
||||||
end
|
end
|
||||||
|
|
|
@ -7,14 +7,6 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
|
<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
|
||||||
<%= for note <- @channel.notes do %>
|
<.note_list notes={@channel.notes} layout={@channel.layout} />
|
||||||
<a
|
|
||||||
href={~p"/#{note.slug}"}
|
|
||||||
class="rounded -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition"
|
|
||||||
>
|
|
||||||
<span class="text-theme-primary text-lg font-semibold leading-8"><%= note.name %></span>
|
|
||||||
<span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
|
|
||||||
</a>
|
|
||||||
<% end %>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -23,55 +23,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<%= if @channel do %>
|
<%= if @channel do %>
|
||||||
<%= if @channel.layout == :default do %>
|
<.note_list notes={@channel.notes} layout={@channel.layout} />
|
||||||
<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"
|
|
||||||
>
|
|
||||||
<span class="text-theme-primary text-lg font-semibold leading-8">
|
|
||||||
<%= note.name %>
|
|
||||||
</span>
|
|
||||||
<span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
|
|
||||||
</a>
|
|
||||||
<% end %>
|
|
||||||
</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>
|
||||||
|
|
Loading…
Reference in a new issue