xTr1m/RolemasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Flatten critical tables into a shared grid

Browse Source
This commit is contained in:
Frank Tovar
2026-03-21 12:01:15 +01:00
parent 5492ba3f9c
commit 380945d253
3 changed files with 34 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/RolemasterDb.App/Components/Pages/Tables.razor
View File

@@ -103,37 +103,31 @@
}
<div class="table-scroll">
<div class="critical-table-grid" role="table" aria-label="@detail.DisplayName">
<div class="critical-table-grid" role="group" aria-label="@detail.DisplayName" style="@gridTemplateStyle">
@if (detail.Groups.Count > 0)
{
<div class="critical-table-grid-row critical-table-grid-group-row" role="row" style="@gridTemplateStyle">
<div class="critical-table-grid-header-cell critical-table-grid-corner" aria-hidden="true"></div>
@foreach (var group in detail.Groups)
{
<div
class="critical-table-grid-header-cell critical-table-grid-group-header"
role="columnheader"
style="@BuildColumnSpanStyle(detail.Columns.Count)">
<span>@group.Label</span>
</div>
}
</div>
}
<div class="critical-table-grid-row critical-table-grid-column-row" role="row" style="@gridTemplateStyle">
<div class="critical-table-grid-header-cell critical-table-grid-roll-band-header" aria-hidden="true"></div>
@foreach (var displayColumn in displayColumns)
{
<div class="critical-table-grid-header-cell critical-table-grid-column-header" role="columnheader">
<div class="critical-table-grid-header-cell critical-table-grid-column-header">
<span>@displayColumn.ColumnLabel</span>
</div>
}
</div>
@foreach (var rollBand in detail.RollBands)
{
<div class="critical-table-grid-row critical-table-grid-body-row" role="row" style="@gridTemplateStyle">
<div class="critical-table-grid-header-cell critical-table-grid-roll-band" role="rowheader">@rollBand.Label</div>
<div class="critical-table-grid-header-cell critical-table-grid-roll-band">@rollBand.Label</div>
@foreach (var displayColumn in displayColumns)
{
@if (TryGetCell(rollBand.Label, displayColumn.GroupKey, displayColumn.ColumnKey, out var cell))
@@ -145,7 +139,6 @@
@RenderEmptyCriticalTableCell()
}
}
</div>
}
</div>
</div>
@@ -789,7 +782,7 @@
return string.Join(' ', classes);
}
private RenderFragment RenderCriticalTableCell(CriticalTableCellDetail cell) => @<div class="@GetCellCssClass(cell)" role="cell">
private RenderFragment RenderCriticalTableCell(CriticalTableCellDetail cell) => @<div class="@GetCellCssClass(cell)">
<div class="critical-table-cell-shell">
<div class="critical-table-cell-actions">
@if (cell.IsCurated)
@@ -823,7 +816,7 @@
</div>
</div>;
private static RenderFragment RenderEmptyCriticalTableCell() => @<div class="critical-table-cell critical-table-cell-empty" role="cell">
private static RenderFragment RenderEmptyCriticalTableCell() => @<div class="critical-table-cell critical-table-cell-empty">
<span class="empty-cell">—</span>
</div>;
}

11
src/RolemasterDb.App/wwwroot/app.css
View File

@@ -738,6 +738,8 @@ textarea {
}
.critical-table-grid {
display: grid;
align-items: stretch;
width: 100%;
min-width: max-content;
font-size: 1.5rem;
@@ -745,11 +747,6 @@ textarea {
border-left: 1px solid rgba(127, 96, 55, 0.2);
}
.critical-table-grid-row {
display: grid;
align-items: stretch;
}
.critical-table-grid-header-cell {
display: flex;
align-items: center;
@@ -765,8 +762,8 @@ textarea {
box-sizing: border-box;
}
.critical-table-grid-column-row .critical-table-grid-header-cell,
.critical-table-grid-group-row .critical-table-grid-header-cell {
.critical-table-grid-group-header,
.critical-table-grid-column-header {
font-size: 2rem;
}

4
src/RolemasterDb.App/wwwroot/tables.js
View File

@@ -1,3 +1 @@
window.rolemasterTables = window.rolemasterTables || {
alignCriticalCells() {}
};
// Intentionally empty: the tables layout is fully CSS-driven.