💄 #12389 comment

src/main/webapp/skins/Medium/article.ftl

@@ -125,7 +125,7 @@
     <a href="${servePath}${nextArticlePermalink}" rel="next"
        class="fn-right tooltipped tooltipped-n"
        aria-label="${nextArticleTitle}">
-    ${nextArticleLabel}
+    nextArticleLabel
     </a>
 </#if>
 </div>

src/main/webapp/skins/Medium/common-comment.ftl

-<li id="${comment.oId}">
-    <div>
-        <div class="avatar tooltipped tooltipped-n" aria-label="${comment.commentName}"
-             style="background-image: url(${comment.commentThumbnailURL})"></div>
-        <main>
+<div id="${comment.oId}" class="comment__item">
+    <img class="comment__avatar" src="${comment.commentThumbnailURL}"/>
+    <main class="comment__body">
         <div class="fn-clear">
+            <span class="comment__user">
                 <#if "http://" == comment.commentURL>
                 ${comment.commentName}
                 <#else>
-                <a class="user-name" href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
+                    <a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
                 </#if>
+            </span>
+            <span class="ft-12">
                 <#if comment.isReply>
-                @<a class="user-name" href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
+                    <a class="ft-gray" href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
                         onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 23);"
-                   onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
-                >${comment.commentOriginalCommentName}</a>
+                        onmouseout="page.hideComment('${comment.commentOriginalCommentId}')">
+                        <svg class="ft-gray"><use xlink:href="#icon-reply"></use></svg>
+                        ${reply1Label} ${comment.commentOriginalCommentName}
+                    </a>
                 </#if>
-                <time class="ft-gray">${comment.commentDate2?string("yyyy-MM-dd HH:mm")}</time>
+                <time class="ft-fade"> • ${comment.commentDate2?string("yyyy-MM-dd")}</time>
+            </span>
+
 
             <#if article.commentable>
-                    <a class="reply-btn" href="javascript:replyTo('${comment.oId}')">${replyLabel}</a>
+                <a class="fn-right ft-green" href="javascript:replyTo('${comment.oId}')">
+                    <svg><use xlink:href="#icon-reply"></use></svg> ${reply1Label}
+                </a>
             </#if>
         </div>
         <div class="content-reset">
             ${comment.commentContent}
         </div>
     </main>
-    </div>
-</li>
+</div>
\ No newline at end of file
\ No newline at end of file

src/main/webapp/skins/Medium/css/base.css

@@ -318,10 +318,18 @@ blockquote {
     float: right
 }
 
+.ft-12 {
+    font-size: 12px;
+}
+
 .ft-gray {
     color: rgba(0,0,0,0.54);
 }
 
