nick/PlotDirector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve review page visual hierarchy

Browse Source
This commit is contained in:
Nick Beckley 2026-09-02 20:05:23 +00:00
parent 6263cf6b00
commit 2454e4a037
2 changed files with 101 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
PlotLine.Tests/Program.cs
View File

@ -797,6 +797,10 @@ static void StoryIntelligenceReviewCentreUsesIndependentTileGrid()
}
Assert(css.Contains(".story-review-centre-grid", StringComparison.Ordinal), "Review Centre grid CSS should exist.");
Assert(css.Contains(".story-review-centre-tile {\n min-height: 12rem;", StringComparison.Ordinal), "Review Centre should use dedicated review tiles.");
Assert(css.Contains("background: var(--plotline-panel, var(--bs-body-bg));", StringComparison.Ordinal), "Review Centre tiles should use theme-aware surfaces.");
Assert(css.Contains("[data-theme=\"dark\"] .story-review-centre-tile", StringComparison.Ordinal), "Review Centre tiles should have dark-theme surface protection.");
Assert(!css.Contains(".story-review-centre-tile {\n min-height: 12rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: .85rem;\n border: 1px solid rgba(31, 42, 68, .1);\n border-radius: 8px;\n padding: 1rem;\n background: rgba(255, 255, 255, .64);", StringComparison.Ordinal), "Review Centre tiles should not use hard-coded light slab backgrounds.");
Assert(css.Contains("grid-template-columns: repeat(3, minmax(0, 1fr))", StringComparison.Ordinal), "Desktop Review Centre should use three columns.");
Assert(css.Contains("@media (max-width: 980px)", StringComparison.Ordinal)
&& css.Contains("grid-template-columns: repeat(2, minmax(0, 1fr))", StringComparison.Ordinal), "Tablet Review Centre should use two columns.");
@ -952,7 +956,10 @@ static void StoryIntelligenceReviewModulePagesOmitWizardChrome()
var stylesheet = File.ReadAllText(Path.Combine(root, "wwwroot/css/onboarding.css"));
Assert(stylesheet.Contains(".story-review-card-header", StringComparison.Ordinal), "Shared review candidate header CSS should be present.");
Assert(stylesheet.Contains("justify-content: space-between;", StringComparison.Ordinal), "Review candidate headers should align title and status consistently.");
Assert(stylesheet.Contains("border-bottom: 1px solid rgba(31, 42, 68, .1);", StringComparison.Ordinal), "Review candidate headers should be visually separated from card bodies.");
Assert(stylesheet.Contains("border-bottom: 1px solid color-mix(in srgb, var(--plotline-accent", StringComparison.Ordinal), "Review candidate headers should be visually separated from card bodies.");
Assert(stylesheet.Contains("[data-theme=\"dark\"] .story-review-card-header", StringComparison.Ordinal), "Review candidate headers should have dark-theme contrast rules.");
Assert(stylesheet.Contains("[data-theme=\"dark\"] .story-review-note", StringComparison.Ordinal), "Nested evidence and context blocks should stay subordinate in dark theme.");
Assert(stylesheet.Contains(".story-character-card__body .form-select", StringComparison.Ordinal), "Review card form controls should use scoped theme-aware contrast.");
var knowledgeView = File.ReadAllText(Path.Combine(root, "Views/Onboarding/StoryIntelligenceKnowledge.cshtml"));
var relationshipsView = File.ReadAllText(Path.Combine(root, "Views/Onboarding/StoryIntelligenceRelationships.cshtml"));

123
PlotLine/wwwroot/css/onboarding.css
View File

