1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-30 07:32:39 +01:00

#47 Displays the time for comments and border bottom for sub comments.

This commit is contained in:
Abijeet 2017-05-25 08:04:19 +05:30
parent 1a1e71cd60
commit 9a97995f18
2 changed files with 38 additions and 21 deletions

View File

@ -2,49 +2,63 @@
.comment-box {
border-bottom: 1px solid $comment-border;
}
.comment-box:last-child {
border-bottom: none;
}
.load-more-comments {
font-size: 0.8em;
margin-top: -1px;
margin-bottom: 6px;
}
}
.page-comment {
.page-comment {
.comment-container {
margin-left: 42px;
}
.comment-actions {
font-size: 0.8em;
padding-bottom: 4px;
font-size: 0.8em;
padding-bottom: 2px;
ul {
padding-left: 0px;
margin-bottom: 5px;
margin-bottom: 2px;
}
li {
float: left;
list-style-type: none;
}
li:after {
content: '';
color: #707070;
padding: 0 5px;
font-size: 1em;
}
li:last-child:after {
content: none;
}
}
.comment-actions.has-border {
border-bottom: 1px solid #DDD;
}
.comment-actions.has-border:last-child {
border-bottom: 0px;
}
.comment-header {
font-size: 1.25em;
margin-top: 0.6em;
}
.comment-body {
.comment-body p {
margin-bottom: 1em;
}
.user-image {
float: left;
margin-right: 10px;
@ -52,12 +66,12 @@
img {
width: 100%;
}
}
}
}
.comment-editor {
margin-top: 2em;
textarea {
display: block;
width: 100%;

View File

@ -1,4 +1,4 @@
<div class='page-comment'>
<div class='page-comment' id="comment-@{{::pageId}}-@{{::comment.id}}">
<div class="user-image">
<img ng-src="@{{::defaultAvatar}}" alt="user avatar">
</div>
@ -9,16 +9,19 @@
<div ng-bind-html="comment.html" class="comment-body">
</div>
<div class="comment-actions">
<div class="comment-actions" ng-class="{'has-border': comment.cnt_sub_comments === 0 || comment.is_loaded}">
<ul>
<li ng-if="level < 3"><a href="#" comment-reply-link no-comment-reply-dupe="true" comment="comment" is-reply="true">Reply</a></li>
<li><a href="#" comment-reply-link no-comment-reply-dupe="true" comment="comment">Edit</a></li>
<li><a href="#">@{{::comment.created_at}}</a></li>
<li>Created <a title="@{{::comment.created.day_time_str}}" href="#comment-@{{::comment.id}}-@{{::pageId}}">@{{::comment.created.diff}}</a></li>
<li ng-if="comment.updated"><span title="@{{::comment.updated.day_time_str}}">Updated @{{::comment.updated.diff}}</span></li>
</ul>
</div>
<a href="#" ng-click="vm.loadSubComments($event, comment, $index)" class="load-more-comments" ng-if="comment.cnt_sub_comments > 0 && !comment.is_loaded">
Load @{{::comment.cnt_sub_comments}} more comment(s)
</a>
<div class="load-more-comments" ng-if="comment.cnt_sub_comments > 0 && !comment.is_loaded">
<a href="#" ng-click="vm.loadSubComments($event, comment, $index)">
Load @{{::comment.cnt_sub_comments}} more comment(s)
</a>
</div>
<div class="comment-box" ng-repeat="comment in comments = comment.comments track by comment.id" ng-init="level = level + 1">
<div ng-include src="'comment-list-item.html'">
</div>