Skip to content

Commit

Permalink
refactor: migrate battle topics to css grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@nlopin
nlopin committed Jun 24, 2024
1 parent e893fd3 commit 2ec2f63
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 59 deletions.
113 changes: 54 additions & 59 deletions frontend/html/comments/types/battle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,71 +2,66 @@
{% load text_filters %}
{% load battle %}
{% load posts %}
<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 }}" id="comment-{{ comment.id }}">
<div class="comment-header">
<div class="comment-title">{{ comment.title | rutypography }}</div>
<div class="comment-type-battle-userinfo">
{% include "users/widgets/tiny.html" with user=comment.author %}
<div class="battle-comments-list" id="comment-{{ comment.id }}">
<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="comment-header">
<div class="comment-title">{{ comment.title | rutypography }}</div>
<div class="comment-type-battle-userinfo">
{% include "users/widgets/tiny.html" with user=comment.author %}

<a href="#comment-{{ comment.id }}" class="reply-date">
{{ comment.created_at | cool_date }}
</a>
<a href="#comment-{{ comment.id }}" class="reply-date">
{{ comment.created_at | cool_date }}
</a>
</div>
</div>
</div>
<div class="comment-rating">
<comment-upvote :initial-upvotes="{{ comment.upvotes }}"
:hours-to-retract-vote="{{settings.RETRACT_VOTE_IN_HOURS}}"
upvote-url="{% url "upvote_comment" comment.id %}"
retract-vote-url="{% url "retract_comment_vote" comment.id %}"
{% if comment.is_voted %}
initial-is-voted
initial-upvote-timestamp="{{comment.upvoted_at}}"
{% endif %}
{% if not me|can_upvote_comment:comment or upvote_disabled %}is-disabled{% endif %}>
</comment-upvote>
<div class="comment-rating">
<comment-upvote :initial-upvotes="{{ comment.upvotes }}"
:hours-to-retract-vote="{{settings.RETRACT_VOTE_IN_HOURS}}"
upvote-url="{% url "upvote_comment" comment.id %}"
retract-vote-url="{% url "retract_comment_vote" comment.id %}"
{% if comment.is_voted %}
initial-is-voted
initial-upvote-timestamp="{{comment.upvoted_at}}"
{% endif %}
{% if not me|can_upvote_comment:comment or upvote_disabled %}is-disabled{% endif %}>
</comment-upvote>

{% if comment.is_pinned %}
<div class="comment-pinned-icon"><i class="fas fa-thumbtack"></i></div>
{% endif %}
</div>
<div class="comment-body thread-collapse-toggle">
<div class="text-body text-body-type-comment">
{% render_comment comment %}
{% if comment.is_pinned %}
<div class="comment-pinned-icon"><i class="fas fa-thumbtack"></i></div>
{% endif %}
</div>
</div>
<div class="comment-footer thread-collapse-toggle">
{% if me.id == comment.author_id or me.id == comment.post.author_id or me.is_moderator %}
{% if comment.is_deleted %}
<a href="{% url "delete_comment" comment.id %}" class="comment-footer-button comment-button-visible-on-hover" onclick="return confirm('Восстанавливаем?')"><i class="fas fa-trash-restore"></i></a>
{% else %}
<a href="{% url "delete_comment" comment.id %}" class="comment-footer-button comment-button-visible-on-hover" onclick="return confirm('Удаляем?')"><i class="fas fa-trash"></i></a>
<div class="comment-body thread-collapse-toggle">
<div class="text-body text-body-type-comment">
{% render_comment comment %}
</div>
</div>
<div class="comment-footer thread-collapse-toggle">
{% if me.id == comment.author_id or me.id == comment.post.author_id or me.is_moderator %}
{% if comment.is_deleted %}
<a href="{% url "delete_comment" comment.id %}" class="comment-footer-button comment-button-visible-on-hover" onclick="return confirm('Восстанавливаем?')"><i class="fas fa-trash-restore"></i></a>
{% else %}
<a href="{% url "delete_comment" comment.id %}" class="comment-footer-button comment-button-visible-on-hover" onclick="return confirm('Удаляем?')"><i class="fas fa-trash"></i></a>
{% endif %}
{% endif %}
{% endif %}

