Tighten tables layout and grid behavior
This commit is contained in:
@@ -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>;
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user