UX: Внешний вид комментариев

Author: evgip

public/assets/css/style.css

@@ -17,6 +17,6 @@
     <a class="block" href="<?= post_slug($comment['post_id'], $comment['post_slug']); ?>#comment_<?= $comment['comment_id']; ?>">
       <?= $comment['post_title']; ?>
     </a>
-    <div class="ind-first-p max-w780"><?= markdown($comment['comment_content']); ?></div>
+    <div class="comment-text"><?= markdown($comment['comment_content']); ?></div>
   </div>
 <?php endforeach; ?>

resources/views/default/content/comments/comment.php

@@ -91,7 +91,7 @@ function internalRender($container, $nodes, $post, $level = 0)
                     </div>
                     <?= insert('/content/comments/menu', ['post' => $post, 'comment' => $node, 'type' => 'discussion']); ?>
                   </div>
-                  <div class="comment-text ind-first-p">
+                  <div class="comment-text">
                     <?= markdown($node['comment_content'], 'text'); ?>
                   </div>
                 </div>

resources/views/default/content/post/format-discussion.php

@@ -1,6 +1,6 @@
 <?php if (!empty($data['comments'])) : ?>
   <div class="indent-body">
-    <h2 class="lowercase m0 text-2xl">
+    <h2 class="lowercase text-2xl">
       <?= Html::numWord($post['post_comments_count'], __('app.num_comment'), true); ?>
     </h2>
 
@@ -28,7 +28,7 @@ function internalRender($container, $nodes, $post, $level = 0, $type = 'comment'
 
                   <?= insert('/content/comments/menu', ['post' => $post, 'comment' => $node, 'type' => 'qa', 'level' => $indent]); ?>
 
-                  <div class="max-w780 ind-first-p ml5<?php if ($level == 1) : ?> text-sm<?php endif; ?>">
+                  <div class="comment-text ml5<?php if ($level == 1) : ?> text-sm<?php endif; ?>">
                     <?= markdown($node['comment_content'], 'text'); ?>
                   </div>
                   <div class="comment-footer justify-between">

resources/views/default/content/post/format-qa.php

@@ -244,7 +244,7 @@
 </aside>
 <script nonce="<?= config('main', 'nonce'); ?>">
   document.addEventListener('DOMContentLoaded', () => {
-    mediumZoom(document.querySelectorAll('.post img:not(.emoji, .gif), .content-body img:not(.emoji, .gif), .comment-body .ind-first-p img:not(.emoji, .gif)'));
+    mediumZoom(document.querySelectorAll('.post img:not(.emoji, .gif), .content-body img:not(.emoji, .gif)'));
 
     // Добавим цитирование    
     function get_text() {

resources/views/default/content/post/post-view.php

@@ -218,7 +218,7 @@ h5 {
 }
 
 .box-logo {
-  width: 222px;
+  width: 242px;
   align-items: center;
   display: flex;
   gap: 0.5rem;
@@ -432,7 +432,7 @@ a:hover>img {
   display: flex;
   gap: 1rem;
   font-size: .875rem;
-  margin: 10px 0 0 5px;
+  margin-left: 5px;
 }
 
 .comment,
@@ -518,9 +518,12 @@ li .comment-folder-button:checked~ol.comments li {
   background-color: var(--red-200);
 }
 
-.ind-first-p p {
-  margin: 0.5em 0;
-  max-width: 780px;
+.comment-text p {
+    margin: 0.1em 0 1em 0;
+}
+
+.comment-text blockquote p {
+    margin: 0.6em 0 0.6em 0;
 }
 
 article iframe {

resources/views/default/css/parts/_components.css

@@ -7,6 +7,7 @@
 .menu__left {
   width: 210px;
   padding-right: 20px;
+  margin-right: 20px;
 }
 
 .menuno .menu__left {