comment

src/main/webapp/skins/next/css/next.css

@@ -21,6 +21,248 @@
  * @author <a href="http://88250.b3log.org">Liang Ding</a>
  * @version 1.2.0.1, Nov 7, 2015
 */
+.fn-clear:before,
+.fn-clear:after {
+    display: table;
+    content: "";
+    line-height: 0;
+}
+
+.fn-clear:after {
+    clear: both;
+    line-height: 0;
+}
+
+.fn-left {
+    float: left;
+}
+
+.fn-right {
+    float: right;
+}
+
 .fn-none {
-    display: none
+    display: none;
+}
+
+.avatar-48 {
+    box-shadow: 0 0 2px #ddd;
+    height: auto;
+    width: 48px;
+    margin-right: 10px;
+    border-radius: 24px;
+}
+ul.comments {
+    padding: 0;
+    list-style: none;
+    margin-top: 50px;
+    position: relative;
+}
+
+.comments li {
+    padding: 10px;
+    white-space: normal;
+    word-wrap: break-word;
+    position: relative;
+    border-bottom: #EBF2F6 1px solid;
+    list-style: inherit;
+}
+
+.comments li:hover {
+    background-color: #F7F7F7;
+}
+
+.comments li img {
+    vertical-align: sub;
+}
+
+.comments .comment-content {
+    margin: 8px 0 0;
+}
+
+.comments li.comment-body-ref {
+    position: absolute;
+    z-index: 10;
+    background-color: #EBF2F6;
+    border: #d5dbde 1px solid;
+    width: 86%;
+    left: 69px;
+}
+
+.comments .post-meta {
+    margin-top: 0;
+}
+
+#captcha, 
+#captchaReply {
+    height: 27px;
+    display: inline-block;
+    vertical-align: inherit;
+}
+.post-meta {
+    font-family: "Open Sans","Microsoft Yahei",Helvetica;
+    color: #9eabb3;
+}
+.post-meta a {
+    color: #9EABB3;
+    text-decoration: none;
+    border-bottom-width: 0;
+}
+
+.post-meta a:hover {
+    text-decoration: underline;
+}
+
+.post-meta time {
+    border-left: 1px solid #d5dbde;
+    display: inline-block;
+    font-size: 13px;
+    margin-left: 8px;
+    padding-left: 12px;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.post-author {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    bottom: -57px;
+    left: 50%;
+    margin-left: -40px; 
+    width: 80px;
+    height: 80px;
+    border-radius: 100%;
+    overflow: hidden;
+    padding: 6px;
+    background: #fff;
+    z-index: 2;
+    box-shadow: #E7EEF2 0 0 0 1px;
+}
+
+.post-author a {
+    background-size: cover;
+    background-position: center center;
+    width: 68px;
+    height: 68px;
+    display: block;
+    border-radius: 35px;
+}
+/* start emotions */
+.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, 
+.em10, .em11, .em12, .em13, .em14 {
+    cursor: pointer;
+    background-image: url("../images/emotions/emotions-ease.png");
+    float: left;
+    height: 24px;
+    margin-right: 5px;
+    width: 24px;
+    transition: all .2s ease-out;
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+}
+
+#emotions span:hover {
+    transform: scale(1.2) rotate(360deg);
+    -webkit-transform: scale(1.2) rotate(360deg);
+    -moz-transform: scale(1.2) rotate(360deg);
+}
+
+.em01 {
+    background-position: -24px 0;
+}
+
+.em02 {
+    background-position: -48px 0;
+}
+
+.em03 {
+    background-position: -72px 0;
+}
+.em04 {
+    background-position: -96px 0;
+}
+
+.em05 {
+    background-position: 0px -24px;
+}
+
+.em06 {
+    background-position: -24px -24px;
+}
+
+.em07 {
+    background-position: -48px -24px;
+}
+
+.em08 {
+    background-position: -72px -24px;
+}
+
+.em09 {
+    background-position: -96px -24px;
+}
+
+.em10 {
+    background-position: 0 -48px;
+}
+
+.em11 {
+    background-position: -24px -48px ;
+}
+
+.em12 {
+    background-position: -48px -48px;
+}
+
+.em13 {
+    background-position: -72px -48px;
+}
+
+.em14 {
+    background-position: -96px -48px;
+}
+/* end emotions */
+.form {
+    width: 100%;
+    margin-top: 50px;
+}
+
+.form input,
+.form textarea,
+.form button {
+    border: 1px solid #CCCCCC;
+    background-color: #FAFAFA;
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
+    padding: 7px 8px;
+    width: 100%;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    font-family: "Merriweather", "Microsoft Yahei", 'Helvetica';
+    outline: none;
+    line-height: initial;
+}
+
+.form button {
+    width: auto;
+    vertical-align: bottom;
+}
+
+.form input:focus,
+.form textarea:focus {
+    background-color: #FFF;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset, 0 0 5px rgba(81, 167, 232, 0.5);
+    border: 1px solid #51A7E8;
+}
+
+.error-msg {  
+    font-size: 1.5rem;
+    color: #9EABB3;
+}
+
+.cmtFromSym {
+    font-size: 1rem;
+    color: #9EABB3;
 }
