optimized bootstrap comment layout

.gitignore

@@ -7,6 +7,7 @@ tmp/
 # Ignore unit testing logs, api docs and eclipse project files
 tst/log/
 doc/
-.settings/
+.settings
 .buildpath
 .project
+.externalToolBuilders

css/bootstrap/zerobin.css

@@ -0,0 +1,24 @@
+/* ZeroBin 0.19 - http://sebsauvage.net/wiki/doku.php?id=php:zerobin */
+
+
+body {
+	padding: 70px 0 30px 0;
+}
+
+#deletelink {
+	float: right;
+}
+
+#pastelink {
+	display: inline;
+}
+
+#nickname {
+	margin: 5px 0;
+}
+
+.comment {
+	border-left: 1px solid #ccc;
+	padding: 5px 0 5px 5px;
+	white-space: pre-wrap;
+}

js/zerobin.js

@@ -222,7 +222,7 @@ function displayMessages(key, comments) {
             }
             var divComment = $('<article><div class="comment" id="comment_' + comment.meta.commentid+'">'
                                + '<div class="commentmeta"><span class="nickname"></span><span class="commentdate"></span></div><div class="commentdata"></div>'
-                               + '<button onclick="open_reply($(this),\'' + comment.meta.commentid + '\');return false;">Reply</button>'
+                               + '<button onclick="open_reply($(this),\'' + comment.meta.commentid + '\');return false;" class="btn btn-default">Reply</button>'
                                + '</div></article>');
             setElementText(divComment.find('div.commentdata'), cleartext);
             // Convert URLs to clickable links in comment.
@@ -242,7 +242,7 @@ function displayMessages(key, comments) {
 
             place.append(divComment);
         }
-        $('#comments').append('<div class="comment"><button onclick="open_reply($(this),\'' + pasteID() + '\');return false;">Add comment</button></div>');
+        $('#comments').append('<div class="comment"><button onclick="open_reply($(this),\'' + pasteID() + '\');return false;" class="btn btn-default">Add comment</button></div>');
         $('#discussion').removeClass('hidden');
     }
 }
@@ -255,9 +255,9 @@ function displayMessages(key, comments) {
 function open_reply(source, commentid) {
     $('div.reply').remove(); // Remove any other reply area.
     source.after('<div class="reply">'
-                + '<input type="text" id="nickname" title="Optional nickname..." value="Optional nickname..." />'
-                + '<textarea id="replymessage" class="replymessage" cols="80" rows="7"></textarea>'
-                + '<br /><button id="replybutton" onclick="send_comment(\'' + commentid + '\');return false;">Post comment</button>'
+                + '<input type="text" id="nickname" class="form-control" title="Optional nickname..." value="Optional nickname..." />'
+                + '<textarea id="replymessage" class="replymessage form-control" cols="80" rows="7"></textarea>'
+                + '<br /><button id="replybutton" onclick="send_comment(\'' + commentid + '\');return false;" class="btn btn-default">Post comment</button>'
                 + '<div id="replystatus"> </div>'
                 + '</div>');
     $('#nickname').focus(function() {

tpl/bootstrap.html

@@ -7,7 +7,8 @@
 		<meta name="robots" content="noindex" />
 		<title>ZeroBin</title>
 		<link type="text/css" rel="stylesheet" href="css/bootstrap/bootstrap-3.3.5.css" />
-		<link type="text/css" rel="stylesheet" href="css/bootstrap/bootstrap-theme-3.3.5.css" />{if="$SYNTAXHIGHLIGHTING"}
+		<link type="text/css" rel="stylesheet" href="css/bootstrap/bootstrap-theme-3.3.5.css" />
+		<link type="text/css" rel="stylesheet" href="css/bootstrap/zerobin.css?{$VERSION|rawurlencode}" />{if="$SYNTAXHIGHLIGHTING"}
 		<link type="text/css" rel="stylesheet" href="css/prettify/prettify.css?{$VERSION|rawurlencode}" />{if="strlen($SYNTAXHIGHLIGHTINGTHEME)"}
 		<link type="text/css" rel="stylesheet" href="css/prettify/{$SYNTAXHIGHLIGHTINGTHEME}.css?{$VERSION|rawurlencode}" />{/if}{/if}
 		<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
@@ -18,11 +19,6 @@
 		<script type="text/javascript" src="js/bootstrap-3.3.5.js"></script>{if="$SYNTAXHIGHLIGHTING"}
 		<script type="text/javascript" src="js/prettify.js?{$VERSION|rawurlencode}"></script>{/if}
 		<script type="text/javascript" src="js/zerobin.js?{$VERSION|rawurlencode}"></script>
-		<style type="text/css">
-			body { padding: 70px 0 30px 0; }
-			#deletelink { float: right;	}
-			#pastelink { display: inline; }
-    	</style>
 		<!--[if lt IE 10]>
 		<style type="text/css">#ienotice {display:block !important;} #oldienotice {display:block !important;}</style>
 		<![endif]-->