Tighten tables layout and grid behavior

This commit is contained in:
2026-04-11 23:45:09 +02:00
parent c892a6d07a
commit 6719967907
9 changed files with 221 additions and 419 deletions

View File

@@ -1,7 +1,6 @@
<section class="tables-index-rail" aria-labelledby="tables-index-heading">
<div class="tables-index-rail-header">
<h2 id="tables-index-heading" class="tables-index-title">Table Index</h2>
<p class="tables-index-copy">Choose a table, then read from the roll band across to the result you need.</p>
</div>
<div class="tables-index-controls" @onkeydown="HandleRailKeyDown">
@@ -12,7 +11,7 @@
type="search"
placeholder="Search tables"
value="@searchText"
@oninput="HandleSearchInput" />
@oninput="HandleSearchInput"/>
@if (familyFilters.Count > 1)
{
@@ -74,7 +73,7 @@
@if (filteredTables.Count == 0)
{
<p class="tables-index-empty">No tables match the current search.</p>
<div class="tables-index-empty">No tables match the current search.</div>
}
else
{
@@ -130,11 +129,7 @@
familyFilters.Clear();
familyFilters.Add(string.Empty);
foreach (var family in Tables
.Select(table => table.Family)
.Where(family => !string.IsNullOrWhiteSpace(family))
.Distinct(StringComparer.OrdinalIgnoreCase)
.OrderBy(family => family, StringComparer.OrdinalIgnoreCase))
foreach (var family in Tables.Select(table => table.Family).Where(family => !string.IsNullOrWhiteSpace(family)).Distinct(StringComparer.OrdinalIgnoreCase).OrderBy(family => family, StringComparer.OrdinalIgnoreCase))
{
familyFilters.Add(family);
}
@@ -203,8 +198,7 @@
private bool MatchesFilters(CriticalTableReference table)
{
if (!string.IsNullOrEmpty(selectedFamily) &&
!string.Equals(table.Family, selectedFamily, StringComparison.OrdinalIgnoreCase))
if (!string.IsNullOrEmpty(selectedFamily) && !string.Equals(table.Family, selectedFamily, StringComparison.OrdinalIgnoreCase))
{
return false;
}
@@ -214,9 +208,7 @@
return true;
}
return table.Label.Contains(searchText, StringComparison.OrdinalIgnoreCase)
|| table.Key.Contains(searchText, StringComparison.OrdinalIgnoreCase)
|| table.Family.Contains(searchText, StringComparison.OrdinalIgnoreCase);
return table.Label.Contains(searchText, StringComparison.OrdinalIgnoreCase) || table.Key.Contains(searchText, StringComparison.OrdinalIgnoreCase) || table.Family.Contains(searchText, StringComparison.OrdinalIgnoreCase);
}
private void HandleSearchInput(ChangeEventArgs args)
@@ -237,9 +229,7 @@
string.Equals(selectedFamily, family, StringComparison.OrdinalIgnoreCase);
private string GetFamilyFilterCssClass(string family) =>
IsFamilyFilterSelected(family)
? "tables-family-filter is-selected"
: "tables-family-filter";
IsFamilyFilterSelected(family) ? "tables-family-filter is-selected" : "tables-family-filter";
private void HandleRailKeyDown(KeyboardEventArgs args)
{
@@ -280,9 +270,7 @@
currentIndex = keyboardOptions.FindIndex(item => string.Equals(item.Key, SelectedTableSlug, StringComparison.OrdinalIgnoreCase));
}
var nextIndex = currentIndex < 0
? 0
: Math.Clamp(currentIndex + offset, 0, keyboardOptions.Count - 1);
var nextIndex = currentIndex < 0 ? 0 : Math.Clamp(currentIndex + offset, 0, keyboardOptions.Count - 1);
activeOptionSlug = keyboardOptions[nextIndex].Key;
}
@@ -295,8 +283,7 @@
return;
}
if (!string.IsNullOrWhiteSpace(activeOptionSlug) &&
keyboardOptions.Any(item => string.Equals(item.Key, activeOptionSlug, StringComparison.OrdinalIgnoreCase)))
if (!string.IsNullOrWhiteSpace(activeOptionSlug) && keyboardOptions.Any(item => string.Equals(item.Key, activeOptionSlug, StringComparison.OrdinalIgnoreCase)))
{
return;
}
@@ -338,22 +325,23 @@
private void SetActiveOption(string tableSlug) => activeOptionSlug = tableSlug;
private RenderFragment RenderTableOption(CriticalTableReference table) => @<button
type="button"
role="option"
aria-selected="@string.Equals(table.Key, SelectedTableSlug, StringComparison.OrdinalIgnoreCase)"
class="table-index-option @GetTableOptionCssClass(table)"
@onfocus="() => SetActiveOption(table.Key)"
@onclick="() => OnSelectTable.InvokeAsync(table.Key)">
<span class="table-index-option-copy">
<strong class="table-index-option-title">@table.Label</strong>
<span class="table-index-option-meta">@table.Family</span>
</span>
<span class="table-index-option-chips">
@if (GetIsPinned(table.Key))
{
<StatusChip Tone="accent">Pinned</StatusChip>
}
<StatusChip Tone="@GetCurationTone(table)">@($"{table.CurationPercentage}%")</StatusChip>
</span>
</button>;
}
type="button"
role="option"
aria-selected="@string.Equals(table.Key, SelectedTableSlug, StringComparison.OrdinalIgnoreCase)"
class="table-index-option @GetTableOptionCssClass(table)"
@onfocus="() => SetActiveOption(table.Key)"
@onclick="() => OnSelectTable.InvokeAsync(table.Key)">
<span class="table-index-option-copy">
<strong class="table-index-option-title">@table.Label</strong>
<span class="table-index-option-meta">@table.Family</span>
</span>
<span class="table-index-option-chips">
@if (GetIsPinned(table.Key))
{
<StatusChip Tone="accent">Pinned</StatusChip>
}
<StatusChip Tone="@GetCurationTone(table)">@($"{table.CurationPercentage}%")</StatusChip>
</span>
</button>;
}