mirror of
https://codeberg.org/rimu/pyfedi
synced 2025-01-23 19:36:56 -08:00
much improved comment voting and collapse icon location
This commit is contained in:
rimu
parent
017211ba83
commit
321731a5f0
6 changed files with 173 additions and 58 deletions
|
|
@ -343,7 +343,7 @@ def comment_vote(comment_id, vote_direction):
|
|||
db.session.commit()
|
||||
|
||||
comment.post.flush_cache()
|
||||
return render_template('post/_voting_buttons.html', comment=comment,
|
||||
return render_template('post/_comment_voting_buttons.html', comment=comment,
|
||||
upvoted_class=upvoted_class,
|
||||
downvoted_class=downvoted_class, community=comment.community)
|
||||
|
||||
|
|
|
|||
|
|
@ -256,25 +256,26 @@ function setupHideButtons() {
|
|||
hideEl.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
const parentElement = hideEl.parentElement.parentElement;
|
||||
const hidables = parentElement.querySelectorAll('.hidable');
|
||||
const hidables = parentElement.parentElement.querySelectorAll('.hidable');
|
||||
|
||||
hidables.forEach(hidable => {
|
||||
hidable.style.display = isHidden ? 'block' : 'none';
|
||||
hidable.style.display = 'none';
|
||||
});
|
||||
|
||||
const moreHidables = parentElement.parentElement.parentElement.querySelectorAll('.hidable');
|
||||
moreHidables.forEach(hidable => {
|
||||
hidable.style.display = isHidden ? 'block' : 'none';
|
||||
const unhide = parentElement.parentElement.querySelectorAll('.unhide');
|
||||
unhide[0].style.display = 'inline-block';
|
||||
});
|
||||
});
|
||||
|
||||
// Toggle the content of hideEl
|
||||
if (isHidden) {
|
||||
hideEl.innerHTML = "<a href='#'><span class='fe fe-collapse'></span></a>";
|
||||
} else {
|
||||
hideEl.innerHTML = "<a href='#'><span class='fe fe-expand'></span></a>";
|
||||
}
|
||||
|
||||
isHidden = !isHidden; // Toggle the state
|
||||
const showEls = document.querySelectorAll('a.unhide');
|
||||
showEls.forEach(showEl => {
|
||||
showEl.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
showEl.style.display = 'none';
|
||||
const hidables = showEl.parentElement.parentElement.parentElement.querySelectorAll('.hidable');
|
||||
hidables.forEach(hidable => {
|
||||
hidable.style.display = '';
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -666,6 +666,56 @@ fieldset legend {
|
|||
height: auto;
|
||||
}
|
||||
|
||||
.voting_buttons_new {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.voting_buttons_new .upvote_button, .voting_buttons_new .downvote_button {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
||||
}
|
||||
.voting_buttons_new .upvote_button.digits_4, .voting_buttons_new .downvote_button.digits_4 {
|
||||
width: 68px;
|
||||
}
|
||||
.voting_buttons_new .upvote_button.digits_5, .voting_buttons_new .downvote_button.digits_5 {
|
||||
width: 76px;
|
||||
}
|
||||
.voting_buttons_new .upvote_button.digits_6, .voting_buttons_new .downvote_button.digits_6 {
|
||||
width: 84px;
|
||||
}
|
||||
.voting_buttons_new .upvote_button.voted_up, .voting_buttons_new .downvote_button.voted_up {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
.voting_buttons_new .upvote_button.voted_down, .voting_buttons_new .downvote_button.voted_down {
|
||||
color: darkred;
|
||||
font-weight: bold;
|
||||
}
|
||||
.voting_buttons_new .htmx-indicator {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
}
|
||||
.voting_buttons_new .htmx-request .htmx-indicator {
|
||||
display: inline;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
right: 14px;
|
||||
top: 5px;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.voting_buttons_new .htmx-request.htmx-indicator {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.voting_buttons {
|
||||
float: right;
|
||||
display: block;
|
||||
|
|
@ -766,15 +816,13 @@ fieldset legend {
|
|||
}
|
||||
}
|
||||
.comment .comment_author img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
vertical-align: bottom;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.comment .comment_author .hide_button {
|
||||
display: inline-block;
|
||||
}
|
||||
.comment .comment_author .hide_button a {
|
||||
.comment .comment_author a.unhide {
|
||||
display: none;
|
||||
text-decoration: none;
|
||||
padding: 5px;
|
||||
}
|
||||
|
|
@ -785,6 +833,13 @@ fieldset legend {
|
|||
.comment .comment_actions a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.comment .comment_actions .hide_button {
|
||||
display: inline-block;
|
||||
}
|
||||
.comment .comment_actions .hide_button a {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.comment .replies {
|
||||
margin-top: 15px;
|
||||
border-left: solid 1px #ddd;
|
||||
|
|
|
|||
|
|
@ -307,6 +307,62 @@ nav, etc which are used site-wide */
|
|||
}
|
||||
}
|
||||
|
||||
.voting_buttons_new {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
|
||||
.upvote_button, .downvote_button {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));
|
||||
|
||||
&.digits_4 {
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
&.digits_5 {
|
||||
width: 76px;
|
||||
}
|
||||
|
||||
&.digits_6 {
|
||||
width: 84px;
|
||||
}
|
||||
|
||||
&.voted_up {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.voted_down {
|
||||
color: darkred;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.htmx-indicator{
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
}
|
||||
.htmx-request .htmx-indicator{
|
||||
display:inline;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
right: 14px;
|
||||
top: 5px;
|
||||
opacity: 1!important;
|
||||
}
|
||||
.htmx-request.htmx-indicator{
|
||||
display:inline;
|
||||
}
|
||||
}
|
||||
|
||||
.voting_buttons {
|
||||
float: right;
|
||||
display: block;
|
||||
|
|
@ -420,21 +476,18 @@ nav, etc which are used site-wide */
|
|||
|
||||
.comment_author {
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
vertical-align: bottom;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.hide_button {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
a.unhide {
|
||||
display: none;
|
||||
text-decoration: none;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment_actions {
|
||||
margin-top: -10px;
|
||||
|
|
@ -442,6 +495,15 @@ nav, etc which are used site-wide */
|
|||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hide_button {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.replies {
|
||||
|
|
|
|||
|
|
@ -1,27 +1,25 @@
|
|||
{% if current_user.is_authenticated and current_user.verified %}
|
||||
{% if can_upvote(current_user, community) %}
|
||||
<div class="upvote_button digits_{{ digits(comment.up_votes) }} {{ upvoted_class }}"
|
||||
hx-post="/comment/{{ comment.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons">
|
||||
<span class="fe fe-arrow-up"></span>
|
||||
{{ comment.up_votes }}
|
||||
hx-post="/comment/{{ comment.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new">
|
||||
<span class="fe fe-arrow-up" title="{{ comment.up_votes }}"></span>
|
||||
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
|
||||
</div>
|
||||
{% endif %}
|
||||
{{ comment.up_votes - comment.down_votes }}
|
||||
{% if can_downvote(current_user, community) %}
|
||||
<div class="downvote_button digits_{{ digits(comment.down_votes) }} {{ downvoted_class }}"
|
||||
hx-post="/comment/{{ comment.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons">
|
||||
<span class="fe fe-arrow-down"></span>
|
||||
{{ comment.down_votes }}
|
||||
hx-post="/comment/{{ comment.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new">
|
||||
<span class="fe fe-arrow-down" title="{{ comment.down_votes }}"></span>
|
||||
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="upvote_button digits_{{ digits(comment.up_votes) }} {{ upvoted_class }}">
|
||||
<span class="fe fe-arrow-up"></span>
|
||||
{{ comment.up_votes }}
|
||||
</div>
|
||||
{{ comment.up_votes - comment.down_votes }}
|
||||
<div class="downvote_button digits_{{ digits(comment.down_votes) }} {{ downvoted_class }}">
|
||||
<span class="fe fe-arrow-down"></span>
|
||||
{{ comment.down_votes }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -64,11 +64,6 @@
|
|||
<div id="comment_{{ comment['comment'].id }}" class="comment {% if comment['comment'].score <= -10 %}low_score{% endif %}
|
||||
{% if comment['comment'].author.id == post.author.id %}original_poster{% endif %}">
|
||||
<div class="limit_height">
|
||||
<div class="voting_buttons hidable">
|
||||
{% with comment=comment['comment'] %}
|
||||
{% include "post/_voting_buttons.html" %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
<div class="comment_author">
|
||||
{% if comment['comment'].author.deleted %}
|
||||
[deleted]
|
||||
|
|
@ -93,13 +88,7 @@
|
|||
{% endif %}
|
||||
{% if comment['comment'].author.id == post.author.id %}<span title="Submitter of original post" aria-label="submitter" class="small">[OP]</span>{% endif %}
|
||||
<span class="text-muted small">{{ moment(comment['comment'].posted_at).fromNow(refresh=True) }}{% if comment['comment'].edited_at %}, edited {{ moment(comment['comment'].edited_at).fromNow(refresh=True) }} {% endif %}</span>
|
||||
<div class="hide_button">
|
||||
{% if comment['comment'].score <= -10 %}
|
||||
<a href='#'><span class="fe fe-expand"></span></a>
|
||||
{% else %}
|
||||
<a href='#'><span class="fe fe-collapse"></span></a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<a class="unhide" href="#"><span class="fe fe-expand"></span></a>
|
||||
{% if comment['comment'].reports and current_user.is_authenticated and post.community.is_moderator(current_user)%}
|
||||
<span class="red fe fe-report" title="{{ _('Reported. Check comment for issues.') }}"></span>
|
||||
{% endif %}
|
||||
|
|
@ -109,13 +98,23 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="comment_actions hidable">
|
||||
{% if current_user.is_authenticated and current_user.verified %}
|
||||
{% if post.comments_enabled %}
|
||||
<a href="{{ url_for('post.add_reply', post_id=post.id, comment_id=comment['comment'].id) }}" rel="nofollow"><span class="fe fe-reply"></span> reply</a>
|
||||
{% endif %}
|
||||
{% if current_user.id == comment['comment'].author.id %}
|
||||
{% include "post/_reply_notification_toggle.html" %}
|
||||
<div class="voting_buttons_new">
|
||||
{% with comment=comment['comment'] %}
|
||||
{% include "post/_comment_voting_buttons.html" %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
<div class="hide_button">
|
||||
{% if comment['comment'].score <= -10 %}
|
||||
<a href='#'><span class="fe fe-expand"></span></a>
|
||||
{% else %}
|
||||
<a href='#'><span class="fe fe-collapse"></span></a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_user.is_authenticated and current_user.verified and current_user.id == comment['comment'].author.id %}
|
||||
{% include "post/_reply_notification_toggle.html" %}
|
||||
{% endif %}
|
||||
<a href="{{ url_for('post.post_reply_options', post_id=post.id, comment_id=comment['comment'].id) }}" class="comment_actions_link" rel="nofollow"><span class="fe fe-options" title="Options"> </span></a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue