mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Comments: Tweaked design to be more consistent and compact
This commit is contained in:
parent
b24246085f
commit
7f98906b0f
@ -676,7 +676,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
@include lightDark(background-color, #FFF, #222);
|
||||
.content {
|
||||
font-size: 0.666em;
|
||||
padding: $-m $-s;
|
||||
padding: $-xs $-s;
|
||||
p, ul, ol {
|
||||
font-size: $fs-m;
|
||||
margin: .5em 0;
|
||||
@ -701,11 +701,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
|
||||
.comment-box .header {
|
||||
border-bottom: 1px solid #DDD;
|
||||
padding: $-s;
|
||||
padding: $-xs $-s;
|
||||
@include lightDark(border-color, #DDD, #000);
|
||||
button {
|
||||
font-size: .8rem;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
@ -734,6 +731,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
|
||||
.comment-reply {
|
||||
display: none;
|
||||
margin: 0 !important;
|
||||
margin-bottom: -$-xxs !important;
|
||||
}
|
||||
|
||||
.comment-branch .comment-branch .comment-branch .comment-branch .comment-reply {
|
||||
|
@ -10,10 +10,10 @@
|
||||
<div class="flex-container-row wrap items-center gap-x-xs">
|
||||
@if ($comment->createdBy)
|
||||
<div>
|
||||
<img width="50" src="{{ $comment->createdBy->getAvatar(50) }}" class="avatar block mx-xs" alt="{{ $comment->createdBy->name }}">
|
||||
<img width="50" src="{{ $comment->createdBy->getAvatar(50) }}" class="avatar block mr-xs" alt="{{ $comment->createdBy->name }}">
|
||||
</div>
|
||||
@endif
|
||||
<div class="meta text-muted flex-container-row wrap items-center flex">
|
||||
<div class="meta text-muted flex-container-row wrap items-center flex text-small">
|
||||
@if ($comment->createdBy)
|
||||
<a href="{{ $comment->createdBy->getProfileUrl() }}">{{ $comment->createdBy->getShortName(16) }}</a>
|
||||
@else
|
||||
@ -31,14 +31,14 @@
|
||||
@if(!$readOnly && (userCan('comment-create-all') || userCan('comment-update', $comment) || userCan('comment-delete', $comment)))
|
||||
<div class="actions mr-s">
|
||||
@if(userCan('comment-create-all'))
|
||||
<button refs="page-comment@reply-button" type="button" class="text-button text-muted hover-underline p-xs">@icon('reply') {{ trans('common.reply') }}</button>
|
||||
<button refs="page-comment@reply-button" type="button" class="text-button text-muted hover-underline text-small p-xs">@icon('reply') {{ trans('common.reply') }}</button>
|
||||
@endif
|
||||
@if(userCan('comment-update', $comment))
|
||||
<button refs="page-comment@edit-button" type="button" class="text-button text-muted hover-underline p-xs">@icon('edit') {{ trans('common.edit') }}</button>
|
||||
<button refs="page-comment@edit-button" type="button" class="text-button text-muted hover-underline text-small p-xs">@icon('edit') {{ trans('common.edit') }}</button>
|
||||
@endif
|
||||
@if(userCan('comment-delete', $comment))
|
||||
<div component="dropdown" class="dropdown-container">
|
||||
<button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" class="text-button text-muted hover-underline p-xs">@icon('delete') {{ trans('common.delete') }}</button>
|
||||
<button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" class="text-button text-muted hover-underline text-small p-xs">@icon('delete') {{ trans('common.delete') }}</button>
|
||||
<ul refs="dropdown@menu" class="dropdown-menu" role="menu">
|
||||
<li class="px-m text-small text-muted pb-s">{{trans('entities.comment_delete_confirm')}}</li>
|
||||
<li>
|
||||
@ -56,7 +56,7 @@
|
||||
</div>
|
||||
@endif
|
||||
<div>
|
||||
<a class="bold text-muted" href="#comment{{$comment->local_id}}">#{{$comment->local_id}}</a>
|
||||
<a class="bold text-muted text-small" href="#comment{{$comment->local_id}}">#{{$comment->local_id}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -65,7 +65,7 @@
|
||||
|
||||
<div refs="page-comment@content-container" class="content">
|
||||
@if ($comment->parent_id)
|
||||
<p class="comment-reply mb-xxs">
|
||||
<p class="comment-reply">
|
||||
<a class="text-muted text-small" href="#comment{{ $comment->parent_id }}">@icon('reply'){{ trans('entities.comment_in_reply_to', ['commentId' => '#' . $comment->parent_id]) }}</a>
|
||||
</p>
|
||||
@endif
|
||||
|
Loading…
Reference in New Issue
Block a user