Move link to comment into 'actions' section of CCM UI (#1658)

unicef · Dec 7, 2023 · 553b57a · 553b57a
1 parent 51bacfe
commit 553b57a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/comments/templates/comments/community_moderation.html b/comments/templates/comments/community_moderation.html
@@ -31,11 +31,10 @@ <h3>{% translate 'Filters' %}</h3>
                 <tr>
                     <td class="comment-moderation-comment">
                         {{ comment.comment }}
-                        <br>
-                        <a href="{{ comment.content_object.get_absolute_url }}" style="color: blue; text-decoration: underline;" target="_blank">Link to Comment</a>
                     </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>

diff --git a/iogt/static/css/iogt.css b/iogt/static/css/iogt.css
@@ -2497,7 +2497,6 @@ input[type=checkbox], input[type=radio] {
 .comment-moderation-comment {
     position: relative;
     display: inline-block;
-    width: 300px;
     white-space: normal;
     overflow: visible;
     text-overflow: unset;
@@ -2533,14 +2532,22 @@ input[type=checkbox], input[type=radio] {
     display: flex;
     justify-content: space-between;
 }
+
 .action-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+
 .action-btn a {
-  margin: 0;
+  border-radius: 8px;
+  border: 1px solid #303030;
+  margin: 0.25rem;
+  padding: 4px 18px;
+  text-align: center;
+  width: 100%;
 }
+
 .comments__submit {
     padding: 12px;
 }
@@ -2549,38 +2556,33 @@ input[type=checkbox], input[type=radio] {
   .comment-moderation-table thead {
     display: none;
   }
+
   .comment-moderation-table td {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100% !important;
     padding: 16px;
   }
+
   .comment-moderation-table td .action-btn {
     flex-direction: row;
     flex-wrap: wrap;
   }
+
   .comment-moderation-table td .action-btn a {
-    border: 1px solid #303030;
-    padding: 4px 18px;
-    border-radius: 8px;
-  }
-  .comment-moderation-table td .action-btn a:not(:last-child) {
-    margin-right: 16px;
+    width: unset;
   }
+
   .comment-moderation-comment {
     white-space: unset;
     text-overflow: unset;
   }
 }
 
-@media screen and (max-width: 420px) {
+@media screen and (max-width: 500px) {
   .comment-moderation-table td .action-btn a {
     width: 100%;
     text-align: center;
   }
-  .comment-moderation-table td .action-btn a:not(:last-child) {
-    margin-right: 0;
-    margin-bottom: 12px
-  }
 }