fix: scroll battle comments with comment-scroll-arrow (#1267)

vas3k · Nov 13, 2024 · d004535 · d004535
1 parent c3645b9
commit d004535
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 10 deletions.
diff --git a/frontend/html/comments/types/battle.html b/frontend/html/comments/types/battle.html
@@ -2,11 +2,11 @@
 {% load text_filters %}
 {% load battle %}
 {% load posts %}
-<div class="battle-comments-list" id="comment-{{ comment.id }}">
+<div class="battle-comments-list">
     <div class="battle-comment-prefix battle-comment-prefix-side-{{ comment.metadata.battle.side }}">
         за «{{ comment.battle_side }}»
     </div>
-    <div class="block comment comment-type-battle comment-type-battle-side-{{ comment.metadata.battle.side }}">
+    <div class="block comment {% if comment.created_at > post_last_view_at %}comment-is-new{% endif %} comment-type-battle comment-type-battle-side-{{ comment.metadata.battle.side }}" id="comment-{{ comment.id }}">
         <div class="comment-header">
             <div class="comment-title">{{ comment.title | rutypography }}</div>
             <div  class="comment-type-battle-userinfo">
@@ -57,11 +57,13 @@
         </div>
     </div>
 
-    {% if replies %}
-        <div class="replies replies-type-battle replies-indent-normal">
-            {% for reply_tree in replies %}
-                {% include "comments/types/reply.html" with comment=reply_tree.comment reply_to=reply_tree.comment replies=reply_tree.replies %}
-            {% endfor %}
-        </div>
-    {% endif %}
+    <div class="comment-replies thread-collapse-toggle">
+        {% if replies %}
+            <div class="replies replies-type-battle replies-indent-normal">
+                {% for reply_tree in replies %}
+                    {% include "comments/types/reply.html" with comment=reply_tree.comment reply_to=reply_tree.comment replies=reply_tree.replies %}
+                {% endfor %}
+            </div>
+        {% endif %}
+    </div>
 </div>
diff --git a/frontend/static/css/components/comments.css b/frontend/static/css/components/comments.css
@@ -418,6 +418,10 @@
 
     .comment-type-battle {}
 
+        .comment-type-battle.comment {
+            scroll-margin-top: 40px;
+        }
+
         .comment-type-battle .comment-header {
             flex-direction: column;
         }

diff --git a/frontend/static/css/components/posts.css b/frontend/static/css/components/posts.css
@@ -1016,9 +1016,17 @@
         grid-template-areas:
             "prefix prefix prefix"
             "left center right"
+            "reply-form reply-form reply-form"
             "replies replies replies"
     }
 
+        .battle-comments-list .comment-replies {
+            grid-area: replies;
+        }
+        .battle-comments-list #comment-reply-form {
+            grid-area: reply-form;
+        }
+
     .post-comments-form {
         padding-top: 30px;
         padding-left: 10px;

diff --git a/frontend/static/css/layout.css b/frontend/static/css/layout.css
@@ -583,6 +583,10 @@
         justify-self: stretch;
     }
 
+    .comment-layout-battle .comment-replies {
+        grid-area: replies;
+    }
+
     @media only screen and (max-width : 570px) {
         .comment-layout-normal {
             grid-template-columns: 35px minmax(auto, 1fr) 60px;

diff --git a/frontend/static/js/components/CommentScrollArrow.vue b/frontend/static/js/components/CommentScrollArrow.vue
@@ -88,8 +88,10 @@ export default {
                      ".post-comments-list > .replies > .reply.comment-is-new",
                      // Новые реплаи на втором уровне к старым реплаям без родительского комментария
                      ".post-comments-list > .replies > .reply:not(.comment-is-new) > .reply.comment-is-new",
+                     // Новые реплаи бэтлов
+                     ".battle-comments-list .comment-replies > .replies > .reply.comment-is-new",
                      // Новые реплаи на втором уровне бэтлов
-                     ".battle-comments .post-comments-list > .replies > .reply:not(.comment-is-new) > .reply-replies >.replies > .reply.comment-is-new",
+                     ".battle-comments-list .comment-replies > .replies > .reply:not(.comment-is-new) > .reply-replies >.replies > .reply.comment-is-new",
                  ].join()
              );