[extensions-web] Only load 5 comments by default.
- From: Jasper St. Pierre <jstpierre src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [extensions-web] Only load 5 comments by default.
- Date: Wed, 26 Sep 2012 03:54:03 +0000 (UTC)
commit 52e6d539019465bd022627f905251bf48dad1823
Author: Jasper St. Pierre <jstpierre mecheye net>
Date: Wed Sep 26 00:12:37 2012 -0300
Only load 5 comments by default.
The rest will be under a "show more" button.
.../extensions/templates/extensions/comments.html | 2 +-
sweettooth/ratings/views.py | 7 ++++++
sweettooth/static/css/sweettooth.css | 17 ++++++++++++++-
sweettooth/static/js/main.js | 22 +++++++++++++++----
.../js/templates/extensions/comments_list.mustache | 12 +++++++---
sweettooth/static/js/templates/templatedata.js | 2 +-
6 files changed, 50 insertions(+), 12 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/comments.html b/sweettooth/extensions/templates/extensions/comments.html
index 7e023ea..0139723 100644
--- a/sweettooth/extensions/templates/extensions/comments.html
+++ b/sweettooth/extensions/templates/extensions/comments.html
@@ -1,6 +1,6 @@
<div id="comments">
<h4>User comments</h4>
- <p>Loading comments...</p>
+ <p class="comments-holder">Loading comments...</p>
</div>
<div id="opinion_form">
<h4>Your opinion</h4>
diff --git a/sweettooth/ratings/views.py b/sweettooth/ratings/views.py
index 1eb91bd..75eba12 100644
--- a/sweettooth/ratings/views.py
+++ b/sweettooth/ratings/views.py
@@ -1,4 +1,6 @@
+import json
+
from django.core.urlresolvers import reverse
from django.contrib import comments
from django.contrib.messages import info
@@ -32,5 +34,10 @@ def comment_details(request, comment):
@ajax_view
def get_comments(request):
extension = models.Extension.objects.get(pk=request.GET['pk'])
+ show_all = json.loads(request.GET.get('all', 'false'))
+
comment_list = comments.get_model().objects.for_model(extension)
+ if not show_all:
+ comment_list = comment_list[:5]
+
return [comment_details(request, comment) for comment in comment_list]
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index de9bf79..976606b 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -518,6 +518,21 @@ li.extension:last-child {
margin-right: 30px;
}
+#comments .show-all {
+ font-weight: bold;
+ cursor: pointer;
+ color: #204a87;
+}
+
+#comments .show-all:hover {
+ color: #3465a4;
+}
+
+#comments .show-all.loading {
+ color: #EEEEEC;
+ cursor: default;
+}
+
.comment {
margin-left: 90px;
}
@@ -540,7 +555,7 @@ li.extension:last-child {
font-weight: bold;
}
-.comment .timestamp {
+.comment time {
color: #999;
}
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index 1ac71c3..eaf2d24 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -173,18 +173,30 @@ function($, messages, modal, hashParamUtils, templates) {
$('.icon.upload').uploadify('/ajax/upload/icon/'+pk);
}
- $(this).find('#comments').each(function() {
- var $loadingText = $(this).find('p');
+ function fetchComments(base, showAll) {
$.ajax({
type: 'GET',
dataType: 'json',
- data: { pk: pk },
+ data: { pk: pk, all: showAll },
url: '/comments/all/',
}).done(function(comments) {
- var $newContent = $(templates.get('extensions/comments_list')(comments));
+ var $commentsHolder = base.find('.comments-holder');
+
+ var data = { comments: comments, show_all: showAll };
+ var $newContent = $('<div>').append(templates.get('extensions/comments_list')(data));
+ $newContent.addClass('comments-holder');
+
$newContent.find('time').timeago();
- $loadingText.replaceWith($newContent);
+ $newContent.find('.show-all').on('click', function() {
+ $(this).addClass('loading');
+ fetchComments(base, true);
+ });
+ $commentsHolder.replaceWith($newContent);
});
+ }
+
+ $(this).find('#comments').each(function() {
+ fetchComments($(this), false);
});
});
});
diff --git a/sweettooth/static/js/templates/extensions/comments_list.mustache b/sweettooth/static/js/templates/extensions/comments_list.mustache
index 9ea88ae..b55a193 100644
--- a/sweettooth/static/js/templates/extensions/comments_list.mustache
+++ b/sweettooth/static/js/templates/extensions/comments_list.mustache
@@ -1,7 +1,11 @@
-{{#.}}
+{{#comments}}
{{>extensions/comment}}
<hr>
-{{/.}}
-{{^.}}
+{{/comments}}
+{{^show_all}}
+<p class="show-all">Show more reviews</p>
+{{/show_all}}
+
+{{^comments}}
<p>There are no comments. Be the first!</p>
-{{/.}}
+{{/comments}}
diff --git a/sweettooth/static/js/templates/templatedata.js b/sweettooth/static/js/templates/templatedata.js
index 5668038..c55cf3d 100644
--- a/sweettooth/static/js/templates/templatedata.js
+++ b/sweettooth/static/js/templates/templatedata.js
@@ -3,7 +3,7 @@
define({
"extensions/comment": "<div class=\"comment\">\n {{#is_extension_creator}}\n <div class=\"extension-creator-badge\">Author</div>\n {{/is_extension_creator}}\n <img src=\"{{gravatar}}\" class=\"gravatar\">\n <div class=\"rating-author\">\n {{#has_rating}}\n <div class=\"rating\" data-rating-value=\"{{rating}}\"></div> by\n {{/has_rating}}\n <a class=\"comment-author\" href=\"{{author.url}}\">{{author.username}}</a>\n <p>{{comment}}</p>\n <time datetime=\"{{date.timestamp}}Z\">{{date.standard}}</time>\n </div>\n</div>",
- "extensions/comments_list": "{{#.}}\n {{>extensions/comment}}\n <hr>\n{{/.}}\n{{^.}}\n <p>There are no comments. Be the first!</p>\n{{/.}}",
+ "extensions/comments_list": "{{#comments}}\n {{>extensions/comment}}\n <hr>\n{{/comments}}\n{{^show_all}}\n<p class=\"show-all\">Show more reviews</p>\n{{/show_all}}\n\n{{^comments}}\n <p>There are no comments. Be the first!</p>\n{{/comments}}",
"extensions/error_report_template": "What's wrong?\n\n\n\nWhat have you tried?\n\n\n\nAutomatically detected errors:\n\n{{#errors}}\n {{.}}\n\n================\n{{/errors}}\n{{^errors}}\nGNOME Shell Extensions did not detect any errors with this extension.\n{{/errors}}\n\nVersion information:\n\n Shell version: {{sv}}\n Extension version: {{#ev}}{{ev}}{{/ev}}{{^ev}}Unknown{{/ev}}",
"extensions/info": "<div class=\"extension\" data-uuid=\"{{uuid}}\">\n {{>extensions/info_contents}}\n</div>",
"extensions/info_contents": "<div class=\"switch\"></div>\n<div class=\"extra-buttons\">\n <div class=\"upgrade-button\" title=\"Upgrade this extension\"></div>\n <div class=\"configure-button\" title=\"Configure this extension\"></div>\n</div>\n<h3 class=\"extension-name\">\n {{#link}}\n <a href=\"{{link}}\" class=\"title-link\"> <img src=\"{{icon}}\" class=\"icon\"> {{name}} </a>\n {{/link}}\n {{^link}}\n {{name}}\n {{/link}}\n</h3>\n{{#creator}}\n <span class=\"author\">by <a href=\"{{creator_url}}\"> {{creator}} </a></span>\n{{/creator}}\n<p class=\"description\">{{first_line_of_description}}</p>\n{{#want_uninstall}}\n <button class=\"uninstall\" title=\"Uninstall\">Uninstall</button>\n{{/want_uninstall}}",
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]