Measure critical cell heights for badge alignment
This commit is contained in:
@@ -20,6 +20,7 @@
|
||||
<body>
|
||||
<Routes />
|
||||
<ReconnectModal />
|
||||
<script src="@Assets["tables.js"]"></script>
|
||||
<script src="@Assets["_framework/blazor.web.js"]"></script>
|
||||
</body>
|
||||
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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;
|
||||
|
||||
26
src/RolemasterDb.App/wwwroot/tables.js
Normal file
26
src/RolemasterDb.App/wwwroot/tables.js
Normal 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());
|
||||
Reference in New Issue
Block a user