@ -1392,21 +1392,33 @@ summary.story-review-chapter-heading {
.story-review-note {
margin: 0;
border-left: 4px solid rgba(47, 111, 99, .45);
border-radius: 8px;
padding: .8rem 1rem;
background: rgba(47, 111, 99, .07);
border: 1px solid color-mix(in srgb, var(--plotline-line, rgba(31, 42, 68, .12)) 72%, transparent);
border-left: 3px solid color-mix(in srgb, var(--plotline-accent, #2f6f63) 38%, var(--plotline-line, rgba(31, 42, 68, .12)));
border-radius: 6px;
padding: .65rem .8rem;
background: color-mix(in srgb, var(--plotline-panel, var(--bs-body-bg)) 92%, var(--plotline-accent, #2f6f63));
color: var(--bs-secondary-color);
}
.story-review-note strong {
display: block;
margin-bottom: .2rem;
color: var(--bs-body-color);
font-size: .84rem;
}
.story-review-note p {
margin-bottom: 0;
}
.story-review-note ul {
margin: .35rem 0 0;
margin: .25rem 0 0;
padding-left: 1.1rem;
}
.story-review-note--warning {
border-left-color: rgba(176, 58, 46, .5);
background: rgba(176, 58, 46, .07);
border-left-color: color-mix(in srgb, var(--plotline-danger, #b03a2e) 58%, var(--plotline-line, rgba(31, 42, 68, .12)));
background: color-mix(in srgb, var(--plotline-panel, var(--bs-body-bg)) 92%, var(--plotline-danger, #b03a2e));
}
.story-review-card-actions {
@ -1462,20 +1474,21 @@ summary.story-review-chapter-heading {
.story-character-card-grid,
.story-future-stage-grid {
display: grid;
gap: .75rem;
gap: 1rem;
}
.story-character-card {
border: 1px solid rgba(31, 42, 68, .1);
border: 1px solid color-mix(in srgb, var(--plotline-line, rgba(31, 42, 68, .12)) 82%, var(--plotline-accent, #2f6f63));
border-radius: 8px;
background: rgba(255, 255, 255, .64);
background: var(--plotline-panel, var(--bs-body-bg));
box-shadow: var(--plotline-shadow-subtle, 0 8px 20px rgba(31, 42, 68, .06));
overflow: hidden;
}
.story-review-card-header {
align-items: center;
background: rgba(47, 111, 99, .07);
border-bottom: 1px solid rgba(31, 42, 68, .1);
background: linear-gradient(180deg, color-mix(in srgb, var(--plotline-accent, #2f6f63) 18%, var(--plotline-panel, var(--bs-body-bg))), color-mix(in srgb, var(--plotline-accent, #2f6f63) 10%, var(--plotline-panel, var(--bs-body-bg))));
border-bottom: 1px solid color-mix(in srgb, var(--plotline-accent, #2f6f63) 34%, var(--plotline-line, rgba(31, 42, 68, .12)));
cursor: pointer;
display: flex;
flex-wrap: wrap;
@ -1491,8 +1504,9 @@ summary.story-review-chapter-heading {
}
.story-review-card-header strong {
color: var(--bs-body-color);
font-size: 1rem;
color: var(--plotline-ink, var(--bs-body-color));
font-size: 1.04rem;
font-weight: 800;
line-height: 1.25;
overflow-wrap: anywhere;
}
@ -1506,8 +1520,9 @@ summary.story-review-chapter-heading {
}
.story-review-card-header em {
color: var(--plotdirector-green, #2f6f63);
color: var(--plotline-accent-dark, #2f6f63);
flex: 0 0 auto;
font-weight: 800;
text-align: right;
}
@ -1539,9 +1554,11 @@ summary.story-review-chapter-heading {
display: flex;
flex-wrap: wrap;
gap: .75rem;
border: 0;
padding: 0;
margin: 0;
border: 1px solid color-mix(in srgb, var(--plotline-line, rgba(31, 42, 68, .12)) 75%, transparent);
border-radius: 6px;
padding: .7rem .8rem;
margin: .1rem 0 0;
background: color-mix(in srgb, var(--plotline-panel, var(--bs-body-bg)) 96%, var(--plotline-line, rgba(31, 42, 68, .12)));
}
.story-character-actions legend {
@ -1559,6 +1576,19 @@ summary.story-review-chapter-heading {
font-weight: 700;
}
.story-character-card__body .form-control,
.story-character-card__body .form-select {
background-color: var(--app-input-bg, var(--bs-body-bg));
border-color: color-mix(in srgb, var(--plotline-line, rgba(31, 42, 68, .12)) 86%, var(--plotline-ink, var(--bs-body-color)));
color: var(--app-input-text, var(--bs-body-color));
}
.story-character-card__body .form-control:focus,
.story-character-card__body .form-select:focus {
border-color: var(--plotline-accent, #2f6f63);
box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--plotline-accent, #2f6f63) 18%, transparent);
}
.story-future-stage-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 1rem 0;
@ -1621,24 +1651,28 @@ summary.story-review-chapter-heading {
flex-direction: column;
justify-content: space-between;
gap: .85rem;
border: 1px solid rgba(31, 42, 68, .1);
border: 1px solid color-mix(in srgb, var(--plotline-line, rgba(31, 42, 68, .12)) 82%, var(--plotline-accent, #2f6f63));
border-radius: 8px;
padding: 1rem;
background: rgba(255, 255, 255, .64);
background: var(--plotline-panel, var(--bs-body-bg));
box-shadow: var(--plotline-shadow-subtle, 0 8px 20px rgba(31, 42, 68, .06));
}
.story-review-centre-tile--primary {
border-color: rgba(122, 74, 39, .32);
box-shadow: 0 10px 24px rgba(122, 74, 39, .08);
border-color: color-mix(in srgb, var(--plotline-accent, #7a4a27) 46%, var(--plotline-line, rgba(31, 42, 68, .12)));
box-shadow: 0 10px 24px color-mix(in srgb, var(--plotline-accent, #7a4a27) 16%, transparent);
}
.story-review-centre-tile--locked {
background: rgba(255, 255, 255, .46);
background: color-mix(in srgb, var(--plotline-panel, var(--bs-body-bg)) 88%, var(--plotline-line, rgba(31, 42, 68, .12)));
}
.story-review-centre-tile h2 {
margin: 0;
font-size: 1.05rem;
color: var(--plotline-ink, var(--bs-body-color));
font-size: 1.08rem;
font-weight: 800;
line-height: 1.25;
}
.story-review-centre-tile p {
@ -1649,16 +1683,16 @@ summary.story-review-chapter-heading {
.story-review-centre-tile__status {
display: block;
font-weight: 700;
color: var(--bs-body-color);
font-weight: 800;
color: var(--plotline-ink, var(--bs-body-color));
}
.story-review-centre-tile__status--ready {
color: #146c43;
color: var(--plotline-success, #146c43);
}
.story-review-centre-tile__status--warning {
color: #7a4a27;
color: var(--plotline-warning, #7a4a27);
}
.story-review-centre-tile__status--locked {
@ -1672,14 +1706,43 @@ summary.story-review-chapter-heading {
.story-review-centre-tile .btn.disabled {
pointer-events: none;
color: var(--bs-secondary-color);
border-color: rgba(31, 42, 68, .16);
background: rgba(31, 42, 68, .04);
border-color: color-mix(in srgb, var(--plotline-line, rgba(31, 42, 68, .12)) 80%, transparent);
background: color-mix(in srgb, var(--plotline-panel, var(--bs-body-bg)) 94%, var(--plotline-line, rgba(31, 42, 68, .12)));
}
.story-review-centre-actions {
justify-content: flex-start;
}
[data-theme="dark"] .story-character-card,
[data-theme="dark"] .story-review-centre-tile {
background: var(--plotline-surface-elevated, #2a231e);
border-color: color-mix(in srgb, var(--plotline-border-soft, rgba(231, 214, 190, .16)) 82%, var(--plotline-accent, #d49a62));
}
[data-theme="dark"] .story-review-card-header {
background: linear-gradient(180deg, color-mix(in srgb, var(--plotline-accent, #d49a62) 24%, var(--plotline-surface-elevated, #2a231e)), color-mix(in srgb, var(--plotline-accent, #d49a62) 14%, var(--plotline-surface-elevated, #2a231e)));
border-bottom-color: color-mix(in srgb, var(--plotline-accent, #d49a62) 46%, var(--plotline-border-soft, rgba(231, 214, 190, .16)));
}
[data-theme="dark"] .story-review-note,
[data-theme="dark"] .story-character-actions,
[data-theme="dark"] .story-review-centre-tile .btn.disabled {
background: color-mix(in srgb, var(--plotline-surface-elevated, #2a231e) 92%, var(--plotline-bg, #14110f));
border-color: color-mix(in srgb, var(--plotline-border-soft, rgba(231, 214, 190, .16)) 78%, transparent);
}
[data-theme="dark"] .story-review-note {
border-left-color: color-mix(in srgb, var(--plotline-accent, #d49a62) 48%, var(--plotline-border-soft, rgba(231, 214, 190, .16)));
}
[data-theme="dark"] .story-character-card__body .form-control,
[data-theme="dark"] .story-character-card__body .form-select {
background-color: var(--app-input-bg, #211b17);
border-color: color-mix(in srgb, var(--plotline-border-soft, rgba(231, 214, 190, .16)) 84%, var(--plotline-text-muted, #b9aa99));
color: var(--app-input-text, #f4eadc);
}
.story-scene-preview-list {
display: grid;
gap: .65rem;