Fix #209 rev: sort arrow inline right of label text, not column edge
This commit is contained in:
@@ -523,12 +523,12 @@ 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; }
|
||||||
/* #209: arrow sits RIGHT of the label, vertically centered, and absolutely
|
/* #209 rev: arrow renders inline immediately after the label text (span now
|
||||||
positioned so it never shifts the label text; label aligns with column contents. */
|
follows the text in the markup), so the label left-aligns with its column
|
||||||
th.sortable { position: relative; padding-right: 24px; }
|
contents and no fixed right padding is needed. */
|
||||||
th.sortable .sort-ind {
|
th.sortable .sort-ind {
|
||||||
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
|
|
||||||
display: inline-block; width: 0; height: 0;
|
display: inline-block; width: 0; height: 0;
|
||||||
|
margin-left: 6px; vertical-align: middle;
|
||||||
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); }
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user