perf:优化侧边栏评论头像缺失时的显示方式 (#91)

* perf:优化侧边栏-最新评论头像显示

* perf:调整参数为null
This commit is contained in:
mjking 2024-01-08 10:01:57 +08:00 committed by GitHub
parent 994793c967
commit 9771b42c37
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 2 deletions

View File

@ -2907,6 +2907,24 @@ button.swiper-pagination-bullet {
padding: 3px;
}
& > .no-avatar {
width: 40px;
height: 40px;
/* min-width: 40px; */
/* min-height: 40px; */
margin-right: 8px;
background: var(--light-b);
border-radius: 50%;
align-items: center;
justify-content: center;
display: flex;
& > .avatar-info {
font-size: 1em;
color: var(--dark-c);
}
}
.info {
display: flex;
flex-direction: column;

File diff suppressed because one or more lines are too long

View File

@ -10,8 +10,11 @@
<ul class="widget-comment">
<li class="item" th:each="comment : ${comments}">
<div class="user">
<img width="35" height="35" class="avatar" th:src="${comment.owner.avatar}"
<img width="35" height="35" th:unless="${#strings.isEmpty(comment.owner.avatar)}" class="avatar" th:src="${comment.owner.avatar}"
th:alt="${comment.owner.displayName}">
<div th:if="${#strings.isEmpty(comment.owner.avatar)}" class="no-avatar">
<span class="avatar-info">[[${#strings.substring(comment.owner.displayName, 0, 1)}]]</span>
</div>
<div class="info">
<div class="author">[[${comment.owner.displayName}]]</div>
<span class="date">[[${#temporals.format(comment.spec.creationTime, 'yyyy-MM-dd')}]]</span>