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

CSS: inline sort arrow with uniform 8px gap (#103), full-pill slug roundness (#104)
CI / test (push) Successful in 22s
Details
CI / docker (push) Skipped
Details

Browse Source
This commit is contained in:
poslop
2026-09-09 17:10:24 -05:00
parent ea9edc211a
commit 4175ffef3e
3 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/app.css
+5 -6
View File
@@ -215,10 +215,8 @@ th {
text-align: left; font-size: 18.9px; text-transform: uppercase; letter-spacing: .08em;
color: var(--muted-fg); padding: 10px 16px; border-bottom: 1px solid var(--border); font-weight: 600;
}
/* sort arrow: inline after the label with a consistent fixed gap */
th.sortable { cursor: pointer; user-select: none; padding-right: 16px; }
th.sortable .sort-ind { position: static; transform: none; margin-left: 8px; margin-top: -2px; }
td { padding: 10px 16px; border-bottom: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td { padding: 10px 16px; border-bottom: 1px solid var(--border); overflow: clip; text-overflow: ellipsis; white-space: nowrap; }
td:has(> a.slug), td:has(> .slug) { overflow: visible; }
tr:last-child td { border-bottom: none; }
tr.row { cursor: pointer; }
tr.row:hover td { background: var(--surface-2); }
@@ -350,14 +348,15 @@ td a.slug:hover { color: var(--accent); }
/* paste name under slug pill in Paste column (#43) */
.paste-sub { font-size: 19.8px; color: var(--muted-fg); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paste-sub.dim { color: var(--muted); }
td .url-link { font-size: 19.8px; }
td a.slug.url-link { max-width: 100%; display: inline-block; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
td .id-link { color: var(--muted-fg); text-decoration: none; font-family: var(--font-mono); font-size: 19.8px; }
td .id-link:hover { color: var(--accent); }
/* sortable column headers (#42) */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--fg); }
.sort-ind { display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle; border-left: 5px solid transparent; border-right: 5px solid transparent; }
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; }
th.sorted.asc .sort-ind { border-bottom: 6px solid var(--accent); }
th.sorted.desc .sort-ind { border-top: 6px solid var(--accent); }
internal/web/templates/history.html
+7 -7
View File
@@ -10,13 +10,13 @@
<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>
<thead><tr>
<th data-sort="title" class="sortable"><span class="sort-ind"></span>Paste</th>
<th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
<th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
<th data-sort="view_count" class="sortable"><span class="sort-ind"></span>Views</th>
<th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
<th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
<th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th>
<th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
<th data-sort="language" class="sortable">Language<span class="sort-ind"></span></th>
<th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
<th data-sort="view_count" class="sortable">Views<span class="sort-ind"></span></th>
<th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
<th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
<th data-sort="id" class="sortable">ID<span class="sort-ind"></span></th>
</tr></thead>
<tbody id="rows"></tbody>
</table>
internal/web/templates/mine.html
+6 -6
View File
@@ -10,12 +10,12 @@
<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>
<thead><tr>
<th data-sort="title" class="sortable"><span class="sort-ind"></span>Paste</th>
<th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
<th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
<th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
<th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
<th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th>
<th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
<th data-sort="language" class="sortable">Language<span class="sort-ind"></span></th>
<th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
<th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
<th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>
<th data-sort="id" class="sortable">ID<span class="sort-ind"></span></th>
</tr></thead>
<tbody id="rows"></tbody>
</table>