Comments: Tweaked design to be more consistent and compact

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index e6c0fdcd16d0d5858dd0e25213643bbe8e457c40..c66a432bf263ec9fde0fb084e4d685076e4364f5 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -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 {

diff --git a/resources/views/comments/comment.blade.php b/resources/views/comments/comment.blade.php
index 8933e2e6ab9be20744a13314a0dc00d387d7d4fb..1cb70916087cff719c21ee8671f0551b9cd0200a 100644 (file)
--- a/resources/views/comments/comment.blade.php
+++ b/resources/views/comments/comment.blade.php
@@ -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