Changeset 30f843c in Klonkt

Timestamp:

06/27/2026 10:56:27 AM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

6bc2ca7e

Parents:

67aea12

Message:

style(stats): tidier "what do these numbers mean" panel

• views/pages/admin-stats.ejs — replace the plain bullet list with a clean definition layout (term column + description, subtle row dividers), a chevron summary and a muted separated footer note, in a bordered card. i18n keys unchanged.

File:

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

src/views/pages/admin-stats.ejs

@@ -19 +19 @@
   <details class="stats-help">
     <summary><%= t('astat.help_summary') %></summary>
-    <ul>
-      <li><strong><%= t('astat.help_vd_term') %></strong> — <%= t('astat.help_vd_a') %> <em><%= t('astat.help_vd_em') %></em><%= t('astat.help_vd_b') %></li>
-      <li><strong><%= t('astat.help_pv_term') %></strong> — <%= t('astat.help_pv') %></li>
-      <li><strong><%= t('astat.help_plays_term') %></strong> — <%= t('astat.help_plays') %></li>
-      <li><strong><%= t('astat.help_postviews_term') %></strong> — <%= t('astat.help_postviews') %></li>
-    </ul>
-    <p><%= t('astat.help_footer') %></p>
+    <div class="stats-help-body">
+      <dl class="stats-help-defs">
+        <div><dt><%= t('astat.help_vd_term') %></dt><dd><%= t('astat.help_vd_a') %> <em><%= t('astat.help_vd_em') %></em><%= t('astat.help_vd_b') %></dd></div>
+        <div><dt><%= t('astat.help_pv_term') %></dt><dd><%= t('astat.help_pv') %></dd></div>
+        <div><dt><%= t('astat.help_plays_term') %></dt><dd><%= t('astat.help_plays') %></dd></div>
+        <div><dt><%= t('astat.help_postviews_term') %></dt><dd><%= t('astat.help_postviews') %></dd></div>
+      </dl>
+      <p class="stats-help-note"><%= t('astat.help_footer') %></p>
+    </div>
   </details>
 
@@ -148 +150 @@
 .stats-period a { display: inline-block; margin-left: .4rem; padding: .2rem .6rem; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; color: var(--ink); }
 .stats-period a.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
+.stats-help { border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); margin: 0 0 1.25rem; }
+.stats-help summary { cursor: pointer; padding: .7rem 1rem; font-weight: 600; font-size: .9rem; list-style: none; display: flex; align-items: center; gap: .5rem; }
+.stats-help summary::-webkit-details-marker { display: none; }
+.stats-help summary::before { content: '\203A'; font-size: 1.15rem; line-height: 1; color: var(--ink-soft); transition: transform .15s; }
+.stats-help[open] summary::before { transform: rotate(90deg); }
+.stats-help-body { padding: 0 1rem 1rem; }
+.stats-help-defs { margin: 0; }
+.stats-help-defs > div { display: grid; grid-template-columns: 130px 1fr; gap: .2rem 1.1rem; align-items: baseline;
+  padding: .55rem 0; border-top: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); }
+.stats-help-defs dt { font-weight: 700; font-size: .85rem; color: var(--ink); }
+.stats-help-defs dd { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--ink-soft); }
+.stats-help-defs dd em { font-style: italic; color: var(--ink); }
+.stats-help-note { margin: .85rem 0 0; padding-top: .7rem; border-top: 1px solid var(--rule);
+  font-size: .8rem; line-height: 1.55; color: var(--ink-muted); }
+@media (max-width: 480px) { .stats-help-defs > div { grid-template-columns: 1fr; gap: .1rem; } }
 </style>