Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Листаем комменты в батлах с помощью кнопки comment-scroll-arrow #1267

Merged
merged 2 commits into from
Nov 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions frontend/html/comments/types/battle.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Перекинул id сюда, так же добавил класс comment-is-new при необходимости

<div class="comment-header">
<div class="comment-title">{{ comment.title | rutypography }}</div>
<div class="comment-type-battle-userinfo">
Expand Down Expand Up @@ -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">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

контейнер comment-replies чтобы не ломать общие стили

{% 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>
4 changes: 4 additions & 0 deletions frontend/static/css/components/comments.css
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,10 @@

.comment-type-battle {}

.comment-type-battle.comment {
scroll-margin-top: 40px;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+20px к scroll-margin-top, т.к. при переходе на якорь в батлах надо добавить отступ для отображения за что оставлен коммент
image

}

.comment-type-battle .comment-header {
flex-direction: column;
}
Expand Down
8 changes: 8 additions & 0 deletions frontend/static/css/components/posts.css
Original file line number Diff line number Diff line change
Expand Up @@ -1016,9 +1016,17 @@
grid-template-areas:
"prefix prefix prefix"
"left center right"
"reply-form reply-form reply-form"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

форма реплаев сразу под первым батловым комментом

"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;
Expand Down
4 changes: 4 additions & 0 deletions frontend/static/css/layout.css
Original file line number Diff line number Diff line change
Expand Up @@ -583,6 +583,10 @@
justify-self: stretch;
}

.comment-layout-battle .comment-replies {
grid-area: replies;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

а вот это, кажется, лишнее

}

@media only screen and (max-width : 570px) {
.comment-layout-normal {
grid-template-columns: 35px minmax(auto, 1fr) 60px;
Expand Down
4 changes: 3 additions & 1 deletion frontend/static/js/components/CommentScrollArrow.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

к общему массиву новых комментов добавляем батловые реплаи первого и второго уровня

].join()
);

Expand Down
Loading