Excess comments (defaults to any over 3) are now hidden by default.

They can be shown by clicking on the 'show comments' link.

python/media/css/main.css

@@ -243,6 +243,7 @@ pre code {
 .post-comments ul {
     list-style: none;
     margin-left: 0;
+    margin-bottom: 18px;
 }
 
 .post-comments li {
@@ -275,6 +276,10 @@ li .post-comment-metadata {
     color: #999999;
 }
 
+.show-comments {
+    display: none;
+}
+
 .user-card {
     background-color: #F2F2F2;
 }

python/media/js/comments.js

@@ -0,0 +1,34 @@
+/**
+ * Bits of JavaScript used on the question page in Stackdump,
+ * (https://bitbucket.org/samuel.lai/stackdump/).
+ *
+ * Requires jQuery.
+ */
+
+function hideExcessCommentsInit() {
+    // this function initialises the 'hiding excess comments' functionality.
+    
+    // show the show-comments links and attach a click event handler to them
+    $('.show-comments').show();
+    $('.show-comments a').click(showHiddenComments);
+    
+    // hide the all the hidden comments
+    $('.hidden-comment').hide();
+}
+
+function showHiddenComments() {
+    // once comments are show, they can't be hidden again
+    
+    // get the relevant hidden comments
+    var comments = $(this).closest('.show-comments').siblings('ul').children('li.hidden-comment');
+    
+    // show the comments
+    comments.show();
+        
+    // hide the link
+    $(this).closest('.show-comments').hide();
+    
+    return false;
+}
+
+$(document).ready(hideExcessCommentsInit);

python/src/stackdump/settings.py

@@ -14,7 +14,12 @@ SERVER_PORT = 8080
 # slash.
 APP_URL_ROOT = '/'
 
+# number of comments to show before the rest are hidden behind a 'click to show'
+# link
+NUM_OF_DEFAULT_COMMENTS = 3
+
 # settings that are available in templates
 TEMPLATE_SETTINGS = [
-    'APP_URL_ROOT'
+    'APP_URL_ROOT',
+    'NUM_OF_DEFAULT_COMMENTS'
 ]

python/src/stackdump/templates/common.macros

@@ -15,4 +15,27 @@
 {% else %}
 {{ user.displayName }}
 {% endif %}
+{% endmacro %}
+
+{% macro render_comments(p, default_comments_max) %}
+<ul>
+    {% for c in p.comments %}
+    <li {% if loop.index > default_comments_max %}class="hidden-comment"{% endif %}>
+        {% if c.score > 0 %}
+        <p class="post-comment-score">{{ c.score }}</p>
+        {% endif %}
+        <p class="post-comment-text">
+            {{ c.text }} &mdash;
+            <span class="post-comment-metadata">
+                <strong>{{ user_name(c.user) }}</strong> on
+                <strong>{{ c.creationDate|format_datetime }}</strong>
+            </span>
+        </p>
+    </li>
+    {% endfor %}
+</ul>
+{% if p.comments|length > default_comments_max %}
+{% set additional_comments = p.comments|length - default_comments_max %}
+<div class="show-comments"><a href="#">show <strong>{{ additional_comments }}</strong> more comment{% if additional_comments != 1 %}s{% endif %}...</a></div>
+{% endif %}
 {% endmacro %}

python/src/stackdump/templates/question.html

@@ -6,6 +6,7 @@
 {% block extrahead %}
 <link rel="stylesheet" href="{{ SETTINGS.APP_URL_ROOT }}media/js/google-code-prettify/prettify.css" type="text/css" />
 <script type="text/javascript" src="{{ SETTINGS.APP_URL_ROOT }}media/js/google-code-prettify/prettify.js"></script>
+<script type="text/javascript" src="{{ SETTINGS.APP_URL_ROOT }}media/js/comments.js"></script>
 {% endblock %}
 
 {% block body %}
@@ -59,22 +60,7 @@
             </div>
             {% if r.question.comments %}
             <div class="post-comments">
-                <ul>
+                {{ macros.render_comments(r.question, SETTINGS.NUM_OF_DEFAULT_COMMENTS) }}
-                    {% for c in r.question.comments %}
-                    <li>
-                        {% if c.score > 0 %}
-                        <p class="post-comment-score">{{ c.score }}</p>
-                        {% endif %}
-                        <p class="post-comment-text">
-                            {{ c.text }} &mdash;
-                            <span class="post-comment-metadata">
-                                <strong>{{ macros.user_name(c.user) }}</strong> on
-                                <strong>{{ c.creationDate|format_datetime }}</strong>
-                            </span>
-                        </p>
-                    </li>
-                    {% endfor %}
-                </ul>
             </div>
             {% endif %}
         </div>
@@ -126,22 +112,7 @@
                     
                     <div class="post-comments">
                         {% if a.comments %}
-                        <ul>
+                        {{ macros.render_comments(a, SETTINGS.NUM_OF_DEFAULT_COMMENTS) }}
-                            {% for c in a.comments %}
-                            <li>
-                                {% if c.score > 0 %}
-                                <p class="post-comment-score">{{ c.score }}</p>
-                                {% endif %}
-                                <p class="post-comment-text">
-                                    {{ c.text }} &mdash;
-                                    <span class="post-comment-metadata">
-                                        <strong>{{ macros.user_name(c.user) }}</strong> on
-                                        <strong>{{ c.creationDate|format_datetime }}</strong>
-                                    </span>
-                                </p>
-                            </li>
-                            {% endfor %}
-                        </ul>
                         {% endif %} 
                     </div>
                 </li>