{% if me.id == comment.author_id or me.is_moderator %}
<a href="{% url "edit_comment" comment.id %}" class="comment-footer-button comment-button-visible-on-hover"><i class="fas fa-edit"></i></a>
{% endif %}

{% if me and me.is_active_membership and comment.post.is_commentable %}
<span class="comment-footer-button" v-on:click="showReplyForm('{{ comment.id }}', '', true)"><i class="fas fa-reply"></i>&nbsp;ответить</span>
{% endif %}
</div>
</div>

<div class="clearfix"></div>

{% if replies %}
<div class="replies 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 %}
{% if me.id == comment.author_id or me.is_moderator %}
<a href="{% url "edit_comment" comment.id %}" class="comment-footer-button comment-button-visible-on-hover"><i class="fas fa-edit"></i></a>
{% endif %}

{% if post.is_commentable and me %}
{% include "comments/forms/reply.html" with comment=reply_tree.comment reply_form=reply_form %}
{% if me and me.is_active_membership and comment.post.is_commentable %}
<span class="comment-footer-button" v-on:click="showReplyForm('{{ comment.id }}', '', true)"><i class="fas fa-reply"></i>&nbsp;ответить</span>
{% endif %}
{% endfor %}
</div>
</div>
<div class="clearfix20"></div>
{% endif %}

{% 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>
12 changes: 12 additions & 0 deletions frontend/html/posts/show/battle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,21 @@
{% endif %}

{% if comments %}
{% if post.is_commentable and me %}
<reply-container
:reply-to="replyTo"
comment-order="{{ comment_order }}"
avatar-url="{{ me.get_avatar }}"
username="{{ me.full_name }}"
create-comment-url="{% url "create_comment" post.slug %}"
>
{% endif %}
<div class="post-comments-list">
{% include "comments/list.html" with comments=comments reply_form=reply_form type="battle" %}
</div>
{% if post.is_commentable and me %}
</reply-container>
{% endif %}
{% endif %}

{% if me and me.is_active_membership and post.is_commentable and post.is_visible or me.is_moderator %}
Expand Down
15 changes: 15 additions & 0 deletions frontend/static/css/components/comments.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@
padding: 0 20px;
}

.reply-form-form {
scroll-margin-top: 20px;
}

.reply-form {
margin-top: 0;
margin-left: 25px;
Expand Down Expand Up @@ -433,6 +437,9 @@

.comment-type-battle-side-a {
background: rgba(76, 152, 213, 0.3);
/* from left border to the end of the center column */
grid-area: auto / left-start / auto / center-end;
justify-self: start;
}

.comment-type-battle-side-a:target {
Expand All @@ -445,6 +452,9 @@

.comment-type-battle-side-b {
background: rgba(83, 170, 104, 0.3);
/* from center column to the end of the right column */
grid-area: auto / center-start / auto / right-end;
justify-self: end;
}

.comment-type-battle-side-b:target {
Expand All @@ -464,6 +474,7 @@
top: 0.7em;
opacity: 0.5;
font-weight: 500;
grid-area: prefix;
}

.battle-comment-prefix-side-a {
Expand All @@ -475,6 +486,10 @@
text-align: right;
}

.replies-type-battle {
grid-area: replies;
}

.reply {
margin: 10px 0 15px 0;
padding: 10px 0 10px 10px;
Expand Down
9 changes: 9 additions & 0 deletions frontend/static/css/components/posts.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1007,6 +1007,15 @@
}
}

.battle-comments-list {
display: grid;
grid-template-columns: 10% 1fr 10%;
grid-template-areas:
"prefix prefix prefix"
"left center right"
"replies replies replies"
}

.post-comments-form {
padding-top: 30px;
padding-left: 10px;
Expand Down

0 comments on commit 2ec2f63

Please sign in to comment.