\ No newline at end of file

src/main/webapp/skins/next/macro-comments.ftl

 <#macro comments commentList article>
-<ul class="comments" id="comments">
+<ul class="comments fn-wrap" id="comments">
     <#list commentList as comment>
-    <li id="${comment.oId}">
-        <img class="avatar" title="${comment.commentName}" src="${comment.commentThumbnailURL}">
-        <div class="content">
+    <li id="${comment.oId}" class="fn-clear">
+        <div class="fn-left avatar-warp">
+            <img class="avatar-48" title="${comment.commentName}" src="${comment.commentThumbnailURL}">
+        </div>
+        <div class="fn-left" style="width: 90%">
             <div class="fn-clear post-meta">
                 <span class="fn-left">
                     <#if "http://" == comment.commentURL>
-                    <span>${comment.commentName}</span>
+                    <a>${comment.commentName}</a>
                     <#else>
                     <a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
                     </#if>
@@ -18,7 +20,7 @@
                        onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
                        >${comment.commentOriginalCommentName}</a>
                     </#if>
-                    <time>${comment.commentDate?string("yyyy-MM-dd")}</time> 
+                    <time>${comment.commentDate?string("yyyy-MM-dd HH:mm")}</time> 
                 </span>
                 <#if article.commentable>
                 <a class="fn-right" href="javascript:replyTo('${comment.oId}')">${replyLabel}</a>
@@ -114,9 +116,9 @@
                         });
                         var addComment = function (result, state) {
                             var commentable = $("#commentForm").length === 0 ? false : true;
-                            var commentHTML = '<li id="' + result.oId +
-                                    '"><img class="avatar" title="'
-                                    + result.userName + '" src="' + result.commentThumbnailURL + '"><div class="content">'
+                            var commentHTML = '<li class="fn-clear" id="' + result.oId +
+                                    '"><div class="fn-left" style="width: 10%"><img class="avatar-48" title="'
+                                    + result.userName + '" src="' + result.commentThumbnailURL + '"></div><div class="fn-left" style="width: 90%">'
                                     + '<div class="fn-clear post-meta"><span class="fn-left">' + result.replyNameHTML;
                             if (state !== "") {
                                 var commentOriginalCommentName = $("#" + page.currentCommentId).find(".post-meta a").first().text();
@@ -125,7 +127,9 @@
                                         + 'onmouseout="page.hideComment(\'' + page.currentCommentId + '\')">' + commentOriginalCommentName + '</a>';
                             }
 
-                            commentHTML += ' <time>' + result.commentDate
+
+
+                            commentHTML += '<time>' + result.commentDate
                                     + '</time></span>';
                             if (commentable) {
                                 commentHTML += '<a class="fn-right" href="javascript:replyTo(\'' + result.oId + '\');">${replyLabel}</a>';
@@ -142,7 +146,7 @@
                         (function () {
                             page.load();
                             // emotions
-                            page.replaceCommentsEm(".comments .comment-content");
+                            page.replaceCommentsEm("#comments .comment-content");
                             <#nested>
                         })();
 </script>

src/main/webapp/skins/next/macro-head.ftl

@@ -9,10 +9,8 @@
 <meta name="revised" content="${blogTitle?html}, ${year}" />
 <meta name="copyright" content="B3log" />
 <meta http-equiv="Window-target" content="_top" />
-<link href="//fonts.useso.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
-<link href="http://www.arao.me/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css">
-<link href="http://www.arao.me/css/main.css?v=0.4.5.2" rel="stylesheet" type="text/css"/>
 <link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/${skinDirName}${miniPostfix}.css?${staticResourceVersion}" charset="utf-8" />
+<link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/main${miniPostfix}.css?${staticResourceVersion}" charset="utf-8" />
 <link href="${servePath}/blog-articles-rss.do" title="RSS" type="application/rss+xml" rel="alternate" />
 <link rel="icon" type="image/png" href="${servePath}/favicon.png" />
 ${htmlHead}