From 7e2f33269f5b5d373a541f6e6e87974cf1215cda Mon Sep 17 00:00:00 2001
From: Van <lly219@gmail.com>
Date: Wed, 30 Sep 2015 21:38:37 +0800
Subject: [PATCH] comment

---
 bruce/css/bruce.css      | 10 +++--
 bruce/macro-comments.ftl | 85 +++++++++++++++++++++++-----------------
 2 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/bruce/css/bruce.css b/bruce/css/bruce.css
index e836329..db3a9f2 100644
--- a/bruce/css/bruce.css
+++ b/bruce/css/bruce.css
@@ -88,6 +88,12 @@ h4, h5, h6 {
     margin-bottom: 0em;
 }
 
+.form-control,
+#captcha,
+#captchaReply {
+    margin-top: 15px;
+}
+
 .cmtFromSym {
     font-size: 12px;
     color: #ccc;
@@ -98,10 +104,6 @@ h4, h5, h6 {
     margin-top: 24px;
 }
 
-.cmtReplyForm {
-    margin-top: 128px;
-}
-
 .gray {
     color: #ccc;
 }
diff --git a/bruce/macro-comments.ftl b/bruce/macro-comments.ftl
index d4b779f..f7d1ce2 100644
--- a/bruce/macro-comments.ftl
+++ b/bruce/macro-comments.ftl
@@ -1,58 +1,66 @@
 <#macro comments commentList article>
 <div class="row" id="comments">
-    <div class="col-sm-12">
-        <#list commentList as comment>
-        <div class="row comment" id="${comment.oId}">
-            <img class="col-sm-1" title="${comment.commentName}"
-                 alt="${comment.commentName}" src="${comment.commentThumbnailURL}"/>
-            <div class="col-sm-11">
-                <div class="row">
-                    <#if "http://" == comment.commentURL>
-                    <a>${comment.commentName}</a>
-                    <#else>
-                    <a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
-                    </#if>
-                    <#if comment.isReply>@
-                    <a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
-                       onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 20);"
-                       onmouseout="page.hideComment('${comment.commentOriginalCommentId}')">${comment.commentOriginalCommentName}</a>
-                    </#if>
+    <#list commentList as comment>
+    <div class="row comment" id="${comment.oId}">
+        <img class="col-sm-1" title="${comment.commentName}"
+             alt="${comment.commentName}" src="${comment.commentThumbnailURL}"/>
+        <div class="col-sm-11">
+            <div class="row">
+                <#if "http://" == comment.commentURL>
+                <a>${comment.commentName}</a>
+                <#else>
+                <a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
+                </#if>
+                <#if comment.isReply>@
+                <a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
+                   onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 20);"
+                   onmouseout="page.hideComment('${comment.commentOriginalCommentId}')">${comment.commentOriginalCommentName}</a>
+                </#if>
 
-                    <span class="gray">• ${comment.commentDate?string("yy-MM-dd HH:mm")} • <#if article.commentable>
-                        <a rel="nofollow" href="javascript:replyTo('${comment.oId}');">Reply</a>
-                        </#if></span>
+                <span class="gray">• ${comment.commentDate?string("yy-MM-dd HH:mm")} • <#if article.commentable>
+                    <a rel="nofollow" href="javascript:replyTo('${comment.oId}');">Reply</a>
+                    </#if></span>
 
-                </div>
-                <div class="row code-highlight">${comment.commentContent}</div>
             </div>
+            <div class="row code-highlight">${comment.commentContent}</div>
         </div>
-        </#list>
     </div>
+    </#list>
 </div>
 
 <#if article.commentable>
 <div class="row cmtForm">
-    <table id="commentForm" class="col-sm-12">
+    <table id="commentForm" class="col-sm-12 form-horizontal">
         <tbody>
             <#if !isLoggedIn>
             <tr>
-                <td colspan="2">
-                    <input type="text" class="normalInput" id="commentName" placeholder="Name"/>
+                <td>
+                    <label for="commentName" class="col-sm-2 control-label">Name</label>
+                </td>
+                <td>
+                    <input type="text" class="form-control" id="commentName" placeholder="Name"/>
                 </td>
             </tr>
             <tr>
-                <td colspan="2">
-                    <input type="text" class="normalInput" id="commentEmail" placeholder="Email"/>
+                <td>
+                    <label for="commentName" class="col-sm-2 control-label">Email</label>
+                </td>
+                <td>
+                    <input type="text" class="form-control" id="commentEmail" placeholder="Email"/>
                 </td>
             </tr>
             <tr>
-                <td colspan="2">
-                    <input type="text" id="commentURL" placeholder="URL"/>
+                <td>
+                    <label for="commentName" class="col-sm-2 control-label">URL</label>
+                </td>
+                <td>
+                    <input type="text" id="commentURL" placeholder="URL" class="form-control"/>
                 </td>
             </tr>
             </#if>
             <tr>
-                <td id="emotions" colspan="2">
+                <td>&nbsp;</td>
+                <td id="emotions">
                     <span class="em00" title="${em00Label}"></span>
                     <span class="em01" title="${em01Label}"></span>
                     <span class="em02" title="${em02Label}"></span>
@@ -71,15 +79,20 @@
                 </td>
             </tr>
             <tr>
-                <td colspan="2">
-                    <textarea rows="10" style="width: 100%;" id="comment"></textarea>
+                <td>&nbsp;</td>
+                <td>
+                    <textarea rows="3" id="comment" class="form-control"></textarea>
                 </td>
             </tr>
             <#if !isLoggedIn>
             <tr>
-                <td colspan="2">
-                    <input type="text" id="commentValidate"/>
+                <td>&nbsp;</td>
+                <td>
+                    <form class="form-inline">
+                        
+                    <input type="text" id="commentValidate" class="form-control"/>
                     <img id="captcha" alt="validate" src="${servePath}/captcha.do" />
+                    </form>
                 </td>
             </tr>
             </#if>
@@ -147,7 +160,7 @@
                         };
 
                         var replyTo = function (id) {
-                            var commentFormHTML = "<table class='cmtReplyForm' id='replyForm'>";
+                            var commentFormHTML = "<table class='cmtReplyForm col-sm-12 form-horizontal' id='replyForm'>";
                             page.addReplyForm(id, commentFormHTML);
                             $("#replyForm label").each(function () {
                                 $this = $(this);