Skip to content

Commit

Permalink
Merge pull request #245 from lonuslan/master
Browse files Browse the repository at this point in the history 
优化Buttterfly评论框展示样式
  • Loading branch information
@adlered
adlered committed Aug 31, 2023
2 parents 9df4c50 + 25c7da6 commit 7968089
Show file tree
Hide file tree
Showing 4 changed files with 124 additions and 64 deletions.
53 changes: 33 additions & 20 deletions src/main/webapp/skins/bolo-butterfly/common-comment.ftl
View file
Expand Up @@ -17,30 +17,43 @@
along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<div class="vcard" id="${comment.oId}">
<div class="vcard" id="${comment.oId}" xmlns="http://www.w3.org/1999/html">
<div class = "vavatar">
<img class="vcimg" src="${comment.commentThumbnailURL}">
</div>
<div class="vh">
<div class="vhead">
<#if "http://" == comment.commentURL>
<a href="javascript:void(0);" rel="nofollow">${comment.commentName}</a>
<#else>
<a class="vnick" rel="nofollow" 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>
<div class = "vcmeta">
<#if "http://" == comment.commentURL>
<a href="javascript:void(0);" rel="nofollow">${comment.commentName}</a>
<#else>
<a class="vnick" rel="nofollow" href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
</#if>
<span class="vtime">${comment.commentDate2?string("yyyy-MM-dd HH:mm")}</span>
</div>
<#if article.commentable>
<a rel="nofollow" class="vat" href="javascript:page.toggleEditor('${comment.oId}', '${comment.commentName}')">
<span class = "vicon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"></path></svg>
</span>
</a>
</#if>
</div>
<div class="vmeta">
<span class="vtime">${comment.commentDate2?string("yyyy-MM-dd HH:mm")}</span>
<#if article.commentable>
<a rel="nofollow" class="vat" href="javascript:page.toggleEditor('${comment.oId}', '${comment.commentName}')">${replyLabel}</a>
</#if>
</div>
<div class="vcontent">
${comment.commentContent}
<div class="ivcon">
<span class = "vctext">
<#if comment.isReply>
${replyLabel}
<a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 23);"
onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
>@${comment.commentOriginalCommentName}</a>
</#if>
</span>
<span>
<div class="vcontent">
${comment.commentContent}
</div>
</span>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion src/main/webapp/skins/bolo-butterfly/css/base.css
View file

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions src/main/webapp/skins/bolo-butterfly/css/base.scss
View file
Expand Up @@ -4311,3 +4311,10 @@ hr {
a {
text-decoration: none !important;
}

.comment-body-ref {
left: 24rem !important;
right: 20rem !important;
background-color: #e7e7f0 !important;
}

126 changes: 83 additions & 43 deletions src/main/webapp/skins/bolo-butterfly/macro-comments.ftl
View file
Expand Up @@ -19,7 +19,8 @@
-->
<#macro comments commentList article count>
<#if article.commentable>
<style type="text/css">.v[data-class=v] {
<style type="text/css">
.v[data-class=v] {
font-size: 16px;
text-align: left
}
Expand Down Expand Up @@ -370,12 +371,31 @@
width: 100%
}
.v[data-class=v] .vcards .vcard .vat .vicon svg{
width: .8rem !important;
height: .8rem !important;
}
.v[data-class=v] .vcards .vcard {
padding-top: 1.25em;
position: relative;
display: block
padding: 10px 20px 20px 20px;
border-radius: 10px;
margin-top: 1rem;
display: flex;
flex-direction: row;
word-break: break-all;
}
.v[data-class=v] .vcards .vcard .vavatar {
margin-right: 1rem;
flex-shrink: 0;
height: 2.5rem;
width: 2.5rem;
overflow: hidden;
text-align: center;
border-radius: 5px;
}
.v[data-class=v] .vcards .vcard .vavatar .vimg{
height: 2.5rem;
}
.v[data-class=v] .vcards .vcard:after {
content: "";
clear: both;
Expand All @@ -400,13 +420,17 @@
}
.v[data-class=v] .vcards .vcard .vhead {
line-height: 1.5;
margin-top: 0
flex: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 10px;
}
.v[data-class=v] .vcards .vcard .vhead .vnick {
position: relative;
font-size: .875em;
color: #ef794f!important;
font-size: 1em;
font-weight: 500;
margin-right: .4em;
cursor: pointer;
Expand Down Expand Up @@ -439,16 +463,20 @@
.v[data-class=v] .vcards .vcard .vhead .vnick:hover {
color: #d7191a
}
.v[data-class=v] .vcards .vcard .ivcon{
background: #f7f9fe;
padding: 10px 16px 0 16px;
border-radius: 12px;
}
.v[data-class=v] .vcards .vcard .vh {
overflow: hidden;
padding-bottom: .5em;
border-bottom: 1px dashed #f5f5f5
flex: 1;
width: 0;
}
.v[data-class=v] .vcards .vcard .vh .vtime {
font-size: .75em;
margin-right: .875em
margin-right: .875em;
margin-left: 5px;
}
.v[data-class=v] .vcards .vcard .vh .vmeta {
Expand All @@ -457,12 +485,21 @@
}
.v[data-class=v] .vcards .vcard .vh .vmeta .vat {
font-size: .8125em;
color: #ef2f11;
cursor: pointer;
float: right
display: flex;
align-items: center;
margin-left: 0.5rem;
color: #409eff;
text-decoration: none;
display: flex;
align-items: center;
}
.v[data-class=v] .vcards .vcard .vh .vmeta .vat .vicon{
display: inline-block;
height: 0.8em;
width: 0.8em;
line-height: 0;
}
.v[data-class=v] .vcards .vcard:last-child .vh {
border-bottom: none
}
Expand All @@ -473,16 +510,18 @@
font-size: .875em;
line-height: 2;
position: relative;
margin-bottom: .75em;
padding-top: .625em
padding-top: .625em;
padding-bottom: .625em;
}
.v[data-class=v] .vcards .vcard .vcontent.expand {
cursor: pointer;
max-height: 8em;
overflow: hidden
}
.v[data-class=v] .vcards .vcard .vctext{
font-size: 0.875em;
}
.v[data-class=v] .vcards .vcard .vcontent.expand:before {
display: block;
content: "";
Expand Down Expand Up @@ -634,7 +673,7 @@
}
.v[data-class=v] .vsys, .v[data-class=v] .vtime {
color: #929298
color: #929298;
}
.v[data-class=v] code, .v[data-class=v] pre, .v[data-class=v] pre code {
Expand Down Expand Up @@ -676,37 +715,38 @@
.v[data-class=v] .vcards .vcard .vcontent.expand:after {
background: rgba(0, 0, 0, .7)
}
}</style>
<div class="commentFont" id="commentIcon" style="margin: 0 auto; text-align: center; padding-bottom: 20px">
<img src="https://ftp.stackoverflow.wiki/bolo/background/butterfly/comment.png">
<span style="font-size: 30px; vertical-align: middle;">评论</span>
</div>

<div class="wrapper view-article">
<div class="Valine v" data-class="v">
<div class="vpanel">
<div class="vwrap">
<div class="vheader item3">
<input placeholder="你的昵称" id="boloUser" class="vnick vinput" type="text">
<input placeholder="你的个人主页URL（选填）" id="boloSite" class="vmail vinput" type="text">
</div>
<div class="vedit">
<textarea placeholder="${postCommentsLabel} ..." class="veditor vinput" id="comment" rows="5" tabindex="4"></textarea>
</div>
<script type="text/javascript" src="${staticServePath}/js/bolo/sweetalert.min.js"></script>
<div class="vrow">
<div class="vcol vcol-30"><a alt="Markdown is supported"
href="https://guides.github.com/features/mastering-markdown/"
class="vicon" target="_blank">
<svg class="markdown" viewBox="0 0 16 16" version="1.1" width="16" height="16"
aria-hidden="true">
<path fill-rule="evenodd"
d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path>
</svg>
</a></div>
</div>
</div>
<div class="Valine v" data-class="v">
<div class="vpanel">
<div class="vwrap">
<div class="vheader item3">
<input placeholder="你的昵称" id="boloUser" class="vnick vinput" type="text">
<input placeholder="你的个人主页URL（选填）" id="boloSite" class="vmail vinput" type="text">
</div>
<div class="vedit">
<textarea placeholder="${postCommentsLabel} ..." class="veditor vinput" id="comment" rows="5" tabindex="4"></textarea>
</div>
<script type="text/javascript" src="${staticServePath}/js/bolo/sweetalert.min.js"></script>
<div class="vrow">
<div class="vcol vcol-30"><a alt="Markdown is supported"
href="https://guides.github.com/features/mastering-markdown/"
class="vicon" target="_blank">
<svg class="markdown" viewBox="0 0 16 16" version="1.1" width="16" height="16"
aria-hidden="true">
<path fill-rule="evenodd"
d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path>
</svg>
</a></div>
</div>
</div>
</div>
</#if>

<div class="vcount" style="display: block; padding: 25px 0px 20px 0px;"><span class="vnum">${count}</span> 评论</div>
Expand Down

0 comments on commit 7968089

Please sign in to comment.