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

Improve critical table browsing UX

Browse Source
This commit is contained in:
Frank Tovar
2026-03-15 01:36:24 +01:00
parent e526b5238b
commit 7fcf1ef17d
4 changed files with 130 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/player_gm_ux_redesign_plan.md
View File

@@ -516,6 +516,10 @@ Acceptance criteria:
### Phase 2: Clean up critical table browsing
Status:
- implemented in the web app on March 15, 2026
Scope:
- reframe tables page around reading and selecting outcomes

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

@@ -9,31 +9,35 @@
<PageTitle>Critical Tables</PageTitle>
<section class="panel tables-page">
<div class="table-selector">
<label for="critical-table-select">Critical table</label>
<select
id="critical-table-select"
class="input-shell"
value="@selectedTableSlug"
@onchange="HandleTableChanged"
disabled="@IsTableSelectionDisabled">
@if (referenceData is null)
{
<option value="">Loading tables...</option>
}
else
{
@foreach (var table in referenceData.CriticalTables)
<div class="table-browser-toolbar">
<div class="table-selector">
<label for="critical-table-select">Table</label>
<select
id="critical-table-select"
class="input-shell"
value="@selectedTableSlug"
@onchange="HandleTableChanged"
disabled="@IsTableSelectionDisabled">
@if (referenceData is null)
{
<option value="@table.Key">@table.Label</option>
<option value="">Loading tables...</option>
}
}
</select>
else
{
@foreach (var table in referenceData.CriticalTables)
{
<option value="@table.Key">@table.Label</option>
}
}
</select>
</div>
<p class="table-browser-toolbar-copy">Choose a table, then read from the roll band on the left across to the result you need.</p>
</div>
@if (referenceData is null)
{
<p class="muted">Loading reference data...</p>
<p class="muted">Loading table list...</p>
}
else if (!referenceData.CriticalTables.Any())
{
@@ -53,9 +57,17 @@
}
else if (tableDetail is { } detail)
{
var readingHint = detail.Groups.Count > 0
? "Find the roll band on the left, then read across to the group and severity you need."
: "Find the roll band on the left, then read across to the severity you need.";
<div class="table-shell">
<header>
<h2 class="panel-title">@detail.DisplayName</h2>
<header class="table-browser-header">
<div>
<h2 class="panel-title">@detail.DisplayName</h2>
<p class="table-browser-reading-hint">@readingHint</p>
</div>
<p class="table-browser-edit-hint">Click any filled result to correct it.</p>
</header>
<div class="table-scroll">
@@ -168,7 +180,10 @@
@if (legendEntries.Count > 0)
{
<div class="critical-legend">
<h4>Affix legend</h4>
<div class="critical-legend-header">
<h4>Reading help</h4>
<p class="muted">These symbols show the effects attached to a result at a glance.</p>
</div>
<div class="legend-grid">
@foreach (var entry in legendEntries)
{

29
src/RolemasterDb.App/Components/Shared/CompactCriticalCell.razor
View File

@@ -7,22 +7,27 @@
<p class="critical-cell-description">@Description</p>
}
<AffixBadgeList Effects="Effects" />
@if (Branches?.Count > 0)
@if ((Effects?.Count ?? 0) > 0 || (Branches?.Count ?? 0) > 0)
{
<div class="critical-branch-stack">
@foreach (var branch in Branches)
<div class="critical-cell-footer">
<AffixBadgeList Effects="Effects" />
@if (Branches?.Count > 0)
{
<div class="critical-branch-card">
<span class="critical-branch-condition">
@branch.ConditionText
</span>
@if (!string.IsNullOrWhiteSpace(branch.Description))
<div class="critical-branch-stack">
@foreach (var branch in Branches)
{
<p class="critical-branch-description">@branch.Description</p>
<div class="critical-branch-card">
<span class="critical-branch-condition">
@branch.ConditionText
</span>
@if (!string.IsNullOrWhiteSpace(branch.Description))
{
<p class="critical-branch-description">@branch.Description</p>
}
<AffixBadgeList Effects="branch.Effects" />
</div>
}
<AffixBadgeList Effects="branch.Effects" />
</div>
}
</div>

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

@@ -269,19 +269,27 @@ textarea {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-height: 100%;
}
.critical-cell-footer {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.critical-cell-description {
margin: 0;
color: #2c1a10;
font-size: 1.2rem;
font-size: 1rem;
line-height: 1.4;
}
.critical-branch-stack {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-top: 0.65rem;
}
.critical-branch-card {
@@ -302,6 +310,7 @@ textarea {
.critical-branch-description {
margin: 0.3rem 0 0.45rem;
font-size: 0.85rem;
line-height: 1.35;
color: #3b2a21;
}
@@ -462,12 +471,24 @@ textarea {
gap: 1rem;
}
.table-browser-toolbar {
display: grid;
gap: 0.85rem;
}
.table-selector {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.table-browser-toolbar-copy,
.table-browser-reading-hint,
.table-browser-edit-hint {
margin: 0;
color: var(--ink-soft);
}
.table-shell {
border-radius: 20px;
padding: 1.2rem;
@@ -476,11 +497,20 @@ textarea {
box-shadow: 0 18px 30px rgba(41, 22, 11, 0.08);
}
.table-shell header {
.table-browser-header {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-bottom: 0.85rem;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.table-browser-reading-hint {
margin-top: 0.2rem;
}
.table-browser-edit-hint {
white-space: nowrap;
}
.table-shell .table-scroll {
@@ -490,13 +520,13 @@ textarea {
.critical-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
font-size: 0.8rem;
}
.critical-table th,
.critical-table td {
border: 1px solid rgba(127, 96, 55, 0.2);
padding: 0.45rem;
padding: 0.35rem;
vertical-align: top;
}
@@ -505,12 +535,13 @@ textarea {
text-transform: uppercase;
text-align: center;
vertical-align: middle;
letter-spacing: 0.08em;
}
.critical-table td {
background: rgba(255, 255, 255, 0.85);
min-width: 180px;
max-width: 260px;
min-width: 190px;
max-width: 250px;
padding: 0;
}
@@ -534,29 +565,37 @@ textarea {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.45rem;
padding: 0.55rem;
box-sizing: border-box;
}
.critical-table .roll-band-header {
width: 120px;
width: 96px;
background: rgba(255, 247, 230, 0.52);
font-size: 1.5rem;
font-size: 1rem;
text-align: center;
vertical-align: middle;
}
.critical-table thead th {
font-size: 1.5rem;
font-size: 0.9rem;
}
.critical-table td .affix-badge-list {
margin-top: auto;
.critical-table thead .roll-band-header {
font-size: 0.8rem;
}
.critical-table-cell.is-editable:hover .critical-cell-description,
.critical-table-cell.is-editable:focus-visible .critical-cell-description {
color: #8f5a2f;
}
.empty-cell {
color: #a08464;
font-style: italic;
display: block;
padding: 1rem 0.75rem;
text-align: center;
}
.critical-legend {
@@ -567,6 +606,15 @@ textarea {
border: 1px solid rgba(127, 96, 55, 0.2);
}
.critical-legend-header {
display: grid;
gap: 0.2rem;
}
.critical-legend-header h4 {
margin: 0;
}
.legend-grid {
display: grid;
gap: 0.65rem;
@@ -736,6 +784,14 @@ textarea {
width: 100%;
}
.table-browser-header {
flex-direction: column;
}
.table-browser-edit-hint {
white-space: normal;
}
.critical-editor-header,
.critical-editor-footer {
flex-direction: column;