history: entire row clickable, hover accent on slug
This commit is contained in:
@@ -149,7 +149,9 @@ th {
|
|||||||
}
|
}
|
||||||
td { padding: 10px 16px; border-bottom: 1px solid var(--border); }
|
td { padding: 10px 16px; border-bottom: 1px solid var(--border); }
|
||||||
tr:last-child td { border-bottom: none; }
|
tr:last-child td { border-bottom: none; }
|
||||||
|
tr.row { cursor: pointer; }
|
||||||
tr.row:hover td { background: var(--surface-2); }
|
tr.row:hover td { background: var(--surface-2); }
|
||||||
|
tr.row:hover td a.slug { color: var(--accent); }
|
||||||
td a.slug { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg); text-decoration: none; }
|
td a.slug { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg); text-decoration: none; }
|
||||||
td a.slug:hover { color: var(--accent); }
|
td a.slug:hover { color: var(--accent); }
|
||||||
.badge { font-size: 11px; border: 1px solid var(--border); color: var(--muted-fg); border-radius: 999px; padding: 1px 8px; }
|
.badge { font-size: 11px; border: 1px solid var(--border); color: var(--muted-fg); border-radius: 999px; padding: 1px 8px; }
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ async function load() {
|
|||||||
} else {
|
} else {
|
||||||
$('empty').style.display = 'none';
|
$('empty').style.display = 'none';
|
||||||
rows.innerHTML = data.items.map(it =>
|
rows.innerHTML = data.items.map(it =>
|
||||||
`<tr class="row"><td><a class="slug" href="/${esc(it.id)}">${esc(it.id)}</a></td>` +
|
`<tr class="row" data-href="/${esc(it.id)}"><td><a class="slug" href="/${esc(it.id)}">${esc(it.id)}</a></td>` +
|
||||||
`<td class="title-cell">${it.title ? esc(it.title) : '<span class=dim>—</span>'}</td>` +
|
`<td class="title-cell">${it.title ? esc(it.title) : '<span class=dim>—</span>'}</td>` +
|
||||||
`<td><span class="badge">${esc(it.language || 'text')}</span></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">${ago(it.created_at)}</td></tr>`
|
`<td class="dim">${fmtSize(it.size)}</td><td class="dim">${it.view_count}</td><td class="dim">${ago(it.created_at)}</td></tr>`
|
||||||
@@ -82,6 +82,11 @@ $('pg').addEventListener('click', e => {
|
|||||||
load();
|
load();
|
||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0);
|
||||||
});
|
});
|
||||||
|
$('rows').addEventListener('click', e => {
|
||||||
|
const tr = e.target.closest('tr.row[data-href]');
|
||||||
|
if (!tr || e.target.closest('a')) return; // let real links (e.g. middle-click) work
|
||||||
|
window.location.href = tr.dataset.href;
|
||||||
|
});
|
||||||
$('filter').addEventListener('input', () => { page = 1; load(); });
|
$('filter').addEventListener('input', () => { page = 1; load(); });
|
||||||
load();
|
load();
|
||||||
setInterval(load, 30000); // auto-refresh history every 30s
|
setInterval(load, 30000); // auto-refresh history every 30s
|
||||||
|
|||||||
Reference in New Issue
Block a user