Assorted comment tweaks
This commit is contained in:
parent
ee04ed9124
commit
0884fe7589
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue