add text-tabular utility

This commit is contained in:
Barış Soner Uşaklı
2026-02-14 17:14:30 -05:00
parent bb9033af02
commit 705a151a6b
3 changed files with 13 additions and 12 deletions

View File

@@ -13,6 +13,7 @@
.text-md { font-size: 1.125rem!important; } // 18px on harmony
.text-sm { font-size: 0.875rem!important; } // 14px on harmony
.text-xs { font-size: 0.75rem!important; } // 12px on harmony
.text-tabular { font-variant-numeric: tabular-nums!important; }
.overscroll-behavior-contain {
overscroll-behavior: contain;

View File

@@ -36,8 +36,8 @@ define('admin/advanced/cache', ['alerts'], function (alerts) {
const rows = tbody.find('tr').toArray();
// Toggle sort direction
const ascending = !!$(this).data('asc');
$(this).data('asc', !ascending);
const ascending = $(this).data('sort') === 'asc';
$(this).data('sort', !ascending ? 'asc' : 'desc');
// Remove sort indicators from all headers
table.find('th i').addClass('invisible');

View File

@@ -14,19 +14,19 @@
<table id="cache-table" class="table table-sm text-sm">
<thead>
<tr>
<th><a href="#" class="text-reset">name</a> <i class="fa-solid invisible fa-sort-down"></i></th>
<th class="text-end"><a href="#" class="text-reset">capacity</a> <i class="fa-solid invisible fa-sort-down"></i></th>
<th class="text-end"><a href="#" class="text-reset">count</a> <i class="fa-solid invisible fa-sort-down"></i></th>
<th class="text-end"><a href="#" class="text-reset">size</a> <i class="fa-solid invisible fa-sort-down"></i></th>
<th class="text-end"><a href="#" class="text-reset">hits</a> <i class="fa-solid fa-sort-down"></i></th>
<th class="text-end"><a href="#" class="text-reset">misses</a> <i class="fa-solid invisible fa-sort-down"></i></th>
<th class="text-end"><a href="#" class="text-reset">hit ratio</a> <i class="fa-solid invisible fa-sort-down"></i></th>
<th class="text-end"><a href="#" class="text-reset">hits/sec</a> <i class="fa-solid invisible fa-sort-down"></i></th>
<th class="text-end"><a href="#" class="text-reset">ttl</a> <i class="fa-solid invisible fa-sort-down"></i></th>
<th><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">name</a></th>
<th class="text-end"><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">capacity</a></th>
<th class="text-end"><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">count</a></th>
<th class="text-end"><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">size</a></th>
<th class="text-end" data-sort="asc"><i class="fa-solid fa-sort-down"></i> <a href="#" class="text-reset">hits</a></th>
<th class="text-end"><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">misses</a></th>
<th class="text-end"><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">hit ratio</a></th>
<th class="text-end"><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">hits/sec</a></th>
<th class="text-end"><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">ttl</a></th>
<th></td>
</tr>
</thead>
<tbody class="text-xs">
<tbody class="text-xs text-tabular">
{{{ each caches }}}
<tr class="align-middle">
<td data-sort-value="{./name}">