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

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

@@ -103,49 +103,42 @@
} }
<div class="table-scroll"> <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) @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>
<div class="critical-table-grid-header-cell critical-table-grid-corner" aria-hidden="true"></div> @foreach (var group in detail.Groups)
@foreach (var group in detail.Groups) {
{ <div
<div class="critical-table-grid-header-cell critical-table-grid-group-header"
class="critical-table-grid-header-cell critical-table-grid-group-header" style="@BuildColumnSpanStyle(detail.Columns.Count)">
role="columnheader" <span>@group.Label</span>
style="@BuildColumnSpanStyle(detail.Columns.Count)"> </div>
<span>@group.Label</span> }
</div> }
}
<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">
<span>@displayColumn.ColumnLabel</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">
<span>@displayColumn.ColumnLabel</span>
</div>
}
</div>
@foreach (var rollBand in detail.RollBands) @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">@rollBand.Label</div>
<div class="critical-table-grid-header-cell critical-table-grid-roll-band" role="rowheader">@rollBand.Label</div> @foreach (var displayColumn in displayColumns)
@foreach (var displayColumn in displayColumns) {
@if (TryGetCell(rollBand.Label, displayColumn.GroupKey, displayColumn.ColumnKey, out var cell))
{ {
@if (TryGetCell(rollBand.Label, displayColumn.GroupKey, displayColumn.ColumnKey, out var cell)) @RenderCriticalTableCell(cell)
{
@RenderCriticalTableCell(cell)
}
else
{
@RenderEmptyCriticalTableCell()
}
} }
</div> else
{
@RenderEmptyCriticalTableCell()
}
}
} }
</div> </div>
</div> </div>
@@ -789,7 +782,7 @@
return string.Join(' ', classes); 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-shell">
<div class="critical-table-cell-actions"> <div class="critical-table-cell-actions">
@if (cell.IsCurated) @if (cell.IsCurated)
@@ -823,7 +816,7 @@
</div> </div>
</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> <span class="empty-cell">—</span>
</div>; </div>;
} }

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

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

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

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