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; text-decoration: none;
} }
p {
margin-top: 0.7em;
margin-bottom: 0.7em;
}
table { table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
@@ -80,6 +85,8 @@ table.form > * > tr > td, th {
.comment { .comment {
margin-left: 20px; margin-left: 20px;
margin-top: 15px;
margin-bottom: 15px;
padding-left: 10px; padding-left: 10px;
border-left: 1px dotted; border-left: 1px dotted;
} }
@@ -103,3 +110,21 @@ table.form > * > tr > td, th {
.login input[type=text], .login input[type=password] { .login input[type=text], .login input[type=password] {
width: 90%; 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,36 +3,37 @@
{%- endmacro -%} {%- endmacro -%}
{%- macro comment_author(comment, thread_id, can_delete) -%} {%- 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) }} | {{- author(comment.author_id, comment.author, comment.create_time, comment.modify_time) }} |
{# Suffixing a # prevents unnecessary reloads #} {# Suffixing a # prevents unnecessary reloads #}
<a href="{{ url_for('thread', thread_id = thread_id) }}#"> thread</a> <a href="{{ url_for('thread', thread_id = thread_id) }}#"> thread</a>
{%- if comment.parent_id is not none -%} {%- if comment.parent_id is not none -%}
<a href="{{ url_for('comment', comment_id = comment.parent_id) }}#"> parent</a> <a href="{{ url_for('comment', comment_id = comment.parent_id) }}#"> parent</a>
{%- endif -%} {%- endif -%}
{%- if user is not none and (comment.author_id == user.id or user.is_moderator()) and not user.is_banned() -%} {%- if user is not none and (comment.author_id == user.id or user.is_moderator()) and not user.is_banned() -%}
<a href="{{ url_for('edit_comment', comment_id = comment.id) }}"> edit</a> <a href="{{ url_for('edit_comment', comment_id = comment.id) }}"> edit</a>
{%- if can_delete -%} {%- if can_delete -%}
<a href="{{ url_for('confirm_delete_comment', comment_id = comment.id) }}"> delete</a> <a href="{{ url_for('confirm_delete_comment', comment_id = comment.id) }}"> delete</a>
{%- endif -%} {%- endif -%}
{%- endif -%} {%- endif -%}
</sub></p> </span>
{%- endmacro -%} {%- endmacro -%}
{%- macro thread_author(author_id, name, ctime, mtime) -%} {%- macro thread_author(author_id, name, ctime, mtime) -%}
<p><sub> <span class=small>
{{- author(author_id, name, ctime, mtime) -}} {{- 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() -%} {%- 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('edit_thread', thread_id = thread_id) }}"> edit</a>
<a href="{{ url_for('confirm_delete_thread', thread_id = thread_id) }}"> delete</a> <a href="{{ url_for('confirm_delete_thread', thread_id = thread_id) }}"> delete</a>
{%- endif -%} {%- endif -%}
</sub></p> </span>
{%- endmacro -%} {%- endmacro -%}
{%- macro render_comment_pre(comment, thread_id, can_delete) -%} {%- macro render_comment_pre(comment, thread_id, can_delete) -%}
<div class=comment> <div class=comment>
{{- comment_author(comment, thread_id, can_delete) -}} {{- 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 -%} {%- endmacro -%}
{%- macro render_comment_post(comment, thread_id) -%} {%- macro render_comment_post(comment, thread_id) -%}
@@ -40,6 +41,7 @@
{{- render_comment(c, thread_id) -}} {{- render_comment(c, thread_id) -}}
{%- endfor -%} {%- endfor -%}
</div> </div>
</div>
{%- endmacro -%} {%- endmacro -%}
{%- macro render_comment(comment, thread_id) -%} {%- macro render_comment(comment, thread_id) -%}