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

Measure critical cell heights for badge alignment

Browse Source
This commit is contained in:
Frank Tovar
2026-03-14 13:55:05 +01:00
parent d9219ece0b
commit 9f1b39d83a
4 changed files with 46 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/RolemasterDb.App/Components/App.razor
View File

@@ -20,6 +20,7 @@
<body> <body>
<Routes /> <Routes />
<ReconnectModal /> <ReconnectModal />
<script src="@Assets["tables.js"]"></script>
<script src="@Assets["_framework/blazor.web.js"]"></script> <script src="@Assets["_framework/blazor.web.js"]"></script>
</body> </body>

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

@@ -3,6 +3,7 @@
@using System @using System
@using System.Collections.Generic @using System.Collections.Generic
@using System.Diagnostics.CodeAnalysis @using System.Diagnostics.CodeAnalysis
@inject IJSRuntime JSRuntime
@inject LookupService LookupService @inject LookupService LookupService
<PageTitle>Critical Tables</PageTitle> <PageTitle>Critical Tables</PageTitle>
@@ -175,6 +176,8 @@
private bool isReferenceDataLoading = true; private bool isReferenceDataLoading = true;
private string? detailError; private string? detailError;
private Dictionary<(string RollBand, string? GroupKey, string ColumnKey), CriticalTableCellDetail>? cellIndex; private Dictionary<(string RollBand, string? GroupKey, string ColumnKey), CriticalTableCellDetail>? cellIndex;
private int tableLayoutVersion;
private int appliedLayoutVersion = -1;
private bool IsTableSelectionDisabled => isReferenceDataLoading || (referenceData?.CriticalTables.Count ?? 0) == 0; private bool IsTableSelectionDisabled => isReferenceDataLoading || (referenceData?.CriticalTables.Count ?? 0) == 0;
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
@@ -198,6 +201,7 @@
{ {
tableDetail = null; tableDetail = null;
cellIndex = null; cellIndex = null;
tableLayoutVersion++;
return; return;
} }
@@ -222,9 +226,21 @@
{ {
isDetailLoading = false; isDetailLoading = false;
BuildCellIndex(); BuildCellIndex();
tableLayoutVersion++;
} }
} }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (tableDetail is null || appliedLayoutVersion == tableLayoutVersion)
{
return;
}
await JSRuntime.InvokeVoidAsync("rolemasterTables.alignCriticalCells");
appliedLayoutVersion = tableLayoutVersion;
}
private void BuildCellIndex() private void BuildCellIndex()
{ {
if (tableDetail?.Cells is null) if (tableDetail?.Cells is null)

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

@@ -544,30 +544,26 @@ textarea {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
height: 100%;
padding: 0.45rem; padding: 0.45rem;
box-sizing: border-box;
} }
.critical-table .roll-band-header { .critical-table .roll-band-header {
width: 120px; width: 120px;
background: rgba(255, 247, 230, 0.52); background: rgba(255, 247, 230, 0.52);
font-size: 0.98rem; font-size: 1.5rem;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
.critical-table thead th { .critical-table thead th {
font-size: 0.98rem; font-size: 1.5rem;
} }
.critical-table td .affix-badge-list { .critical-table td .affix-badge-list {
margin-top: auto; margin-top: auto;
} }
.critical-table tbody tr {
height: 1px;
}
.empty-cell { .empty-cell {
color: #a08464; color: #a08464;
font-style: italic; font-style: italic;

26
src/RolemasterDb.App/wwwroot/tables.js Normal file
View File

@@ -0,0 +1,26 @@
window.rolemasterTables = window.rolemasterTables || {
alignCriticalCells() {
const tables = document.querySelectorAll(".critical-table");
for (const table of tables) {
for (const cell of table.querySelectorAll("td > .critical-cell")) {
cell.style.minHeight = "";
}
for (const row of table.tBodies) {
for (const tr of row.rows) {
for (const cell of tr.cells) {
const criticalCell = cell.querySelector(":scope > .critical-cell");
if (!criticalCell) {
continue;
}
criticalCell.style.minHeight = `${cell.clientHeight}px`;
}
}
}
}
}
};
window.addEventListener("resize", () => window.rolemasterTables.alignCriticalCells());