thelonius/phoenix-ausblick
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add showing tunit boundaries

Browse Source
This commit is contained in:
Thelonius Kort
2023-01-04 14:43:51 +01:00
parent d589d84b40
commit 8de7169217
2 changed files with 24 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
assets/css/article.css
View File

@ -6,11 +6,32 @@
@apply hover:bg-gray-300;
}
.article a.hide-link {
display: none;
}
.article.show-boundary a.hide-link {
display: inline;
}
.article.show-boundary a.show-link {
display: none;
}
.article.show-boundary span + span.tunit::before {
content: "🭱";
color: brown;
font-weight: bold;
font-size: 130%;
vertical-align: -2px;
}
.article h4 {
@apply font-semibold text-lg leading-8 text-zinc-800;
}
.article p {
.article p, .article div {
@apply text-justify;
}

3
lib/outlook_web/live/article_live/show.html.heex
View File

@ -13,8 +13,9 @@
</:actions>
</.header>
<div class="article">
<a href="#" class="show-link" phx-click={JS.add_class("show-boundary", to: ".article")}>show boundaries</a>
<a href="#" class="hide-link" phx-click={JS.remove_class("show-boundary", to: ".article")}>hide boundaries</a>
<%= InternalTree.render_html(@article.content) |> raw %>
</div>