Skip to content

S
solo-1
Commit bb6b180c authored by Vanessa's avatar Vanessa
Browse files
Options

💄 #12389 comment

parent 32a5e6d6
Hide whitespace changes
Inline Side-by-side
Showing with 172 additions and 123 deletions
src/main/webapp/skins/Medium/article.ftl
View file @ bb6b180c
......@@ -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
View file @ bb6b180c
<li id="${comment.oId}">
<div>
<div class="avatar tooltipped tooltipped-n" aria-label="${comment.commentName}"
style="background-image: url(${comment.commentThumbnailURL})"></div>
<main>
<div class="fn-clear">
<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}"
onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 23);"
onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
>${comment.commentOriginalCommentName}</a>
<a class="ft-gray" href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 23);"
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>
</#if>
</div>
<div class="content-reset">
${comment.commentContent}
</div>
</main>
</div>
</li>
\ No newline at end of file
<#if article.commentable>
<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>
\ No newline at end of file
src/main/webapp/skins/Medium/css/base.css
View file @ bb6b180c
......@@ -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
View file @ bb6b180c
......@@ -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
View file @ bb6b180c
......@@ -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
View file @ bb6b180c
......@@ -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
View file @ bb6b180c
......@@ -20,4 +20,5 @@
# Author: Liyuan Li
#
cntLabel=\u4E2A
\ No newline at end of file
cntLabel=\u4E2A
reply1Label=\u56DE\u590D
\ No newline at end of file
src/main/webapp/skins/Medium/macro-comments.ftl
View file @ bb6b180c
<#macro comments commentList article>
<header class='title'><h2>${commentLabel}</h2></header>
<ul class="comments" 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 class="article__comment">
<div class="comment__title">${commentLabel}</div>
<div id="comments">
<#list commentList as comment>
<#include 'common-comment.ftl'/>
</#list>
</div>
<#if article.commentable>
<table id="commentForm">
<tbody>
<#if !isLoggedIn>
<tr>
......@@ -26,74 +26,77 @@
</td>
</tr>
</#if>
<tr>
<td id="emotions" class="emotions">
<span class="em00" title="${em00Label}"></span>
<span class="em01" title="${em01Label}"></span>
<span class="em02" title="${em02Label}"></span>
<span class="em03" title="${em03Label}"></span>
<span class="em04" title="${em04Label}"></span>
<span class="em05" title="${em05Label}"></span>
<span class="em06" title="${em06Label}"></span>
<span class="em07" title="${em07Label}"></span>
<span class="em08" title="${em08Label}"></span>
<span class="em09" title="${em09Label}"></span>
<span class="em10" title="${em10Label}"></span>
<span class="em11" title="${em11Label}"></span>
<span class="em12" title="${em12Label}"></span>
<span class="em13" title="${em13Label}"></span>
<span class="em14" title="${em14Label}"></span>
</td>
</tr>
<tr>
<td>
<textarea rows="5" cols="96" id="comment"></textarea>
</td>
</tr>
<tr>
<td id="emotions" class="emotions">
<span class="em00" title="${em00Label}"></span>
<span class="em01" title="${em01Label}"></span>
<span class="em02" title="${em02Label}"></span>
<span class="em03" title="${em03Label}"></span>
<span class="em04" title="${em04Label}"></span>
<span class="em05" title="${em05Label}"></span>
<span class="em06" title="${em06Label}"></span>
<span class="em07" title="${em07Label}"></span>
<span class="em08" title="${em08Label}"></span>
<span class="em09" title="${em09Label}"></span>
<span class="em10" title="${em10Label}"></span>
<span class="em11" title="${em11Label}"></span>
<span class="em12" title="${em12Label}"></span>
<span class="em13" title="${em13Label}"></span>
<span class="em14" title="${em14Label}"></span>
</td>
</tr>
<tr>
<td>
<textarea rows="5" cols="96" id="comment"></textarea>
</td>
</tr>
<#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>
<tr>
<td colspan="2" align="right">
<span class="error-msg" id="commentErrorTip"></span>
<button id="submitCommentButton" onclick="page.submitComment();">${submmitCommentLabel}</button>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<span class="error-msg" id="commentErrorTip"></span>
<button id="submitCommentButton" onclick="page.submitComment();">${submmitCommentLabel}</button>
</td>
</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}",
"mailCannotEmptyLabel": "${mailCannotEmptyLabel}",
"mailInvalidLabel": "${mailInvalidLabel}",
"commentContentCannotEmptyLabel": "${commentContentCannotEmptyLabel}",
"captchaCannotEmptyLabel": "${captchaCannotEmptyLabel}",
"loadingLabel": "${loadingLabel}",
"oId": "${oId}",
"skinDirName": "${skinDirName}",
"blogHost": "${blogHost}",
"randomArticles1Label": "${randomArticles1Label}",
"externalRelevantArticles1Label": "${externalRelevantArticles1Label}"
});
var replyTo = function (id) {
var commentFormHTML = "<table class='form comment-reply' id='replyForm'>";
page.addReplyForm(id, commentFormHTML);
};
(function () {
page.load();
// emotions
page.replaceCommentsEm("#comments .content-reset");
<#nested>
})();
var page = new Page({
"nameTooLongLabel": "${nameTooLongLabel}",
"mailCannotEmptyLabel": "${mailCannotEmptyLabel}",
"mailInvalidLabel": "${mailInvalidLabel}",
"commentContentCannotEmptyLabel": "${commentContentCannotEmptyLabel}",
"captchaCannotEmptyLabel": "${captchaCannotEmptyLabel}",
"loadingLabel": "${loadingLabel}",
"oId": "${oId}",
"skinDirName": "${skinDirName}",
"blogHost": "${blogHost}",
"randomArticles1Label": "${randomArticles1Label}",
"externalRelevantArticles1Label": "${externalRelevantArticles1Label}"
});
var replyTo = function (id) {
var commentFormHTML = "<table class='form comment-reply' id='replyForm'>";
page.addReplyForm(id, commentFormHTML);
};
(function () {
page.load();
// emotions
page.replaceCommentsEm("#comments .content-reset");
<#nested>
})();
</script>
</#macro>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment