Browse Source

Avoid indenting deep comment threads with 1 reply

This is the pinnacle of CSS.
merge-requests/68/head
Deimos 6 years ago
parent
commit
8c46f9fec7
  1. 23
      tildes/scss/modules/_comment.scss
  2. 1
      tildes/tildes/templates/macros/comments.jinja2

23
tildes/scss/modules/_comment.scss

@ -101,6 +101,29 @@
} }
} }
// This is some horrifying CSS.
// It makes it so that comments of a depth >= 4 will not indent their replies unless
// there is more than one reply. Instead, it adds text before the next comment (the
// single reply) indicating that it's a direct reply to the above comment.
.comment:not([data-comment-depth="0"]):not([data-comment-depth="1"]):not([data-comment-depth="2"]):not([data-comment-depth="3"]) {
&[data-comment-replies="1"] {
& > .comment-tree-replies {
margin-left: -1px; // compensate for border
& > .comment-tree-item > .comment > .comment-itself {
& > .comment-text::before,
& > header > .is-comment-deleted::before,
& > header > .is-comment-removed::before {
content: "(Reply to above comment)";
font-size: 0.6rem;
font-style: italic;
margin-right: 0.2rem;
}
}
}
}
}
.comment-tree-item { .comment-tree-item {
margin: 0; margin: 0;
padding: 0; padding: 0;

1
tildes/tildes/templates/macros/comments.jinja2

@ -14,6 +14,7 @@
<article id="comment-{{ comment.comment_id36 }}" <article id="comment-{{ comment.comment_id36 }}"
class="{{ comment_classes(comment, mark_newer_than)|trim }}" class="{{ comment_classes(comment, mark_newer_than)|trim }}"
data-comment-id36="{{ comment.comment_id36 }}" data-comment-id36="{{ comment.comment_id36 }}"
data-comment-replies="{{ comment.replies|length }}"
{# only add depth attr if we're rendering multiple comments at once #} {# only add depth attr if we're rendering multiple comments at once #}
{% if not is_individual_comment %} {% if not is_individual_comment %}

Loading…
Cancel
Save