added 'top users' to home

gabrielflorit · May 22, 2013 · 0b324f4 · 0b324f4
1 parent 289c32f
commit 0b324f4
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 6 deletions.
diff --git a/livecoding/static/css/home.css b/livecoding/static/css/home.css
@@ -172,6 +172,41 @@ header a:hover {
 	position: relative;
 	margin: 8px;
 }
+
+.bars {
+	margin: 0 8px;
+}
+
+.bars .user-container {
+	margin: 1em 0;
+}
+
+.bars .user-container:first-child {
+	margin-top: 8px;
+}
+
+.bars .user {
+	background: #FFF;
+	height: 24px;
+	text-align: right;
+}
+
+.bars .user img {
+	height: 100%;
+}
+
+.bars .user .avatar {
+	position: absolute;
+	top: 0;
+	right: 0;
+	height: 100%;
+}
+
+.bars .user .avatar img {
+	height: 100%;
+	vertical-align: bottom;
+}
+
 .gallery .thumbnails li {
 	display: none;
 }

diff --git a/livecoding/static/js/gists.util.js b/livecoding/static/js/gists.util.js
@@ -112,4 +112,3 @@ var populateThumbnailsFromEndpoint = function(endpoint, node, orderByTime, callb
 	});
 
 };
-
diff --git a/livecoding/static/js/home.js b/livecoding/static/js/home.js
@@ -6,7 +6,36 @@ $(function() {
 
 	populateThumbnailsFromEndpoint('api/gists/0/8', $('.recent ul'), false);
 
-	$.getJSON('api/users/0/8', function(json) {
+	function magic(x, minP, min, max) {
+		return minP + (x - min) * (100-minP)/(max - min);
+	}
+
+	$.getJSON('api/users/0/10', function(json) {
+
+		var users = json.users;
+
+		var maxCount = _.first(users).count;
+		var minCount = _.last(users).count;
+
+		var html = _.map(users, function(v, i) {
+
+			var avatar = v.avatar || 'https://i2.wp.com/a248.e.akamai.net/assets.github.com/images/gravatars/gravatar-user-420.png';
+			var username = v.username;
+			var count = v.count;
+
+			var result = ''
+			+ '<div class="user-container">'
+			+ '  <div class="user" style="width: ' + magic(count, 30, minCount, maxCount) + '%">'
+			+ '    <a href="/gists/user/' + username + '">' + count + (i == 0 ? ' gists' : '') + '</a>'
+			+ '    <a href="/gists/user/' + username + '"><img src="' + avatar + '" /></a>'
+			+ '  </div>'
+			+ '</div>';
+
+			return result;
+
+		}).join('');
+
+		$('.bars').html(html);
 
 	});
 

diff --git a/livecoding/templates/home.html b/livecoding/templates/home.html
@@ -47,8 +47,8 @@
 	<div class='gallery top-users'>
 		<div class='thumbnails-wrapper'>
 			<p class='title'><span>Top users</span></p>
-			<ul class='thumbnails'></ul>
-			<p class='more'><a href='/gists'>more</a></p>
+			<div class='bars'></div>
+			<!-- <p class='more'><a href='/gists'>more</a></p> -->
 		</div>
 	</div>
 

diff --git a/livecoding/views.py b/livecoding/views.py
@@ -205,15 +205,15 @@ def api_gists(start, count):
 @app.route('/api/users/<int:start>/<int:count>')
 def api_users(start, count):
 
-    gists = users.aggregate([
+    users_object = users.aggregate([
         { '$match': { 'username': { '$ne': None } } },
         { '$sort': { 'count': -1 } },
         { '$project': { '_id': 0, 'count': 1, 'username': 1, 'avatar': 1 } },
         { '$skip': start },
         { '$limit': count }
     ])['result']
 
-    return json.dumps({'gists': gists}, default=json_util.default)
+    return json.dumps({'users': users_object}, default=json_util.default)