From 68dd3e1a1388252d7ed64bcafece011d368cf1a0 Mon Sep 17 00:00:00 2001
From: Ian Stride <ianstride@gmail.com>
Date: Wed, 17 Jan 2024 12:32:03 +0000
Subject: [PATCH] Adjust location of 'view comment' link in CCM UI (#1661)

---
 .../comments/community_moderation.html        |  64 +++++-----
 iogt/static/css/iogt.css                      | 116 +++++++++---------
 2 files changed, 91 insertions(+), 89 deletions(-)

diff --git a/comments/templates/comments/community_moderation.html b/comments/templates/comments/community_moderation.html
index 95b18cec7..5144aea65 100644
--- a/comments/templates/comments/community_moderation.html
+++ b/comments/templates/comments/community_moderation.html
@@ -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">
diff --git a/iogt/static/css/iogt.css b/iogt/static/css/iogt.css
index a820a29f3..77ef1ba8b 100644
--- a/iogt/static/css/iogt.css
+++ b/iogt/static/css/iogt.css
@@ -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 {
@@ -2535,6 +2551,7 @@ input[type=checkbox], input[type=radio] {
 
 .action-btn {
   display: flex;
+  flex: 1;
   flex-direction: column;
   align-items: center;
 }
@@ -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%;
 }
@@ -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;
   }
 }