added blogger, updated style and blogs

website/templates/html/blog_page.html

@@ -13,17 +13,33 @@
 	<h2>{{ title }}</h2>
 
 	<!-- begin blog content -->
-	<div class="help">By {{ full_name }} on {{ updated }}</div>
+	<div class="help" style="color: #aaa">
+		{{ blogger_info and blogger_info.full_name or full_name }} wrote this on {{ updated }}</div>
 	<br>
 	{{ content_html }}
 	<!-- end blog content -->
-
+	{% if blogger_info %}
+	<hr />
+	<div class="row">
+		<div class="span2">
+			<div class="avatar avatar-large">
+				<img src="{{ blogger_info.avatar }}" />
+			</div>
+		</div>
+		<div class="span10">
+			<h4>{{ blogger_info.full_name }}</h4>
+			<p>{{ blogger_info.bio }}</p>
+			<p><a href="blog?by={{ blogger_info.name }}&by_name={{ blogger_info.full_name }}">
+				All posts by {{ blogger_info.full_name }}</a></p>
+		</div>
+	</div>
+	{% endif %}
 	<hr>
 	<h3>Comments</h3><br>
 	<div class="blog-comments">
 		
 		{% if not comment_list %}
-		<div class="alert no-comment">
+		<div class="no-comment">
 			<p>Be the first one to comment</p>
 		</div>
 		{% endif %}
@@ -32,22 +48,19 @@
 	</div>
 	<div><button class="btn add-comment">Add Comment</button></div>
 	<div style="display: none; margin-top: 10px;" 
-		id="comment-form" class="well">
+		id="comment-form">
 		<div class="alert" style="display:none;"></div>
 		<form>
-			<p>
-				<input name="comment_by_fullname" placeholder="Your Name" />
-			</p>
-			<p>
-				<input name="comment_by" placeholder="Your Email Id" />
-			</p>
-			<p>
+			<fieldset>
+				<input name="comment_by_fullname" placeholder="Your Name" type="text"/><br>
+				<input name="comment_by" placeholder="Your Email Id" type="text"/><br>
 				<textarea name="comment" placeholder="Comment" style="width: 300px; height: 120px;"/>
-				</textarea>
-			</p>
-			<p>
+				</textarea><br>
 				<button class="btn btn-info" id="submit-comment">Submit</button>
+			</fieldset>
 		</form>
 	</div>
+	<hr>
+	<a href="blog">Show posts by everyone</p>
 </div>
 {% endblock %}

website/templates/html/outer.html

@@ -10,7 +10,7 @@
 	<div class="container">
 		<div class="outer">
 			<div class="navbar{% if top_bar_background=="Black" %} navbar-inverse{% endif %}" 
-				style="margin-bottom: 0px;">
+				style="">
 				<div class="navbar-inner">
 					<a class="brand" href="index">{{ brand_html }}</a>
 					<div class="container">

website/templates/js/blog.js

@@ -23,6 +23,11 @@ $(document).ready(function() {
 	$("#next-page").click(function() {
 		blog.get_list();
 	})
+	
+	if(get_url_arg("by_name")) {
+		$("#blog-title").html("Posts by " + get_url_arg("by_name"));
+		$("#blog-link").toggle(true);
+	}
 });
 
 var blog = {
@@ -33,10 +38,12 @@ var blog = {
 			url: "server.py",
 			data: {
 				cmd: "website.helpers.blog.get_blog_list",
-				start: blog.start
+				start: blog.start,
+				by: get_url_arg("by")
 			},
 			dataType: "json",
 			success: function(data) {
+				if(data.exc) console.log(data.exc);
 				blog.render(data.message);
 			}
 		});
@@ -53,11 +60,20 @@ var blog = {
 				b.comment_text = b.comments + ' comments.'
 			} 
 			
-			$(repl('<h2><a href="%(page_name)s">%(title)s</a></h2>\
-				<div class="help">%(comment_text)s</div>\
-				%(content)s<br />\
-				<p><a href="%(page_name)s">Read with comments...</a></p>\
-				<hr /><br />', b)).appendTo($wrap);
+			$(repl('<div class="row">\
+					<div class="span1">\
+						<div class="avatar avatar-medium" style="margin-top: 6px;">\
+							<img src="%(avatar)s" />\
+						</div>\
+					</div>\
+					<div class="span11">\
+						<h4><a href="%(page_name)s">%(title)s</a></h4>\
+						<p>%(content)s</p>\
+						<p style="color: #aaa; font-size: 90%">\
+							<a href="blog?by=%(blogger)s&by_name=%(full_name)s">\
+								%(full_name)s</a> wrote this on %(published)s / %(comment_text)s</p>\
+					</div>\
+				</div><hr>', b)).appendTo($wrap);
 		});
 		blog.start += (data.length || 0);
 		if(!data.length) {

website/templates/pages/blog.html

@@ -12,7 +12,8 @@
 
 {% block content %}
 <div class="span12">
-	<h1>Blog</h1>
+	<h2 id="blog-title">Blog</h2>
+	<p id="blog-link" style="display:none"><a href="blog">Show posts by everyone.</a></p>
 	<br>
 	<div id="blog-list">
 		<!-- blog list will be generated dynamically -->