yeah
This commit is contained in:
parent
347b37b3be
commit
fa495b68e9
5 changed files with 132 additions and 100 deletions
|
|
@ -73,7 +73,7 @@
|
||||||
/* === PAGE HEADER === */
|
/* === PAGE HEADER === */
|
||||||
|
|
||||||
header.page-header {
|
header.page-header {
|
||||||
@apply border-b border-slate-300;
|
@apply border-b border-slate-300 mb-6;
|
||||||
}
|
}
|
||||||
|
|
||||||
header.page-header h1 {
|
header.page-header h1 {
|
||||||
|
|
@ -83,6 +83,20 @@
|
||||||
header.page-header p {
|
header.page-header p {
|
||||||
@apply mb-3;
|
@apply mb-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* === PAGE GRID === */
|
||||||
|
|
||||||
|
section.page-grid {
|
||||||
|
@apply grid grid-cols-1 md:grid-cols-3 gap-3;
|
||||||
|
|
||||||
|
> section {
|
||||||
|
@apply col-span-1 md:col-span-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
> aside {
|
||||||
|
@apply print:hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
|
||||||
|
|
@ -2,13 +2,13 @@
|
||||||
<h1><%= Enum.count(@notes) %> Bookmarks</h1>
|
<h1><%= Enum.count(@notes) %> Bookmarks</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-3">
|
<section class="page-grid">
|
||||||
<section class="col-span-1 md:col-span-2">
|
<section>
|
||||||
<.note_list notes={@notes} layout={@channel.layout} />
|
<.note_list notes={@notes} layout={@channel.layout} />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<aside>
|
||||||
<.tag_list notes={@notes} />
|
<.tag_list notes={@notes} />
|
||||||
</section>
|
</aside>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,12 @@
|
||||||
<p><%= Markdown.render(@channel.content) |> raw %></p>
|
<p><%= Markdown.render(@channel.content) |> raw %></p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
|
<section class="page-grid">
|
||||||
<.note_list notes={@channel.notes}/>
|
<section>
|
||||||
</div>
|
<.note_list notes={@channel.notes} layout={@channel.layout} />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside>
|
||||||
|
<.tag_list notes={@channel.notes} />
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,99 +1,111 @@
|
||||||
<article class="h-entry hentry | stack container">
|
<section class="page-grid">
|
||||||
<header>
|
<section>
|
||||||
<h1 class="p-name | text-3xl leading-10 font-bold text-theme-base1">
|
<article class="h-entry hentry | stack container">
|
||||||
<%= @note.name %>
|
<header>
|
||||||
</h1>
|
<h1 class="p-name | text-3xl leading-10 font-bold text-theme-base1">
|
||||||
</header>
|
<%= @note.name %>
|
||||||
|
</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
<section class="print:hidden">
|
<aside>
|
||||||
<ul class="flex gap-3">
|
<.featured_images note={@note} />
|
||||||
<li>
|
</aside>
|
||||||
<a href={~p"/admin/notes/#{@note}/edit"} class="button">
|
|
||||||
Edit
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href={~p"/admin/notes/#{@note}"} class="button">
|
|
||||||
Show in Admin
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<aside>
|
<section class="p-summary e-content | prose max-w-none">
|
||||||
<.featured_images note={@note} />
|
<%= Markdown.render(@note.content) |> raw %>
|
||||||
</aside>
|
</section>
|
||||||
|
|
||||||
<%= if has_outline?(@note) do %>
|
<%= if not Enum.empty?(@note.links_to) do %>
|
||||||
<aside class="prose max-w-none print:hidden">
|
<section class="prose ">
|
||||||
<div class="bg-theme-background1 rounded p-2">
|
Notes linking here:
|
||||||
<%= raw(render_outline(@note)) %>
|
<ul>
|
||||||
</div>
|
<%= for link <- @note.links_to do %>
|
||||||
</aside>
|
<li><a href={~p"/note/#{link.slug}"}><%= link.name %></a></li>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
<section class="p-summary e-content | prose max-w-none">
|
<%= if String.length(@note.url || "") > 0 do %>
|
||||||
<%= Markdown.render(@note.content) |> raw %>
|
<section class="text-center">
|
||||||
</section>
|
<.icon name="hero-link" /> <a href={@note.url}><%= @note.url %></a>
|
||||||
|
</section>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
<%= if not Enum.empty?(@note.links_to) do %>
|
<footer>
|
||||||
<section class="prose ">
|
<dl>
|
||||||
Notes linking here:
|
<dt>
|
||||||
<ul>
|
<%= if @note.published_at do %>
|
||||||
<%= for link <- @note.links_to do %>
|
<span>Published</span>
|
||||||
<li><a href={~p"/note/#{link.slug}"}><%= link.name %></a></li>
|
<% else %>
|
||||||
|
<span>Unpublished</span>
|
||||||
|
<% end %>
|
||||||
|
</dt>
|
||||||
|
<dd><time class="dt-published"><%= pretty_date(@note.published_at) %></time></dd>
|
||||||
|
<dt>Last updated</dt>
|
||||||
|
<dd>
|
||||||
|
<time class="dt-published"><%= pretty_date(@note.published_at) %></time>
|
||||||
|
</dd>
|
||||||
|
<dt>Tags</dt>
|
||||||
|
<dd><.tags note={@note} /></dd>
|
||||||
|
<dt>Kind</dt>
|
||||||
|
<dd><%= @note.kind %></dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<a href={~p"/"} class="hidden | h-card u-author">Inhji</a>
|
||||||
|
<a href={~p"/note/#{@note.slug}"} class="hidden | u-url u-uid"><%= @note.name %></a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<%= if !Enum.empty?(@note.images) do %>
|
||||||
|
<div class="flex flex-wrap 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)}
|
||||||
|
class="rounded"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside class="prose max-w-none">
|
||||||
|
<h3>Admin</h3>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href={~p"/admin/notes/#{@note}/edit"} class="button">
|
||||||
|
Edit
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href={~p"/admin/notes/#{@note}"} class="button">
|
||||||
|
Show in Admin
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<%= if String.length(@note.url || "") > 0 do %>
|
<h3>Outline</h3>
|
||||||
<section class="text-center">
|
|
||||||
<.icon name="hero-link" /> <a href={@note.url}><%= @note.url %></a>
|
|
||||||
</section>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<footer>
|
<%= if has_outline?(@note) do %>
|
||||||
<dl>
|
<aside>
|
||||||
<dt>
|
<div class="bg-theme-background1 rounded p-2">
|
||||||
<%= if @note.published_at do %>
|
<%= raw(render_outline(@note)) %>
|
||||||
<span>Published</span>
|
</div>
|
||||||
<% else %>
|
</aside>
|
||||||
<span>Unpublished</span>
|
|
||||||
<% end %>
|
|
||||||
</dt>
|
|
||||||
<dd><time class="dt-published"><%= pretty_date(@note.published_at) %></time></dd>
|
|
||||||
<dt>Last updated</dt>
|
|
||||||
<dd>
|
|
||||||
<time class="dt-published"><%= pretty_date(@note.published_at) %></time>
|
|
||||||
</dd>
|
|
||||||
<dt>Tags</dt>
|
|
||||||
<dd><.tags note={@note} /></dd>
|
|
||||||
<dt>Kind</dt>
|
|
||||||
<dd><%= @note.kind %></dd>
|
|
||||||
</dl>
|
|
||||||
|
|
||||||
<a href={~p"/"} class="hidden | h-card u-author">Inhji</a>
|
|
||||||
<a href={~p"/note/#{@note.slug}"} class="hidden | u-url u-uid"><%= @note.name %></a>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<%= if !Enum.empty?(@note.images) do %>
|
|
||||||
<div class="flex flex-wrap 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)}
|
|
||||||
class="rounded"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<% end %>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
<% end %>
|
||||||
</section>
|
</aside>
|
||||||
</article>
|
</section>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,12 @@
|
||||||
<p><%= Markdown.render(@channel.content) |> raw %></p>
|
<p><%= Markdown.render(@channel.content) |> raw %></p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-3">
|
<section class="page-grid">
|
||||||
<section class="col-span-1 md:col-span-2">
|
<section>
|
||||||
<.note_list notes={@notes} />
|
<.note_list notes={@notes} />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<aside>
|
||||||
<.tag_list notes={@notes} />
|
<.tag_list notes={@notes} />
|
||||||
</section>
|
</aside>
|
||||||
</section>
|
</section>
|
||||||
Loading…
Reference in a new issue