comment replies and large comment truncating

app/static/js/scripts.js

@@ -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, '-');

app/static/scss/_typography.scss

@@ -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 {

app/static/structure.css

@@ -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 */

app/static/structure.scss

@@ -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;
+    }
+  }
 }

app/static/styles.css

@@ -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;
 }

app/templates/community/community.html

@@ -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">

app/templates/community/post.html

@@ -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">