Skip to content

S
solo
Commit 2d54f891 authored by Van's avatar Van
Browse files
Options

✨ #12180 article

parent 09e78f8d
Hide whitespace changes
Inline Side-by-side
Showing with 149 additions and 106 deletions
src/main/webapp/js/page.js
View file @ 2d54f891
......@@ -583,10 +583,11 @@ $.extend(Page.prototype, {
contentType: "application/json",
data: JSON.stringify(requestJSONObject),
success: function (result) {
$("#submitCommentButton" + state).removeAttr("disabled");
if (!result.sc) {
$("#commentErrorTip" + state).html(result.msg);
$("#comment" + state).val("").focus();
$("#submitCommentButton" + state).removeAttr("disabled");
$("#commentValidate" + state).val('');
$("#captcha" + state).click();
if (!Util.isLoggedIn()) {
$("#captcha" + state).attr("src", latkeConfig.servePath + "/captcha.do?code=" + Math.random());
}
......@@ -613,8 +614,7 @@ $.extend(Page.prototype, {
result.userName = Util.getUserName();
}
that.addCommentAjax(addComment(result, state), state);
$("#submitCommentButton" + state).removeAttr("disabled");
that.addCommentAjax(result.cmtTpl, state);
}
});
}
......
src/main/webapp/skins/9IPHP/common-comment.ftl
View file @ 2d54f891
<li id="${comment.oId}" class="fn-clear">
<img class="avatar-48" title="${comment.commentName}" src="${comment.commentThumbnailURL}">
<div class="comment-body">
<div class="fn-clear comment-meta">
<span class="fn-left">
<#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}', 23);"
onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
>${comment.commentOriginalCommentName}</a>
</#if>
<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>
</#if>
</div>
<div class="comment-content post-body article-body">
${comment.commentContent}
</div>
<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">
<#if "http://" == comment.commentURL>
${comment.commentName}
<#else>
<a class="user-name" href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
</#if>
<#if true> 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>
</#if>
<time class="ft-gray">{comment.commentDate?string("yyyy-MM-dd HH:mm")}</time>
<#if true> 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
src/main/webapp/skins/9IPHP/css/base.css
View file @ 2d54f891
......@@ -526,7 +526,7 @@ a[class*=" icon-"]:hover {
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
}
#emotions span:hover {
.emotions span:hover {
transform: scale(1.2) rotate(360deg);
-webkit-transform: scale(1.2) rotate(360deg);
-moz-transform: scale(1.2) rotate(360deg);
......@@ -573,6 +573,23 @@ a[class*=" icon-"]:hover {
.em14 {
background-position: -96px -48px;
}
#commentForm,
#replyForm {
width: 100%;
}
.comments {
position: relative;
}
.comment-body-ref {
position: absolute;
width: 80%;
background-color: #fff;
right: 0;
border: 1px solid #eee;
}
/* end common */
/* start reset common */
......@@ -713,6 +730,36 @@ a {
.list a:hover {
color: #ff4d3a;
}
.form input,
.form textarea {
border: 1px solid #ccc;
background-color: #FAFAFA;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
padding: 0 10px;
width: 100%;
line-height: 28px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box
}
.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
}
.form button {
background-color: #EB5750;
border: 0;
color: #fff;
}
.form button:hover {
background-color: #e42f19;
}
/* end reset common */
/* start framework */
......@@ -798,22 +845,8 @@ aside {
margin-top: 8px;
}
.navbar input {
border: 1px solid #ccc;
background-color: #FAFAFA;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
padding: 0 40px 0 10px;
width: 100%;
line-height: 28px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box
}
.navbar input: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
.navbar .form input {
padding-right: 40px;
}
.navbar button {
......@@ -988,3 +1021,62 @@ aside .tag {
margin-top: 20px;
}
/* end article list */
/* start comments */
.comments > li {
list-style: none;
border-bottom: 1px solid #f1f1f1;
padding: 10px;
}
.comments > li > div {
display: flex;
}
.comments .avatar {
width: 50px;
height: 50px;
border-radius: 100%;
margin-right: 20px;
background-size: contain;
}
.comments main {
flex: 1;
min-width: 1px;
}
.comments .content-reset {
margin-top: 10px;
}
.comments .user-name {
color: #666;
text-decoration: none;
}
.comments .user-name:hover {
color: #ff4d3a;
}
.comments .reply-btn {
float: right;
background-color: #ff4d3a;
color: #fff;
text-decoration: none;
font-size: 12px;
padding: 2px 5px;
}
.comments .reply-btn:hover {
background-color: #e42f19;
}
#commentForm {
margin-top: 20px;
}
.form .captcha {
height: 28px;
}
/* end comments */
\ No newline at end of file
src/main/webapp/skins/9IPHP/header.ftl
View file @ 2d54f891
......@@ -56,7 +56,7 @@
</a>
</nav>
<div class="fn-right">
<form target="_blank" action="http://zhannei.baidu.com/cse/site">
<form class="form" target="_blank" action="http://zhannei.baidu.com/cse/site">
<input placeholder="${searchLabel}" id="search" type="text" name="q"/>
<button type="submit"><i class="icon-search"></i></button>
<input type="hidden" name="cc" value="${serverHost}">
......
src/main/webapp/skins/9IPHP/macro-comments.ftl
View file @ 2d54f891
<#macro comments commentList article>
<#if commentList?size gt 0>
<header class='title'><h2>${commentList?size} ${commentLabel}</h2></header>
</#if>
<ul class="comments" id="comments">
<#list commentList as comment>
<li id="${comment.oId}" class="fn-clear">
<img class="avatar-48" title="${comment.commentName}" src="${comment.commentThumbnailURL}">
<div class="comment-body">
<div class="fn-clear comment-meta">
<span class="fn-left">
<#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}', 23);"
onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
>${comment.commentOriginalCommentName}</a>
</#if>
<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>
</#if>
</div>
<div class="comment-content post-body article-body">
${comment.commentContent}
</div>
</div>
</li>
<#include 'common-comment.ftl'/>
</#list>
</ul>
<#if article.commentable>
<header class='title'><h2>${postCommentsLabel}</h2></header>
<div>
<table id="commentForm" class="form">
<tbody>
<#if !isLoggedIn>
......@@ -54,7 +29,7 @@
</tr>
</#if>
<tr>
<td id="emotions">
<td id="emotions" class="emotions">
<span class="em00" title="${em00Label}"></span>
<span class="em01" title="${em01Label}"></span>
<span class="em02" title="${em02Label}"></span>
......@@ -74,14 +49,14 @@
</tr>
<tr>
<td>
<textarea rows="10" cols="96" id="comment"></textarea>
<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 id="captcha" alt="validate" src="${servePath}/captcha.do" />
<img class="captcha" id="captcha" alt="validate" src="${servePath}/captcha.do" />
</td>
</tr>
</#if>
......@@ -93,7 +68,6 @@
</tr>
</tbody>
</table>
</div>
</#if>
</#macro>
......@@ -113,31 +87,6 @@
"randomArticles1Label": "${randomArticles1Label}",
"externalRelevantArticles1Label": "${externalRelevantArticles1Label}"
});
var addComment = function (result, state) {
var commentable = $("#commentForm").length === 0 ? false : true;
var commentHTML = '<li class="fn-clear" id="' + result.oId +
'"><img class="avatar-48" title="'
+ result.userName + '" src="' + result.commentThumbnailURL + '"><div class="comment-body">'
+ '<div class="fn-clear comment-meta"><span class="fn-left">' + result.replyNameHTML;
if (state !== "") {
var commentOriginalCommentName = $("#" + page.currentCommentId).find(".comment-meta a").first().text();
commentHTML += '&nbsp;@&nbsp;<a href="${servePath}' + result.commentSharpURL.split("#")[0] + '#' + page.currentCommentId + '"'
+ 'onmouseover="page.showComment(this, \'' + page.currentCommentId + '\', 23);"'
+ 'onmouseout="page.hideComment(\'' + page.currentCommentId + '\')">' + commentOriginalCommentName + '</a>';
}
commentHTML += '<time>' + result.commentDate
+ '</time></span>';
if (commentable) {
commentHTML += '<a class="fn-right" href="javascript:replyTo(\'' + result.oId + '\');">${replyLabel}</a>';
}
commentHTML += '</div><div class="comment-content post-body article-body">' +
Util.replaceEmString($("#comment" + state).val())
+ '</div></div></li>';
return commentHTML;
};
var replyTo = function (id) {
var commentFormHTML = "<table class='form comment-reply' id='replyForm'>";
page.addReplyForm(id, commentFormHTML);
......
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