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 { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--fg); } th.sortable:hover { color: var(--fg); }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } 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.asc .sort-ind { border-bottom: 6px solid var(--accent); }
th.sorted.desc .sort-ind { border-top: 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, Consistency audit (#18) — shared tokens across inputs, buttons,
headings. Visual-only, no behavior change. headings. Visual-only, no behavior change.
internal/web/templates/history.html
+7 -7
View File
@@ -10,13 +10,13 @@
<table> <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> <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> <thead><tr>
<th data-sort="title" class="sortable">Paste<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">Language<span class="sort-ind"></span></th> <th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
<th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th> <th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
<th data-sort="view_count" class="sortable">Views<span class="sort-ind"></span></th> <th data-sort="view_count" class="sortable"><span class="sort-ind"></span>Views</th>
<th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th> <th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
<th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th> <th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
<th data-sort="id" class="sortable">ID<span class="sort-ind"></span></th> <th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th>
</tr></thead> </tr></thead>
<tbody id="rows"></tbody> <tbody id="rows"></tbody>
</table> </table>
internal/web/templates/mine.html
+6 -6
View File
@@ -10,12 +10,12 @@
<table> <table>
<colgroup><col style="width:260px"><col style="width:140px"><col style="width:120px"><col style="width:150px"><col style="width:190px"><col style="width:100px"></colgroup> <colgroup><col style="width:260px"><col style="width:140px"><col style="width:120px"><col style="width:150px"><col style="width:190px"><col style="width:100px"></colgroup>
<thead><tr> <thead><tr>
<th data-sort="title" class="sortable">Paste<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">Language<span class="sort-ind"></span></th> <th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
<th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th> <th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
<th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th> <th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
<th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th> <th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
<th data-sort="id" class="sortable">ID<span class="sort-ind"></span></th> <th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th>
</tr></thead> </tr></thead>
<tbody id="rows"></tbody> <tbody id="rows"></tbody>
</table> </table>