From: David ‘Bombe’ Roden <bombe@pterodactylus.net>
Date: Mon, 18 Oct 2010 08:26:35 +0000 (+0200)
Subject: Only show reply form when “comment” is clicked.
X-Git-Tag: 0.1-RC1~249
X-Git-Url: https://git.pterodactylus.net/?a=commitdiff_plain;h=e117f2c373d8ee1598eb846b89a16934664a2720;p=Sone.git

Only show reply form when “comment” is clicked.
---

diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css
index 9e44830..a03f618 100644
--- a/src/main/resources/static/css/sone.css
+++ b/src/main/resources/static/css/sone.css
@@ -1,5 +1,17 @@
 /* Sone Main CSS File */
 
+/* first, override some fproxy rules. */
+#sone .post .reply div,#sone .post .time,#sone .post .delete,#sone .post .show-reply-form
+	{
+	font-size: inherit;
+}
+
+#sone form {
+	margin: 0px;
+}
+
+/* now for the real stuff. */
+
 #sone {
 	width: 50em;
 	margin: auto;
@@ -87,10 +99,6 @@
 	padding: 1ex;
 }
 
-#sone .post .reply div, #sone .post .time, #sone .post .delete, #sone .post .show-reply-form {
-	font-size: inherit; /* or else fproxy's css rules will fuck us. */
-}
-
 #sone .post .reply .time {
 	float: none;
 	display: inline;
@@ -117,6 +125,12 @@
 
 #sone .post .create-reply {
 	clear: both;
+	background-color: #eef;
+	padding: 0.5ex;
+}
+
+#sone .post .create-reply.light button {
+	display: none;
 }
 
 #sone h1 {
@@ -130,6 +144,6 @@
 	font-weight: bold;
 }
 
-#sone input.createpost.default, input.create-reply.default {
+#sone input.createpost.default, input.reply-input.default {
 	color: #888;
-}
\ No newline at end of file
+}
diff --git a/src/main/resources/templates/include/viewPost.html b/src/main/resources/templates/include/viewPost.html
index f66fa54..9eb5925 100644
--- a/src/main/resources/templates/include/viewPost.html
+++ b/src/main/resources/templates/include/viewPost.html
@@ -24,7 +24,7 @@
 			<form method="post" action="createReply.html">
 				<input type="hidden" name="formPassword" value="<% formPassword|html>" />
 				<input type="hidden" name="post" value="<% post.id>" />
-				<input type="text" class="create-reply" name="text" value="" />
+				<input type="text" class="reply-input" name="text" value="" />
 				<button type="submit"><%= View.Post.SendReply|l10n|html></button>
 			</form>
 		</div>
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 8cbf77e..c3fe064 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -4,14 +4,26 @@
 		/* register input field/textarea swap. */
 		$(document).ready(function() {
 			registerInputTextareaSwap("#sone input.createpost", "What are you doing?");
-			registerInputTextareaSwap("#sone input.create-reply", "Write a Reply…");
+			registerInputTextareaSwap("#sone input.reply-input", "Write a Reply…");
 
 			/* hide all the “create reply” forms until a link is clicked. */
 			$("#sone .post").each(function() {
 				postId = $(this).attr("id");
 				(function(postId) {
 					commentElement = $("<div>Comment</div>").addClass("show-reply-form").click(function() {
-						$("#sone .post#" + postId + " .create-reply").removeClass("hidden");
+						replyElement = $("#sone .post#" + postId + " .create-reply");
+						replyElement.removeClass("hidden");
+						replyElement.removeClass("light");
+						(function(replyElement) {
+							replyElement.find("input.reply-input").blur(function() {
+								if ($(this).hasClass("default")) {
+									replyElement.addClass("light");
+								}
+							}).focus(function() {
+								replyElement.removeClass("light");
+							});
+						})(replyElement);
+						replyElement.find("input.create-reply").focus();
 					});
 				})(postId);
 				$(this).find(".create-reply").addClass("hidden");