Merge pull request 'post_reply teasers' (#262) from h3ndrik/pyfedi:comment_teaser2 into main

Reviewed-on: https://codeberg.org/rimu/pyfedi/pulls/262

.gitignore

@@ -159,7 +159,6 @@ cython_debug/
 #  and can be added to the global gitignore or merged into this file.  For a more nuclear
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 .idea/
-app/static/*.css.map
 /app/static/media/
 celery_worker.py
 

app/static/styles.css

@@ -765,19 +765,15 @@ div.navbar {
   bottom: -12px;
   left: 10px;
 }
-.post_list .post_teaser .main_row .post_utilities a {
+.post_list .post_teaser .main_row .post_utilities a, .post_list .post_teaser .main_row .post_utilities > div, .post_list .post_teaser .main_row .post_utilities > span {
   display: inline-block;
   min-width: 44px;
   line-height: 44px;
   text-align: center;
 }
-.post_list .post_teaser .main_row .post_utilities a:first-child {
+.post_list .post_teaser .main_row .post_utilities a:first-child, .post_list .post_teaser .main_row .post_utilities > div:first-child, .post_list .post_teaser .main_row .post_utilities > span:first-child {
   text-align: left;
 }
-.post_list .post_teaser .main_row .post_options {
-  position: absolute;
-  bottom: -1px;
-}
 .post_list .post_teaser .utilities_row a {
   display: inline-block;
   min-width: 44px;
@@ -785,9 +781,6 @@ div.navbar {
   justify-content: center;
   align-content: center;
 }
-.post_list .post_teaser .utilities_row .preview_image, .post_list .post_teaser .utilities_row .post_options {
-  text-align: center;
-}
 .post_list .post_teaser .thumbnail {
   float: right;
   padding-left: 0;
@@ -1070,9 +1063,7 @@ div.navbar {
 }
 .voting_buttons_new .upvote_button, .voting_buttons_new .downvote_button {
   display: inline-block;
-  padding: 5px 0 5px 3px;
   text-align: center;
-  position: relative;
   cursor: pointer;
   color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
   min-width: 44px;
@@ -1095,16 +1086,10 @@ div.navbar {
   color: darkred;
   font-weight: bold;
 }
-.voting_buttons_new .upvote_button {
-  top: 1px;
-}
 .voting_buttons_new .upvote_button .htmx-indicator {
   left: 13px;
   top: 7px;
 }
-.voting_buttons_new .downvote_button {
-  top: 1px;
-}
 .voting_buttons_new .downvote_button .htmx-indicator {
   left: 12px;
   top: 5px;
@@ -1238,12 +1223,16 @@ div.navbar {
   border-radius: 50%;
   vertical-align: middle;
 }
-.comment .comment_author a.unhide {
+.comment .comment_community {
+  display: inline-block;
+}
+.comment .comment_community img {
+  height: 1rem;
+  width: auto;
+}
+.comment a.unhide {
   display: none;
   text-decoration: none;
-  padding: 5px 15px;
-  position: relative;
-  top: 3px;
 }
 .comment .comment_actions {
   margin-top: -10px;
@@ -1259,7 +1248,10 @@ div.navbar {
 .comment .comment_actions .hide_button a {
   padding: 5px 15px;
 }
-.comment .comment_actions .notif_toggle {
+.comment .comment_actions .notify_toggle {
+  display: inline-block;
+}
+.comment .comment_actions .notify_toggle a {
   text-decoration: none;
   font-size: 87%;
   padding: 5px 15px;
@@ -1711,7 +1703,7 @@ form h5 {
   text-decoration: none;
 }
 
-.notif_toggle {
+.notify_toggle {
   display: block;
   position: absolute;
   top: 2px;

app/static/styles.scss

@@ -356,7 +356,7 @@ div.navbar {
         position: absolute;
         bottom: -12px;
         left: 10px;
-        a {
+        a, > div, > span {
           display: inline-block;
           min-width: 44px;
           line-height: 44px;
@@ -367,11 +367,6 @@ div.navbar {
           }
         }
       }
-
-      .post_options {
-        position: absolute;
-        bottom: -1px;
-      }
     }
 
     .utilities_row {
@@ -382,9 +377,6 @@ div.navbar {
         justify-content: center;
         align-content: center;
       }
-      .preview_image, .post_options {
-        text-align: center;
-      }
     }
 
     .thumbnail {
@@ -710,9 +702,7 @@ div.navbar {
 
   .upvote_button, .downvote_button {
     display: inline-block;
-    padding: 5px 0 5px 3px;
     text-align: center;
-    position: relative;
     cursor: pointer;
     color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));
     min-width: $min-touch-target;
@@ -741,8 +731,6 @@ div.navbar {
   }
 
   .upvote_button {
-    top: 1px;
-
     .htmx-indicator {
       left: 13px;
       top: 7px;
@@ -750,7 +738,6 @@ div.navbar {
   }
 
   .downvote_button {
-    top: 1px;
     .htmx-indicator {
       left: 12px;
       top: 5px;
@@ -900,16 +887,21 @@ div.navbar {
       border-radius: 50%;
       vertical-align: middle;
     }
+  }
 
-    a.unhide {
+  .comment_community {
-      display: none;
+    display: inline-block;
-      text-decoration: none;
+    img {
-      padding: 5px 15px;
+      height: 1rem;
-      position: relative;
+      width: auto;
-      top: 3px;
     }
   }
 
+  a.unhide {
+    display: none;
+    text-decoration: none;
+  }
+
   .comment_actions {
     margin-top: -10px;
     position: relative;
@@ -926,10 +918,13 @@ div.navbar {
       }
     }
 
-    .notif_toggle {
+    .notify_toggle {
-      text-decoration: none;
+      display: inline-block;
-      font-size: 87%;
+      a {
-      padding: 5px 15px;
+        text-decoration: none;
+        font-size: 87%;
+        padding: 5px 15px;
+      }
     }
   }
 
@@ -1416,7 +1411,7 @@ form {
   text-decoration: none;
 }
 
-.notif_toggle  {
+.notify_toggle  {
   display: block;
   position: absolute;
   top: 2px;

app/templates/admin/deleted_posts.html

@@ -21,7 +21,10 @@
             <h2 class="mt-4" id="comments">Deleted comments</h2>
             <div class="post_list">
                 {% for post_reply in post_replies.items %}
-                    {% include 'post/_post_reply_teaser.html' %}
+                    {% with teaser=True, disable_voting=True, no_collapse=True %}
+                        {% include 'post/_post_reply_teaser.html' %}
+                    {% endwith %}
+                    <hr />
                 {% else %}
                     <p>{{ _('No deleted comments.') }}</p>
                 {% endfor %}
@@ -38,4 +41,4 @@
     </div>
 </div>
 <hr />
-{% endblock %}
+{% endblock %}

app/templates/admin/spam_posts.html

@@ -19,7 +19,10 @@
             <h2 class="mt-4" id="comments">Downvoted comments</h2>
             <div class="post_list">
                 {% for post_reply in post_replies.items %}
-                    {% include 'post/_post_reply_teaser.html' %}
+                    {% with teaser=True, disable_voting=True, no_collapse=True %}
+                        {% include 'post/_post_reply_teaser.html' %}
+                    {% endwith %}
+                    <hr />
                 {% endfor %}
             </div>
         {% else %}
@@ -34,4 +37,4 @@
     </div>
 </div>
 <hr />
-{% endblock %}
+{% endblock %}

app/templates/post/_post_reply_teaser.html

@@ -1,5 +1,89 @@
-<div class="post_reply_teaser">
+{# Options:
-    {{ post_reply.body_html|safe }}
+  teaser: Renders just a teaser
-    <p><a href="{{ url_for('activitypub.post_ap', post_id=post_reply.post.id, _anchor='comment_' + str(post_reply.id)) }}">{{ _('View context') }}</a></p>
+  disable_voting: Disable voting buttons (to prevent mass downvoting)
+  no_collapse: Don't collapse for admin and moderator views
+#}
+{% if current_user.is_authenticated -%}
+    {% set collapsed = (post_reply.score <= current_user.reply_collapse_threshold)
+                       and not no_collapse -%}
+{% else -%}
+    {% set collapsed = (post_reply.score <= -10) and not no_collapse -%}
+{% endif -%}
+<div class="container comment{% if post_reply.score <= -10 %} low_score{% endif %}" id="comment_{{ post_reply.id }}">
+    {% if not post_reply.author.indexable -%}<!--googleoff: all-->{% endif -%}
+    {% if teaser -%}
+    <div class="row">
+        <div class="col-12 hidable">
+            reply to: <a href="{{ url_for('activitypub.post_ap', post_id=post_reply.post.id, _anchor='comment_' + str(post_reply.id)) }}">{{ post_reply.post.title | truncate(80, True) }}</a>
+            <span class="comment_community">in {{ render_communityname(post_reply.post.community) }}</span>
+        </div>
+    </div>
+    {% endif -%}
+    <div class="row">
+        <div class="col-auto comment_author">
+            by
+            {{ render_username(post_reply.author) }}
+            {% if post_reply.author.id == post_reply.post.author.id -%}
+                <span title="Submitter of original post" aria-label="{{ _('Post creator') }}" class="small"> [OP]</span>
+            {% endif -%}
+        </div>
+        <div class="col-auto text-muted small">
+            {{ moment(post_reply.posted_at).fromNow(refresh=True) }}
+            {% if post_reply.edited_at -%}, edited {{ moment(post_reply.edited_at).fromNow(refresh=True) }} {% endif -%}
+        </div>
+        <div class="col-auto">
+            {% if post_reply.reports and current_user.is_authenticated and post_reply.post.community.is_moderator(current_user) -%}
+                <span class="red fe fe-report" title="{{ _('Reported. Check comment for issues.') }}"></span>
+            {% endif -%}
+        </div>
+        <div class="col-auto">
+            <a class="unhide" href="#"><span class="fe fe-expand"></span></a>
+        </div>
+    </div>
+
+    <div class="row comment_body hidable{% if post_reply.reports and current_user.is_authenticated and post_reply.post.community.is_moderator(current_user) %} reported{% endif %}">
+        <div class="col-12">
+            {{ post_reply.body_html | community_links | safe }}
+        </div>
+    </div>
+    <div class="row comment_actions hidable">
+        <div class="col-auto">
+            {% if post_reply.post.comments_enabled -%}
+                <a href="{{ url_for('post.add_reply', post_id=post_reply.post.id, comment_id=post_reply.id) }}" class="" rel="nofollow noindex"><span class="fe fe-reply"></span> reply</a>
+            {% endif -%}
+        </div>
+        <div class="col-auto voting_buttons_new">
+            {% if not disable_voting -%}
+                {% with comment=post_reply, community=post_reply.post.community -%}
+                    {% include "post/_comment_voting_buttons.html" -%}
+                {% endwith -%}
+            {% endif -%}
+        </div>
+        <div class="col-auto hide_button">
+            {% if collapsed -%}
+                <a href='#' class=""><span class="fe fe-expand"></span></a>
+            {% else -%}
+                <a href='#' class=""><span class="fe fe-collapse"></span></a>
+            {% endif -%}
+        </div>
+        <div class="col-auto ms-auto">
+            {% if current_user.is_authenticated -%}
+                {% with comment=dict(comment=post_reply) -%}
+                    {% include "post/_reply_notification_toggle.html" -%}
+                {% endwith -%}
+            {% endif -%}
+        </div>
+        <div class="col-auto">
+            <a href="{{ url_for('post.post_reply_options', post_id=post_reply.post.id, comment_id=post_reply.id) }}" class="" rel="nofollow noindex" aria-label="{{ _('Comment options') }}"><span class="fe fe-options" title="Options"> </span></a>
+        </div>
+    </div>
+    {% if not post_reply.author.indexable -%}<!--googleon all-->{% endif -%}
+    {% if collapsed -%}
+        <script nonce="{{ session['nonce'] }}" type="text/javascript">
+            if (typeof(toBeHidden) === 'undefined') {
+                toBeHidden = Array();
+            }
+            toBeHidden.push({{ post_reply.id }});
+        </script>
+    {% endif -%}
 </div>
-<hr />

app/templates/post/_post_teaser.html

@@ -84,7 +84,7 @@
                                         <a href="{{ post.url }}" rel="nofollow ugc" class="preview_image" target="_blank" aria-label="{{ _('View image') }}" aria-hidden="true"><span class="fe fe-magnify"></span></a>
                                     {% endif -%}
                                 {% endif -%}
-                                <a href="{{ url_for('post.post_options', post_id=post.id) }}" rel="nofollow" class="post_options" aria-label="{{ _('Options') }}"><span class="fe fe-options" title="Options"> </span></a>
+                                <a href="{{ url_for('post.post_options', post_id=post.id) }}" rel="nofollow" aria-label="{{ _('Options') }}"><span class="fe fe-options" title="Options"> </span></a>
                             </div>
                         </div>
                     </div>

app/templates/post/_reply_notification_toggle.html

@@ -1,4 +1,4 @@
 <a href="{{ url_for('post.post_reply_notification', post_reply_id=comment['comment'].id) }}" rel="nofollow"
-class="notif_toggle fe {{ 'fe-bell' if comment['comment'].notify_new_replies(current_user.id) else 'fe-no-bell' }}"
+class="fe {{ 'fe-bell' if comment['comment'].notify_new_replies(current_user.id) else 'fe-no-bell' }}"
 hx-post="{{ url_for('post.post_reply_notification', post_reply_id=comment['comment'].id) }}" hx-trigger="click throttle:1s" hx-swap="outerHTML"
-title="{{ _('Notify about replies') }}" aria-label="{{ _('Notify about replies') }}"></a>
+title="{{ _('Notify about replies') }}" aria-label="{{ _('Notify about replies') }}"></a>

app/templates/post/continue_discussion.html

@@ -46,9 +46,11 @@
                                     <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 %}
+                            <div class="notify_toggle">
-                                {% include "post/_reply_notification_toggle.html" %}
+                                {% if current_user.is_authenticated and current_user.verified and current_user.id == comment['comment'].author.id %}
-                            {% endif %}
+                                    {% include "post/_reply_notification_toggle.html" %}
+                                {% endif %}
+                            </div>
                             <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>
                         {% if comment['replies'] %}

app/templates/post/post.html

@@ -107,9 +107,11 @@
                                     <a href='#'><span class="fe fe-collapse"></span></a>
                                 {% endif -%}
                             </div>
-                            {% if current_user.is_authenticated and current_user.verified -%}
+                            <div class="notify_toggle">
-                                {% include "post/_reply_notification_toggle.html" -%}
+                                {% if current_user.is_authenticated and current_user.verified -%}
-                            {% endif -%}
+                                    {% include "post/_reply_notification_toggle.html" -%}
+                                {% endif -%}
+                            </div>
                             <a href="{{ url_for('post.post_reply_options', post_id=post.id, comment_id=comment['comment'].id) }}" class="comment_actions_link" rel="nofollow noindex" aria-label="{{ _('Comment options') }}"><span class="fe fe-options" title="Options"> </span></a>
                         </div>
                         {% if comment['replies'] -%}

app/templates/user/bookmarks_comments.html

@@ -20,7 +20,10 @@
 
         <div class="post_list">
             {% for post_reply in post_replies.items %}
-                {% include 'post/_post_reply_teaser.html' %}
+                {% with teaser=True %}
+                    {% include 'post/_post_reply_teaser.html' %}
+                {% endwith %}
+                <hr />
             {% else -%}
                 <p>{{ _('No comments have been bookmarked. Use the three dots on each comment to find the bookmark function.') }}</p>
             {% endfor -%}

app/templates/user/show_profile.html

@@ -122,7 +122,10 @@
             <h2 class="mt-4" id="comments">Comments</h2>
             <div class="post_list">
                 {% for post_reply in post_replies.items %}
-                    {% include 'post/_post_reply_teaser.html' %}
+                    {% with teaser=True, disable_voting=not current_user.is_authenticated or (current_user.id != post_reply.author.id) %}
+                        {% include 'post/_post_reply_teaser.html' %}
+                    {% endwith %}
+                    <hr />
                 {% endfor %}
             </div>
             <nav aria-label="{{ _('Comment pagination') }}" class="mt-4" role="navigation">