Fix #209 r2: sort arrow inline immediately after the column label text
CI / test (pull_request) Successful in 43s
CI / docker (pull_request) Skipped

This commit is contained in:
fen
2026-09-10 13:14:19 -05:00
parent 6951470bda
commit f100c490ad
3 changed files with 15 additions and 16 deletions
+2 -3
View File
@@ -525,10 +525,9 @@ 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; }
/* #209: arrow sits RIGHT of the label, vertically centered, and absolutely /* #209: arrow sits RIGHT of the label, vertically centered, and absolutely
positioned so it never shifts the label text; label aligns with column contents. */ positioned so it never shifts the label text; label aligns with column contents. */
th.sortable { position: relative; padding-right: 24px; } /* #209 r2: arrow is inline immediately after the label text, not pinned to the column edge. */
th.sortable .sort-ind { th.sortable .sort-ind {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-block; width: 0; height: 0; margin-left: 5px;
display: inline-block; width: 0; height: 0;
border-left: 5px solid transparent; border-right: 5px solid transparent; 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); }
+7 -7
View File
@@ -10,13 +10,13 @@
<table> <table>
<colgroup><col class="col-a"><col class="col-b"><col class="col-c"><col class="col-d"><col class="col-e"><col class="col-f"><col class="col-g"></colgroup> <colgroup><col class="col-a"><col class="col-b"><col class="col-c"><col class="col-d"><col class="col-e"><col class="col-f"><col class="col-g"></colgroup>
<thead><tr> <thead><tr>
<th data-sort="title" class="sortable"><span class="sort-ind"></span>Paste</th> <th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
<th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th> <th data-sort="language" class="sortable">Language<span class="sort-ind"></span></th>
<th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th> <th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
<th data-sort="view_count" class="sortable"><span class="sort-ind"></span>Views</th> <th data-sort="view_count" class="sortable">Views<span class="sort-ind"></span></th>
<th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th> <th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
<th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th> <th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
<th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th> <th data-sort="id" class="sortable">ID<span class="sort-ind"></span></th>
</tr></thead> </tr></thead>
<tbody id="rows"></tbody> <tbody id="rows"></tbody>
</table> </table>
+6 -6
View File
@@ -10,12 +10,12 @@
<table> <table>
<colgroup><col class="col-a"><col class="col-b"><col class="col-c"><col class="col-d2"><col class="col-e"><col class="col-f"><col class="col-del"></colgroup> <colgroup><col class="col-a"><col class="col-b"><col class="col-c"><col class="col-d2"><col class="col-e"><col class="col-f"><col class="col-del"></colgroup>
<thead><tr> <thead><tr>
<th data-sort="title" class="sortable"><span class="sort-ind"></span>Paste</th> <th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
<th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th> <th data-sort="language" class="sortable">Language<span class="sort-ind"></span></th>
<th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th> <th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
<th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th> <th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
<th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th> <th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
<th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th> <th data-sort="id" class="sortable">ID<span class="sort-ind"></span></th>
<th aria-label="Delete"></th> <th aria-label="Delete"></th>
</tr></thead> </tr></thead>
<tbody id="rows"></tbody> <tbody id="rows"></tbody>