Measure critical cell heights for badge alignment

This commit is contained in:
2026-03-14 13:55:05 +01:00
parent d9219ece0b
commit 9f1b39d83a
4 changed files with 46 additions and 7 deletions

View File

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

View File

@@ -3,6 +3,7 @@
@using System
@using System.Collections.Generic
@using System.Diagnostics.CodeAnalysis
@inject IJSRuntime JSRuntime
@inject LookupService LookupService
<PageTitle>Critical Tables</PageTitle>
@@ -175,6 +176,8 @@
private bool isReferenceDataLoading = true;
private string? detailError;
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;
protected override async Task OnInitializedAsync()
@@ -198,6 +201,7 @@
{
tableDetail = null;
cellIndex = null;
tableLayoutVersion++;
return;
}
@@ -222,9 +226,21 @@
{
isDetailLoading = false;
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()
{
if (tableDetail?.Cells is null)

View File

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

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());