Comments: Tweaked design to be more consistent and compact

This commit is contained in:
Dan Brown 2023-06-28 13:41:14 +01:00
parent b24246085f
commit 7f98906b0f
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 11 additions and 12 deletions

View File

@ -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 {

View File

@ -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