Small fixes: gutter alignment, paste column, sort arrows, copy feedback, stats bar, title slug (#50-#55)
CI / test (push) Successful in 21s
CI / docker (push) Skipped

- #50 gutter/code line misalignment: shared --code-lh/--code-fs tokens;
  .code .gutter drops its own vertical padding (was 14px vs 0, 14px offset)
- #51 history Paste column shows only the paste name, or slug pill when untitled
- #52 sort indicator arrow sits LEFT of the column label for all sortable columns
- #53 copy buttons give in-place success feedback ('Success!' in --ok for 2s):
  paste view copy button and new-page result copy button
- #54 collapsed stats summary bar: roomier padding (14px 18px) and item gap (16px);
  wraps gracefully on mobile
- #55 paste view title bar: slug pill only shown for custom slugs, id not repeated

Closes #50, closes #51, closes #52, closes #53, closes #54, closes #55
This commit is contained in:
2026-09-08 22:35:43 -05:00
parent 129934b645
commit 76d7ac12e7
5 changed files with 52 additions and 21 deletions
+12 -9
View File
@@ -10,13 +10,13 @@
<table>
<colgroup><col style="width:260px"><col style="width:140px"><col style="width:120px"><col style="width:96px"><col style="width:140px"><col style="width:190px"><col style="width:100px"></colgroup>
<thead><tr>
<th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
<th data-sort="language" class="sortable">Language<span class="sort-ind"></span></th>
<th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
<th data-sort="view_count" class="sortable">Views<span class="sort-ind"></span></th>
<th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
<th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
<th data-sort="id" class="sortable">ID<span class="sort-ind"></span></th>
<th data-sort="title" class="sortable"><span class="sort-ind"></span>Paste</th>
<th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
<th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
<th data-sort="view_count" class="sortable"><span class="sort-ind"></span>Views</th>
<th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
<th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
<th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th>
</tr></thead>
<tbody id="rows"></tbody>
</table>
@@ -115,8 +115,11 @@ async function load() {
} else {
$('empty').style.display = 'none';
rows.innerHTML = items.map(it =>
`<tr class="row" data-href="/${esc(it.id)}"><td><a class="slug" href="/${esc(it.id)}">${esc(it.id)}</a>` +
(it.title ? `<div class="paste-sub">${esc(it.title)}</div>` : `<div class="paste-sub dim">none</div>`) + `</td>` +
`<tr class="row" data-href="/${esc(it.id)}"><td>` +
(it.title
? `${esc(it.title)}`
: `<a class="slug" href="/${esc(it.id)}">${esc(it.id)}</a>`) +
`</td>` +
`<td><span class="badge">${esc(it.language || 'text')}</span></td>` +
`<td class="dim">${fmtSize(it.size)}</td><td class="dim">${it.view_count}</td><td class="dim" data-ts="${it.created_at}">${ago(it.created_at)}</td>` +
(it.custom_slug ? `<td><a class="slug url-link" href="/${esc(it.custom_slug)}">/${esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +