Make comments collapsible

This commit is contained in:
David Hoppenbrouwers
2022-10-10 14:20:46 +02:00
parent 8b2e02e42d
commit 3cbdb10104
2 changed files with 50 additions and 23 deletions

View File

@@ -35,6 +35,11 @@ a {
text-decoration: none;
}
p {
margin-top: 0.7em;
margin-bottom: 0.7em;
}
table {
border-collapse: collapse;
width: 100%;
@@ -80,6 +85,8 @@ table.form > * > tr > td, th {
.comment {
margin-left: 20px;
margin-top: 15px;
margin-bottom: 15px;
padding-left: 10px;
border-left: 1px dotted;
}
@@ -103,3 +110,21 @@ table.form > * > tr > td, th {
.login input[type=text], .login input[type=password] {
width: 90%;
}
/* Abuse checkboxes to collapse comments */
.collapse {
appearance: none;
}
.collapse:checked + * {
display: none
}
.collapse:after {
content: '[-]';
}
.collapse:checked:after {
content: '[+]';
}
.small {
font-size: 85%;
}

View File

@@ -3,7 +3,7 @@
{%- endmacro -%}
{%- macro comment_author(comment, thread_id, can_delete) -%}
<p><sub>
<span class=small>
{{- author(comment.author_id, comment.author, comment.create_time, comment.modify_time) }} |
{# Suffixing a # prevents unnecessary reloads #}
<a href="{{ url_for('thread', thread_id = thread_id) }}#"> thread</a>
@@ -16,23 +16,24 @@
<a href="{{ url_for('confirm_delete_comment', comment_id = comment.id) }}"> delete</a>
{%- endif -%}
{%- endif -%}
</sub></p>
</span>
{%- endmacro -%}
{%- macro thread_author(author_id, name, ctime, mtime) -%}
<p><sub>
<span class=small>
{{- author(author_id, name, ctime, mtime) -}}
{%- if user is not none and (author_id == user.id or user.is_moderator()) and not user.is_banned() -%}
<a href="{{ url_for('edit_thread', thread_id = thread_id) }}"> edit</a>
<a href="{{ url_for('confirm_delete_thread', thread_id = thread_id) }}"> delete</a>
{%- endif -%}
</sub></p>
</span>
{%- endmacro -%}
{%- macro render_comment_pre(comment, thread_id, can_delete) -%}
<div class=comment>
{{- comment_author(comment, thread_id, can_delete) -}}
<p>{{- minimd(comment.text) | safe -}}</p>
<input type=checkbox class="collapse small">
<div>{{- minimd(comment.text) | safe -}}
{%- endmacro -%}
{%- macro render_comment_post(comment, thread_id) -%}
@@ -40,6 +41,7 @@
{{- render_comment(c, thread_id) -}}
{%- endfor -%}
</div>
</div>
{%- endmacro -%}
{%- macro render_comment(comment, thread_id) -%}