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

add note_list component

Browse source
This commit is contained in:
Inhji 2023-05-07 10:30:32 +02:00
parent 62e7aae0fc
commit df27f03db1
3 changed files with 66 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,8 @@ defmodule ChiyaWeb.PublicComponents do
router: ChiyaWeb.Router,
statics: ChiyaWeb.static_paths()
import ChiyaWeb.Format
@doc """
Renders a horizontal line
"""
@ -46,4 +48,66 @@ defmodule ChiyaWeb.PublicComponents do
</header>
"""
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

10
lib/chiya_web/controllers/page_html/channel.html.heex
View file

@ -7,14 +7,6 @@
</p>
<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
<%= for note <- @channel.notes do %>
<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 %>
<.note_list notes={@channel.notes} layout={@channel.layout} />
</div>
</div>

51
lib/chiya_web/controllers/page_html/home.html.heex
View file

@ -23,55 +23,6 @@
</div>
</div>
<%= if @channel 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"
>
<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 %>
<.note_list notes={@channel.notes} layout={@channel.layout} />
<% end %>
</div>