mirror of
https://codeberg.org/rimu/pyfedi
synced 2025-01-23 11:26:56 -08:00
comment replies and large comment truncating
This commit is contained in:
rimu
parent
11cc46c976
commit
4cd94ecf4c
7 changed files with 199 additions and 17 deletions
|
|
@ -1,14 +1,45 @@
|
|||
// fires after DOM is ready for manipulation
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setupCommunityNameInput();
|
||||
setupShowMoreLinks();
|
||||
});
|
||||
|
||||
|
||||
// fires after all resources have loaded, including stylesheets and js files
|
||||
window.addEventListener("load", function () {
|
||||
setupPostTypeTabs(); // when choosing the type of your new post, store the chosen tab in a hidden field so the backend knows which fields to check
|
||||
setupHideButtons();
|
||||
});
|
||||
|
||||
function setupShowMoreLinks() {
|
||||
const comments = document.querySelectorAll('.comment');
|
||||
|
||||
comments.forEach(comment => {
|
||||
const content = comment.querySelector('.comment_body');
|
||||
if (content && content.clientHeight > 400) {
|
||||
content.style.overflow = 'hidden';
|
||||
content.style.maxHeight = '400px';
|
||||
const showMoreLink = document.createElement('a');
|
||||
showMoreLink.classList.add('show-more');
|
||||
showMoreLink.classList.add('hidable');
|
||||
showMoreLink.innerHTML = '<i class="fe fe-angles-down" title="Read more"></i>';
|
||||
showMoreLink.href = '#';
|
||||
showMoreLink.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
content.classList.toggle('expanded');
|
||||
if (content.classList.contains('expanded')) {
|
||||
content.style.overflow = 'visible';
|
||||
content.style.maxHeight = '';
|
||||
showMoreLink.innerHTML = '<i class="fe fe-angles-up" title="Collapse"></i>';
|
||||
} else {
|
||||
content.style.overflow = 'hidden';
|
||||
showMoreLink.innerHTML = '<i class="fe fe-angles-down" title="Read more"></i>';
|
||||
}
|
||||
});
|
||||
content.insertAdjacentElement('afterend', showMoreLink);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setupCommunityNameInput() {
|
||||
var communityNameInput = document.getElementById('community_name');
|
||||
|
|
@ -50,6 +81,32 @@ function setupPostTypeTabs() {
|
|||
}
|
||||
|
||||
|
||||
function setupHideButtons() {
|
||||
const hideEls = document.querySelectorAll('.hide_button');
|
||||
hideEls.forEach(hideEl => {
|
||||
let isHidden = false;
|
||||
|
||||
hideEl.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
const parentElement = hideEl.parentElement;
|
||||
const hidables = parentElement.querySelectorAll('.hidable');
|
||||
|
||||
hidables.forEach(hidable => {
|
||||
hidable.style.display = isHidden ? 'block' : 'none';
|
||||
});
|
||||
|
||||
// Toggle the content of hideEl
|
||||
if (isHidden) {
|
||||
hideEl.innerHTML = "<a href='#'>[-] hide</a>";
|
||||
} else {
|
||||
hideEl.innerHTML = "<a href='#'>[+] show</a>";
|
||||
}
|
||||
|
||||
isHidden = !isHidden; // Toggle the state
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function titleToURL(title) {
|
||||
// Convert the title to lowercase and replace spaces with hyphens
|
||||
return title.toLowerCase().replace(/\s+/g, '-');
|
||||
|
|
|
|||
|
|
@ -145,6 +145,27 @@
|
|||
content: "\e90c";
|
||||
}
|
||||
|
||||
.fe-reply {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.fe-reply::before {
|
||||
content: "\e991";
|
||||
}
|
||||
|
||||
.fe-report::before {
|
||||
content: "\e967";
|
||||
}
|
||||
|
||||
.fe-angles-down::before {
|
||||
content: "\e932";
|
||||
}
|
||||
|
||||
.fe-angles-up::before {
|
||||
content: "\e935";
|
||||
}
|
||||
|
||||
a.no-underline {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -144,6 +144,27 @@ nav, etc which are used site-wide */
|
|||
content: "\e90c";
|
||||
}
|
||||
|
||||
.fe-reply {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.fe-reply::before {
|
||||
content: "\e991";
|
||||
}
|
||||
|
||||
.fe-report::before {
|
||||
content: "\e967";
|
||||
}
|
||||
|
||||
.fe-angles-down::before {
|
||||
content: "\e932";
|
||||
}
|
||||
|
||||
.fe-angles-up::before {
|
||||
content: "\e935";
|
||||
}
|
||||
|
||||
a.no-underline {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -345,6 +366,24 @@ fieldset legend {
|
|||
clear: both;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.comment .comment_body {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.comment .comment_body.expanded {
|
||||
max-height: none;
|
||||
}
|
||||
.comment .comment_body.expanded .show-more {
|
||||
display: none;
|
||||
}
|
||||
.comment .show-more {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
background-color: #777;
|
||||
color: white;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.comment .comment_author img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
@ -352,7 +391,7 @@ fieldset legend {
|
|||
.comment .hide_button {
|
||||
float: right;
|
||||
display: block;
|
||||
width: 60px;
|
||||
width: 68px;
|
||||
padding: 5px;
|
||||
}
|
||||
.comment .hide_button a {
|
||||
|
|
@ -395,5 +434,11 @@ fieldset legend {
|
|||
.comment .voting_buttons a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.comment .comment_actions {
|
||||
margin-top: -10px;
|
||||
}
|
||||
.comment .comment_actions a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=structure.css.map */
|
||||
|
|
|
|||
|
|
@ -140,6 +140,28 @@ nav, etc which are used site-wide */
|
|||
clear: both;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.comment_body {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&.expanded {
|
||||
max-height: none;
|
||||
|
||||
.show-more {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-more {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
background-color: $dark-grey;
|
||||
color: white;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.comment_author {
|
||||
img {
|
||||
width: 20px;
|
||||
|
|
@ -150,7 +172,7 @@ nav, etc which are used site-wide */
|
|||
.hide_button {
|
||||
float: right;
|
||||
display: block;
|
||||
width: 60px;
|
||||
width: 68px;
|
||||
padding: 5px;
|
||||
|
||||
a {
|
||||
|
|
@ -203,4 +225,11 @@ nav, etc which are used site-wide */
|
|||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.comment_actions {
|
||||
margin-top: -10px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -143,6 +143,27 @@
|
|||
content: "\e90c";
|
||||
}
|
||||
|
||||
.fe-reply {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.fe-reply::before {
|
||||
content: "\e991";
|
||||
}
|
||||
|
||||
.fe-report::before {
|
||||
content: "\e967";
|
||||
}
|
||||
|
||||
.fe-angles-down::before {
|
||||
content: "\e932";
|
||||
}
|
||||
|
||||
.fe-angles-up::before {
|
||||
content: "\e935";
|
||||
}
|
||||
|
||||
a.no-underline {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
{% block app_content %}
|
||||
<div class="row">
|
||||
<div class="col-8 position-relative">
|
||||
<div class="col-12 col-md-8 position-relative">
|
||||
{% if community.header_image() != '' %}
|
||||
<div class="community_header" style="height: 240px; background-image: url({{ community.header_image() }});">
|
||||
<nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
{% block app_content %}
|
||||
<div class="row">
|
||||
<div class="col-8 position-relative">
|
||||
<div class="col-12 col-md-8 position-relative">
|
||||
<div class="row">
|
||||
{% if post.image_id %}
|
||||
<div class="col-8">
|
||||
|
|
@ -70,7 +70,9 @@
|
|||
{% if post.comments_enabled %}
|
||||
<div class="row post_reply_form">
|
||||
<div class="col">
|
||||
{{ render_form(form) }}
|
||||
<div class="reply_form_inner">
|
||||
{{ render_form(form) }}
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mt-4" />
|
||||
</div>
|
||||
|
|
@ -86,7 +88,7 @@
|
|||
{% include "community/_voting_buttons.html" %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
<div class="hide_button"><a href="#">[-] hide</a></div>
|
||||
<div class="hide_button"><a href='#'>[-] hide</a></div>
|
||||
<div class="comment_author">
|
||||
{% if comment['comment'].author.avatar_id %}
|
||||
<a href="/u/{{ comment['comment'].author.link() }}" title="{{ comment['comment'].author.ap_id }}">
|
||||
|
|
@ -94,17 +96,24 @@
|
|||
{% endif %}
|
||||
<a href="/u/{{ comment['comment'].author.link() }}" title="{{ comment['comment'].author.link() }}">
|
||||
<strong>{{ comment['comment'].author.user_name}}</strong></a>
|
||||
{% if comment['comment'].author.id == post.author.id%}<span title="Submitter of original post" aria-label="submitter">[S]</span>{% endif %}
|
||||
<span class="text-muted small">{{ moment(comment['comment'].posted_at).fromNow(refresh=True) }}</span>
|
||||
</div>
|
||||
{{ comment['comment'].body_html | safe }}
|
||||
<div class="comment_body hidable">
|
||||
{{ comment['comment'].body_html | safe }}
|
||||
</div>
|
||||
<div class="comment_actions hidable">
|
||||
<a href="#"><span class="fe fe-reply"></span> reply</a>
|
||||
</div>
|
||||
{% if comment['replies'] %}
|
||||
<div class="replies hidable">
|
||||
{% for reply in comment['replies'] %}
|
||||
{{ render_comment(reply) | safe }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if comment['replies'] %}
|
||||
<div class="replies">
|
||||
{% for reply in comment['replies'] %}
|
||||
{{ render_comment(reply) | safe }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endmacro %}
|
||||
|
||||
<div class="comments">
|
||||
|
|
@ -116,7 +125,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
|
|
@ -128,7 +137,7 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<a class="w-100 btn btn-primary" href="/community/{{ post.community.link() }}/submit">{{ _('Create a post') }}</a>
|
||||
<a class="w-100 btn btn-primary" href="/community/{{ post.community.link() }}/submit">{{ _('Create post') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<form method="get">
|
||||
|
|
|
|||
Loading…
Reference in a new issue