From c78e1fc3dbab06dd5fa67f763eea5f79008c6deb Mon Sep 17 00:00:00 2001
From: Simon Rupf <simon@rupf.net>
Date: Sun, 23 Aug 2015 15:49:51 +0200
Subject: [PATCH] optimized bootstrap comment layout

---
 .gitignore                |  3 ++-
 css/bootstrap/zerobin.css | 24 ++++++++++++++++++++++++
 js/zerobin.js             | 10 +++++-----
 tpl/bootstrap.html        |  8 ++------
 4 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 css/bootstrap/zerobin.css

diff --git a/.gitignore b/.gitignore
index 38fe785..3a08afe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@ tmp/
 # Ignore unit testing logs, api docs and eclipse project files
 tst/log/
 doc/
-.settings/
+.settings
 .buildpath
 .project
+.externalToolBuilders
diff --git a/css/bootstrap/zerobin.css b/css/bootstrap/zerobin.css
new file mode 100644
index 0000000..64c617b
--- /dev/null
+++ b/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;
+}
diff --git a/js/zerobin.js b/js/zerobin.js
index e661603..6d11c00 100644
--- a/js/zerobin.js
+++ b/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() {
diff --git a/tpl/bootstrap.html b/tpl/bootstrap.html
index 77ea3e7..499f027 100644
--- a/tpl/bootstrap.html
+++ b/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]-->