poslop/palette
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Sort arrows: left of label, further spaced, vertically centered, no label shift (#101)

Browse Source 
Arrow is absolutely positioned at left:8px in the th, label padding-left
24px; translateY(-50%) keeps it centered regardless of row height, and
being out of flow the label never moves between sorted/unsorted states.
This commit is contained in:
poslop
2026-09-09 17:17:00 -05:00
parent 064f05536a
commit be2b4fb47f
3 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/app.css
+12 -1
View File
@@ -356,10 +356,21 @@ td .id-link:hover { color: var(--accent); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--fg); }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sort-ind { display: inline-block; width: 0; height: 0; margin-left: 8px; vertical-align: middle; border-left: 5px solid transparent; border-right: 5px solid transparent; }
/* #101: arrow sits LEFT of the label, further spaced, vertically centered,
and absolutely positioned so it never shifts the label text. */
th.sortable { position: relative; padding-left: 24px; }
th.sortable .sort-ind {
position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
display: inline-block; width: 0; height: 0;
border-left: 5px solid transparent; border-right: 5px solid transparent;
}
th.sorted.asc .sort-ind { border-bottom: 6px solid var(--accent); }
th.sorted.desc .sort-ind { border-top: 6px solid var(--accent); }
/* #102: small unobtrusive admin link on the settings page */
a.admin-link { color: var(--muted-fg); font-size: 15px; text-decoration: none; }
a.admin-link:hover { color: var(--fg); text-decoration: underline; }
/* ============================================================
Consistency audit (#18) — shared tokens across inputs, buttons,
headings. Visual-only, no behavior change.