+.ft-fade {
+    color: rgba(0, 0, 0, 0.38);
+}
+
 .ft-green {
     color: #03a87c !important;
     transition: all 0.1s
@@ -940,6 +948,56 @@ blockquote {
     margin-bottom: 50px;
 }
 
+.article__comment {
+    width: 640px;
+    margin: 45px auto 0
+}
+
+.article__comment .comment__title {
+    font-size: 16px;
+    margin-bottom: 15px;
+    color: rgba(0,0,0,0.68)
+}
+
+.article__comment .comment__item {
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 4px;
+    border: 1px solid rgba(0, 0, 0, 0.09);
+    border-radius: 3px;
+    padding: 10px 20px;
+    margin: 0 0 20px;
+}
+
+.article__comment .comment__avatar {
+    position: absolute;
+    height: 57px;
+    width: 57px;
+    display: inline-block;
+    z-index: 10;
+    border: 2px solid rgb(255, 255, 255);
+    border-radius: 50%;
+}
+
+.article__comment .comment__body {
+    padding-left: 81px;
+}
+
+.article__comment .comment__body svg.ft-gray {
+    height: 12px;
+    width: 12px;
+    vertical-align: text-top;
+    margin-left: 5px;
+}
+
+.article__comment .comment__user,
+.article__comment .comment__user a {
+    color: rgb(3, 168, 124);
+}
+
+.article__comment .comment__user a:hover {
+    color: rgb(1, 143, 105);
+    text-decoration: none;
+}
 
 
 
@@ -969,28 +1027,6 @@ blockquote {
 }
 
 
-.article__bottom .article__item {
-    box-shadow: 0 1px 7px rgba(0,0,0,0.05);
-    border: 0;
-    background-color: #fff;
-    border-radius: 4px
-}
-
-.article__bottom .article__main--user {
-    height: 45px;
-    margin-bottom: 15px
-}
-
-.article__comment {
-    width: 640px;
-    margin: 45px auto 0
-}
-
-.article__comment .comment__title {
-    font-size: 16px;
-    margin-bottom: 15px;
-    color: rgba(0,0,0,0.68)
-}
 
 .article__toolbar {
     box-shadow: 0 0 1px rgba(0,0,0,0.54);
@@ -1001,7 +1037,8 @@ blockquote {
     height: 44px;
     font-size: 16px;
     line-height: 44px;
-    transition: all 0.1s
+    transition: all 0.1s;
+    opacity: 0
 }
 
 .article__toolbar .wrapper {

src/main/webapp/skins/Medium/header.ftl

@@ -43,6 +43,9 @@
         <svg id="icon-comment" viewBox="0 0 29 29">
             <path d="M21.27 20.058c1.89-1.826 2.754-4.17 2.754-6.674C24.024 8.21 19.67 4 14.1 4 8.53 4 4 8.21 4 13.384c0 5.175 4.53 9.385 10.1 9.385 1.007 0 2-.14 2.95-.41.285.25.592.49.918.7 1.306.87 2.716 1.31 4.19 1.31.276-.01.494-.14.6-.36a.625.625 0 0 0-.052-.65c-.61-.84-1.042-1.71-1.282-2.58a5.417 5.417 0 0 1-.154-.75zm-3.85 1.324l-.083-.28-.388.12a9.72 9.72 0 0 1-2.85.424c-4.96 0-8.99-3.706-8.99-8.262 0-4.556 4.03-8.263 8.99-8.263 4.95 0 8.77 3.71 8.77 8.27 0 2.25-.75 4.35-2.5 5.92l-.24.21v.32c0 .07 0 .19.02.37.03.29.1.6.19.92.19.7.49 1.4.89 2.08-.93-.14-1.83-.49-2.67-1.06-.34-.22-.88-.48-1.16-.74z"></path>
         </svg>
+        <symbol id="icon-reply" viewBox="0 0 28 28">
+            <path d="M0 18c0 2.188 1.094 5.047 1.984 7.047 0.172 0.359 0.344 0.859 0.578 1.188 0.109 0.156 0.219 0.266 0.438 0.266 0.313 0 0.5-0.25 0.5-0.547 0-0.25-0.063-0.531-0.078-0.781-0.047-0.641-0.078-1.281-0.078-1.922 0-7.453 4.422-8.75 11.156-8.75h3.5v4c0 0.547 0.453 1 1 1 0.266 0 0.516-0.109 0.703-0.297l8-8c0.187-0.187 0.297-0.438 0.297-0.703s-0.109-0.516-0.297-0.703l-8-8c-0.187-0.187-0.438-0.297-0.703-0.297-0.547 0-1 0.453-1 1v4h-3.5c-5.125 0-11.5 0.906-13.672 6.297-0.656 1.656-0.828 3.453-0.828 5.203z"></path>
+        </symbol>
         <symbol id="icon-google" viewBox="0 0 32 32"><path d="M19.958 16.236q0 2.889-1.208 5.146t-3.444 3.528-5.125 1.271q-2.069 0-3.958-0.806t-3.25-2.167-2.167-3.25-0.806-3.958 0.806-3.958 2.167-3.25 3.25-2.167 3.958-0.806q3.972 0 6.819 2.667l-2.764 2.653q-1.625-1.569-4.056-1.569-1.708 0-3.16 0.861t-2.299 2.34-0.847 3.229 0.847 3.229 2.299 2.34 3.16 0.861q1.153 0 2.118-0.319t1.59-0.799 1.090-1.090 0.681-1.153 0.299-1.028h-5.778v-3.5h9.611q0.167 0.875 0.167 1.694zM32 14.542v2.917h-2.903v2.903h-2.917v-2.903h-2.903v-2.917h2.903v-2.903h2.917v2.903h2.903z"></path></symbol>
         <symbol id="icon-wechat" viewBox="0 0 32 32"><path d="M9.062 9.203q0-0.641-0.391-1.031t-1.031-0.391q-0.672 0-1.188 0.398t-0.516 1.023q0 0.609 0.516 1.008t1.188 0.398q0.641 0 1.031-0.383t0.391-1.023zM20.672 17.125q0-0.438-0.398-0.781t-1.023-0.344q-0.422 0-0.773 0.352t-0.352 0.773q0 0.438 0.352 0.789t0.773 0.352q0.625 0 1.023-0.344t0.398-0.797zM16.984 9.203q0-0.641-0.383-1.031t-1.023-0.391q-0.672 0-1.188 0.398t-0.516 1.023q0 0.609 0.516 1.008t1.188 0.398q0.641 0 1.023-0.383t0.383-1.023zM26.906 17.125q0-0.438-0.406-0.781t-1.016-0.344q-0.422 0-0.773 0.352t-0.352 0.773q0 0.438 0.352 0.789t0.773 0.352q0.609 0 1.016-0.344t0.406-0.797zM22.75 10.922q-0.484-0.063-1.094-0.063-2.641 0-4.859 1.203t-3.492 3.258-1.273 4.492q0 1.219 0.359 2.375-0.547 0.047-1.062 0.047-0.406 0-0.781-0.023t-0.859-0.102-0.695-0.109-0.852-0.164-0.781-0.164l-3.953 1.984 1.125-3.406q-4.531-3.172-4.531-7.656 0-2.641 1.523-4.859t4.125-3.492 5.68-1.273q2.75 0 5.195 1.031t4.094 2.852 2.133 4.070zM32 19.688q0 1.828-1.070 3.492t-2.898 3.023l0.859 2.828-3.109-1.703q-2.344 0.578-3.406 0.578-2.641 0-4.859-1.102t-3.492-2.992-1.273-4.125 1.273-4.125 3.492-2.992 4.859-1.102q2.516 0 4.734 1.102t3.555 3 1.336 4.117z"></path></symbol>
         <symbol id="icon-weibo" viewBox="0 0 32 32"><path d="M13.242 27.106c-5.22 0.517-9.727-1.847-10.065-5.27-0.339-3.429 3.62-6.618 8.834-7.135 5.22-0.517 9.727 1.847 10.059 5.27 0.345 3.429-3.614 6.624-8.828 7.135zM23.677 15.735c-0.443-0.135-0.751-0.222-0.517-0.806 0.505-1.268 0.554-2.358 0.006-3.14-1.022-1.459-3.823-1.385-7.030-0.037 0 0-1.010 0.437-0.751-0.357 0.492-1.588 0.419-2.912-0.351-3.681-1.742-1.742-6.372 0.068-10.342 4.038-2.967 2.961-4.691 6.119-4.691 8.846 0 5.208 6.686 8.379 13.224 8.379 8.569 0 14.276-4.98 14.276-8.933 0-2.395-2.013-3.749-3.823-4.309z"></path><path d="M29.371 6.193c-2.069-2.296-5.122-3.17-7.942-2.573v0c-0.653 0.142-1.065 0.782-0.923 1.428 0.142 0.653 0.776 1.065 1.428 0.923 2.007-0.425 4.174 0.197 5.645 1.828s1.872 3.854 1.237 5.799v0c-0.203 0.634 0.142 1.311 0.776 1.521 0.634 0.203 1.311-0.142 1.521-0.776v-0.006c0.887-2.721 0.326-5.848-1.742-8.145z"></path><path d="M26.189 9.068c-1.010-1.12-2.499-1.545-3.866-1.25-0.56 0.117-0.917 0.677-0.8 1.237 0.123 0.56 0.677 0.917 1.231 0.794v0c0.671-0.142 1.397 0.068 1.89 0.609 0.492 0.548 0.628 1.293 0.412 1.945v0c-0.172 0.542 0.123 1.133 0.671 1.311 0.548 0.172 1.133-0.123 1.311-0.671 0.431-1.336 0.16-2.863-0.85-3.977z"></path><path d="M13.531 20.907c-0.185 0.314-0.585 0.462-0.899 0.332-0.314-0.123-0.406-0.48-0.228-0.782 0.185-0.302 0.573-0.449 0.88-0.332 0.308 0.111 0.419 0.462 0.246 0.782zM11.863 23.037c-0.505 0.806-1.588 1.157-2.401 0.788-0.8-0.363-1.040-1.299-0.536-2.087 0.499-0.782 1.545-1.133 2.352-0.794 0.819 0.351 1.084 1.28 0.585 2.093zM13.759 17.336c-2.481-0.646-5.288 0.591-6.366 2.776-1.102 2.229-0.037 4.709 2.469 5.522 2.598 0.837 5.664-0.449 6.729-2.85 1.053-2.358-0.259-4.777-2.832-5.448z"></path></symbol>

src/main/webapp/skins/Medium/js/common.js

@@ -68,13 +68,19 @@ var Skin = {
           $('.header').addClass('header--fixed').css({'top': '0'})
           $('.main').css('padding-top', '64px')
           if ($(window).height() <= $('.post').height() && scrollTop < bottomTop - $(window).height()) {
-            $('.article__toolbar').css('bottom', '0')
+            $('.article__toolbar').css({
+              'bottom': 0,
+              'opacity': 1
+            })
           }
         } else if (beforScrollTop - scrollTop < 0) {
           // down
           $('.header').css({'top': '-64px'}).removeClass('header--fixed')
           $('.main').css('padding-top', '0')
-          $('.article__toolbar').css('bottom', '-44px')
+          $('.article__toolbar').css({
+            'bottom': '-44px',
+            'opacity': 0
+          })
         }
 
       } else {

src/main/webapp/skins/Medium/lang/lang_en_US.properties

@@ -20,12 +20,5 @@
 # Author: Liyuan Li
 #
 
-siteViewLabel=Site
-onlineVisitorLabel=Visitor
-tocLabel=Article ToC
-readLabel=Read More
-nextArticleLabel=Next
-previousArticleLabel=Previous
-articleCP1Label=Please indicate the source:
-viewCountLabel=View Count
+reply1Label=Reply
 cntLabel=
\ No newline at end of file

src/main/webapp/skins/Medium/lang/lang_zh_CN.properties

@@ -21,3 +21,4 @@
 #
 
 cntLabel=\u4E2A
+reply1Label=\u56DE\u590D
\ No newline at end of file

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

 <#macro comments commentList article>
-<header class='title'><h2>${commentLabel}</h2></header>
-<ul class="comments" id="comments">
+<div class="article__comment">
+    <div class="comment__title">${commentLabel}</div>
+    <div id="comments">
         <#list commentList as comment>
             <#include 'common-comment.ftl'/>
         </#list>
-</ul>
-<#if article.commentable>
-    <header class='title'><h2>${postCommentsLabel}</h2></header>
-        <table id="commentForm" class="form">
+    </div>
+    <#if article.commentable>
+        <table id="commentForm">
             <tbody>
                 <#if !isLoggedIn>
                 <tr>
@@ -53,8 +53,9 @@
                 <#if !isLoggedIn>
                 <tr>
                     <td>
-                        <input style="width:50%" placeholder="${captchaLabel}" type="text" class="normalInput" id="commentValidate"/>
-                        <img class="captcha" id="captcha" alt="validate" src="${servePath}/captcha.do" />
+                        <input style="width:50%" placeholder="${captchaLabel}" type="text" class="normalInput"
+                               id="commentValidate"/>
+                        <img class="captcha" id="captcha" alt="validate" src="${servePath}/captcha.do"/>
                     </td>
                 </tr>
                 </#if>
@@ -66,11 +67,13 @@
             </tr>
             </tbody>
         </table>
-</#if>
+    </#if>
+</div>
 </#macro>
 
 <#macro comment_script oId>
-<script type="text/javascript" src="${staticServePath}/js/page${miniPostfix}.js?${staticResourceVersion}" charset="utf-8"></script>
+<script type="text/javascript" src="${staticServePath}/js/page${miniPostfix}.js?${staticResourceVersion}"
+        charset="utf-8"></script>
 <script type="text/javascript">
     var page = new Page({
         "nameTooLongLabel": "${nameTooLongLabel}",