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 (file)
--- 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 (file)
--- 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 (file)
--- 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");