Changeset a474bd2 in Klonkt

Timestamp:

06/19/2026 08:39:16 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

0804d61

Parents:

da6fd02

Message:

ui: comment moderation "Recent decisions" as cards instead of a flat table

Card list with status pill, author + post + date, coloured left border per
status (green=approved/red=rejected), responsive (wraps on narrow screen).

Co-Authored-By: Claude <noreply@…>

File:

• src/views/pages/admin-comments.ejs (modified) (2 diffs)

src/views/pages/admin-comments.ejs

@@ -47 +47 @@
     <p class="muted">Nothing yet.</p>
   <% } else { %>
-    <table class="admin-table">
-      <thead>
-        <tr><th>Author</th><th>Post</th><th>Status</th><th>Date</th></tr>
-      </thead>
-      <tbody>
-        <% recent.forEach(function(c) { %>
-          <tr class="status-<%= c.status %>">
-            <td><%= c.author_username %></td>
-            <td><a href="<%= siteUrlBase %>/<%= c.post_slug %>"><%= c.post_title || c.post_slug %></a></td>
-            <td>
-              <span class="status-pill status-pill--<%= c.status %>"><%= c.status %></span>
-            </td>
-            <td><%= formatDateTime(c.created_at) %></td>
-          </tr>
-        <% }); %>
-      </tbody>
-    </table>
+    <ul class="decision-list">
+      <% recent.forEach(function(c) { %>
+        <li class="decision-card decision-card--<%= c.status %>">
+          <span class="status-pill status-pill--<%= c.status %>"><%= c.status %></span>
+          <div class="decision-main">
+            <span class="decision-author"><%= c.author_username %></span>
+            <a class="decision-post" href="<%= siteUrlBase %>/<%= c.post_slug %>"><%= c.post_title || c.post_slug %></a>
+          </div>
+          <span class="decision-date"><%= formatDateTime(c.created_at) %></span>
+        </li>
+      <% }); %>
+    </ul>
   <% } %>
 </div>
@@ -102 +97 @@
 .status-pill--pending  { background: var(--paper); color: var(--ink-muted, var(--ink-soft)); }
 
+/* Recent decisions als cards (i.p.v. een platte tabel) */
+.decision-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
+.decision-card {
+  display: flex; align-items: center; gap: 0.85rem;
+  padding: 0.7rem 0.9rem;
+  background: var(--paper-2); border: 1px solid var(--rule);
+  border-left: 3px solid var(--rule); border-radius: 10px;
+}
+.decision-card--approved { border-left-color: #2a9d5e; }
+.decision-card--rejected { border-left-color: #c33; }
+.decision-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
+.decision-author { font-weight: 600; }
+.decision-post { color: var(--accent); text-decoration: none; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.decision-post:hover { text-decoration: underline; }
+.decision-date { flex: 0 0 auto; color: var(--ink-muted, var(--ink-soft)); font-size: 0.8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
+@media (max-width: 520px) {
+  .decision-card { flex-wrap: wrap; }
+  .decision-date { width: 100%; }
+}
+
 .audio-flash { padding: 0.75rem 1rem; border-radius: 6px; margin: 1rem 0; font-size: 0.9rem; }
 .audio-flash--ok { background: rgba(40, 160, 90, 0.15); color: #2a9d5e; border: 1px solid rgba(40, 160, 90, 0.3); }