Skip to content

Commit

Permalink
Adjust location of 'view comment' link in CCM UI (#1661)
Browse files Browse the repository at this point in the history
  • Loading branch information
@istride
istride authored Jan 17, 2024
1 parent b671cea commit 68dd3e1
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 89 deletions.
64 changes: 32 additions & 32 deletions comments/templates/comments/community_moderation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,40 +20,40 @@ <h3>{% translate 'Filters' %}</h3>
</div>
</form>
{% if comments %}
<table class="comment-moderation-table">
<thead>
<tr>
<th>{% translate 'Comments' %}</th>
<th class="width-32">{% translate 'Actions' %}</th>
</tr>
</thead>
<div class="cm-table">
<div class="cm-header">
<div class="cm-content">{% translate 'Comments' %}</div>
<div class="cm-actions">{% translate 'Actions' %}</div>
</div>
{% for comment in comments %}
<tr>
<td class="comment-moderation-comment">
{{ comment.comment }}
</td>
<td class="width-32">
<div class="action-btn">
<a href="{{ comment.content_object.get_absolute_url }}#c{{ comment.id }}">Show</a>
{% if comment.comment_moderation.state == 'UNMODERATED' %}
<a href={% url 'comment_approve' comment_pk=comment.id %}>{% translate 'Approve' %}</a>
<a href={% url 'comment_reject' comment_pk=comment.id %}>{% translate 'Reject' %}</a>
<a href={% url 'comment_unsure' comment_pk=comment.id %}>{% translate 'Unsure' %}</a>
{% elif comment.comment_moderation.state == 'APPROVED' %}
<a href={% url 'comment_reject' comment_pk=comment.id %}>{% translate 'Reject' %}</a>
<a href={% url 'comment_unsure' comment_pk=comment.id %}>{% translate 'Unsure' %}</a>
{% elif comment.comment_moderation.state == 'REJECTED' %}
<a href={% url 'comment_approve' comment_pk=comment.id %}>{% translate 'Approve' %}</a>
<a href={% url 'comment_unsure' comment_pk=comment.id %}>{% translate 'Unsure' %}</a>
{% elif comment.comment_moderation.state == 'UNSURE' %}
<a href={% url 'comment_approve' comment_pk=comment.id %}>{% translate 'Approve' %}</a>
<a href={% url 'comment_reject' comment_pk=comment.id %}>{% translate 'Reject' %}</a>
{% endif %}
</div>
</td>
</tr>
<div class="cm-comment">
<div class="cm-content">
<div>{{ comment.comment }}</div>
<div class="cm-links">
<a href="{{ comment.content_object.get_absolute_url }}#c{{ comment.id }}">View comment</a>
</div>
</div>
<div class="cm-actions">
<div class="action-btn">
{% if comment.comment_moderation.state == 'UNMODERATED' %}
<a href={% url 'comment_approve' comment_pk=comment.id %}>{% translate 'Approve' %}</a>
<a href={% url 'comment_reject' comment_pk=comment.id %}>{% translate 'Reject' %}</a>
<a href={% url 'comment_unsure' comment_pk=comment.id %}>{% translate 'Unsure' %}</a>
{% elif comment.comment_moderation.state == 'APPROVED' %}
<a href={% url 'comment_reject' comment_pk=comment.id %}>{% translate 'Reject' %}</a>
<a href={% url 'comment_unsure' comment_pk=comment.id %}>{% translate 'Unsure' %}</a>
{% elif comment.comment_moderation.state == 'REJECTED' %}
<a href={% url 'comment_approve' comment_pk=comment.id %}>{% translate 'Approve' %}</a>
<a href={% url 'comment_unsure' comment_pk=comment.id %}>{% translate 'Unsure' %}</a>
{% elif comment.comment_moderation.state == 'UNSURE' %}
<a href={% url 'comment_approve' comment_pk=comment.id %}>{% translate 'Approve' %}</a>
<a href={% url 'comment_reject' comment_pk=comment.id %}>{% translate 'Reject' %}</a>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</table>
</div>
{% if is_paginated %}
<div class="pagination comment-moderator-pagination">
<span class="page-links">
Expand Down
116 changes: 59 additions & 57 deletions iogt/static/css/iogt.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2455,52 +2455,68 @@ input[type=checkbox], input[type=radio] {
width: auto;
}

.comment-moderation-table {
width: 100%;
border-collapse: collapse;
.cm-table {
display: flex;
flex-flow: column;
margin-top: 26px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.comment-moderation-table td, th {
text-align: left;
padding: 8px 16px;

.cm-table a {
text-decoration: none;
font-size: 16px;
font-weight: 500;
color: #000000;
}
.comment-moderation-table .width-32 {
width: 32%;

.cm-table > .cm-comment,
.cm-table > .cm-header {
display: flex;
flex-flow: row wrap;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.comment-moderation-table thead tr {

.cm-table .cm-header {
background: #F0F0F0;
}
.comment-moderation-table thead tr th {
color: black;
font-size: 16px;
color: #000000;
font-weight: 500;
}
.comment-moderation-table thead td:last-child, th:last-child {
text-align: right;
padding-right: 55px;

.cm-table .cm-header > div,
.cm-table .cm-comment > div {
padding: 0.5rem 1rem;
}
.comment-moderation-table tbody tr {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);

.cm-table .cm-header .cm-content,
.cm-table .cm-comment .cm-content {
flex: 2;
}
.comment-moderation-table tbody td {
padding:16px;

.cm-table .cm-header .cm-actions,
.cm-table .cm-comment .cm-actions {
flex: 1;
}

.comment-moderation-table tbody a {
text-decoration: none;
font-size: 16px;
font-weight: 500;
color: #000000;
.cm-table .cm-comment .cm-actions {
display: flex;
align-items: center;
justify-content: stretch;
}

.comment-moderation-comment {
position: relative;
display: inline-block;
white-space: normal;
overflow: visible;
text-overflow: unset;
word-wrap: break-word;
.cm-table .cm-comment:last-child {
border-bottom: none;
}

.cm-table .cm-comment .cm-content {
display: flex;
flex-direction: column;
padding: 1rem;
justify-content: space-between;
}

.cm-table .cm-comment .cm-links {
margin-top: 0.5rem;
}

.comment-moderation {
Expand Down Expand Up @@ -2535,6 +2551,7 @@ input[type=checkbox], input[type=radio] {

.action-btn {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}
Expand All @@ -2543,7 +2560,7 @@ input[type=checkbox], input[type=radio] {
border-radius: 8px;
border: 1px solid #303030;
margin: 0.25rem;
padding: 4px 18px;
padding: 0.25rem 1rem;
text-align: center;
width: 100%;
}
Expand All @@ -2553,36 +2570,21 @@ input[type=checkbox], input[type=radio] {
}

@media screen and (max-width: 767px) {
.comment-moderation-table thead {
display: none;
}

.comment-moderation-table td {
display: flex;
align-items: center;
justify-content: center;
width: 100% !important;
padding: 16px;
.cm-table .cm-header {
display: none;
}

.comment-moderation-table td .action-btn {
flex-direction: row;
flex-wrap: wrap;
}

.comment-moderation-table td .action-btn a {
width: unset;
.cm-table .cm-actions .action-btn {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

.comment-moderation-comment {
white-space: unset;
text-overflow: unset;
.cm-table .cm-actions .action-btn a {
flex: 1
}
}

@media screen and (max-width: 500px) {
.comment-moderation-table td .action-btn a {
width: 100%;
text-align: center;
.cm-table .cm-comment {
flex-direction: column;
}
}

0 comments on commit 68dd3e1

Please sign in to comment.