Assorted comment tweaks

This commit is contained in:
Shadowfacts 2023-01-05 15:58:08 -05:00
parent ee04ed9124
commit 0884fe7589
4 changed files with 25 additions and 14 deletions

View File

@ -437,15 +437,26 @@ article {
margin-bottom: 0; margin-bottom: 0;
} }
.comment:not(:last-child) { .comment {
margin-bottom: 16px; display: flex;
} flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
.comment-user-avatar { &:not(:last-child) {
width: 50px; margin-bottom: 16px;
border-radius: 5px; }
float: left;
margin-right: 10px; .comment-user-avatar {
width: 50px;
border-radius: 5px;
margin: 0;
margin-right: 10px;
}
.comment-body > p:first-child {
margin-top: 0;
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -463,7 +474,6 @@ article {
} }
.comment-children { .comment-children {
margin-left: 60px;
margin-top: 16px; margin-top: 16px;
} }
} }

View File

@ -69,7 +69,8 @@
</article> </article>
<script> <script>
const permalink = "{{ post.comments_permalink() }}"; const articleDomain = "{{ Self::domain() }}";
const articlePermalink = "{{ post.comments_permalink() }}";
</script> </script>
<script src="/js/comments.js" async></script> <script src="/js/comments.js" async></script>

View File

@ -22,7 +22,7 @@
<meta property="twitter:image" content="https://{{ Self::domain() }}shadowfacts.png"> <meta property="twitter:image" content="https://{{ Self::domain() }}shadowfacts.png">
<meta property="og:image" content="https://{{ Self::domain() }}shadowfacts.png"> <meta property="og:image" content="https://{{ Self::domain() }}shadowfacts.png">
{% endblock %} {% endblock %}
<meta property="og:url" content="https://{{ Self::domain() }}{ self.permalink() }}"> <meta property="og:url" content="https://{{ Self::domain() }}{{ self.permalink() }}">
<meta property="og:site_name" content="Shadowfacts"> <meta property="og:site_name" content="Shadowfacts">
{% block head %}{% endblock %} {% block head %}{% endblock %}

View File

@ -9,10 +9,10 @@ details.addEventListener("toggle", (even) => {
}); });
async function fetchComments() { async function fetchComments() {
const res = await fetch(`/comments?id=${permalink}`); const res = await fetch(`/comments?id=${articlePermalink}`);
const comments = await res.json(); const comments = await res.json();
const rootId = new URL(permalink, document.location); const rootId = new URL(`https://${articleDomain}${articlePermalink}`);
const tree = buildCommentsTree(comments, rootId)[0]; const [tree, _] = buildCommentsTree(comments, rootId);
const html = renderCommentList(tree); const html = renderCommentList(tree);
document.getElementById("comments-container").innerHTML += html; document.getElementById("comments-container").innerHTML += html;
} }