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

PlotDirector Phase 18B Follow-up - Fix Metrics Bars and Avatar Initial Alignment

Browse Source
This commit is contained in:
Nick Beckley 2026-06-30 20:25:04 +01:00
parent e761e42ff7
commit 4fca39a0ff
3 changed files with 52 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
PlotLine/Views/Shared/SceneInspectorV2/_SceneStoryCard.cshtml
View File

@ -63,13 +63,23 @@
<div class="scene-inspector-v2-metrics"> <div class="scene-inspector-v2-metrics">
@foreach (var metric in Model.Metrics) @foreach (var metric in Model.Metrics)
{ {
var range = Math.Max(1, metric.MaxValue - metric.MinValue); var effectiveMin = metric.MaxValue > metric.MinValue ? metric.MinValue : 0;
var clampedValue = Math.Min(metric.MaxValue, Math.Max(metric.MinValue, metric.Value)); var effectiveMax = metric.MaxValue > metric.MinValue ? metric.MaxValue : 10;
var percent = (int)Math.Round(((double)(clampedValue - metric.MinValue) / range) * 100); var clampedValue = Math.Min(effectiveMax, Math.Max(effectiveMin, metric.Value));
<div class="scene-inspector-v2-metric-bar" style="--metric-percent: @percent%;" aria-label="@metric.MetricName value @metric.Value of @metric.MaxValue"> var percent = effectiveMax == 0 ? 0 : (int)Math.Round(((double)clampedValue / effectiveMax) * 100);
<span>@metric.MetricName</span> <div class="scene-inspector-v2-metric-bar" style="--metric-percent: @percent%;">
<div aria-hidden="true"><i></i></div> <div class="scene-inspector-v2-metric-bar-heading">
<strong>@metric.Value</strong> <span>@metric.MetricName</span>
<strong>@metric.Value</strong>
</div>
<div class="scene-inspector-v2-metric-track"
role="progressbar"
aria-label="@metric.MetricName"
aria-valuemin="@effectiveMin"
aria-valuemax="@effectiveMax"
aria-valuenow="@clampedValue">
<i></i>
</div>
</div> </div>
} }
</div> </div>

57
PlotLine/wwwroot/css/site.css
View File

@ -4694,8 +4694,8 @@ body.dragging-location [data-drag-type="location"] {
gap: 8px; gap: 8px;
} }
.scene-inspector-v2-metrics div, .scene-inspector-v2-metrics > div,
.scene-inspector-v2-counts div { .scene-inspector-v2-counts > div {
min-width: 0; min-width: 0;
border: 1px solid rgba(47, 111, 99, 0.12); border: 1px solid rgba(47, 111, 99, 0.12);
border-radius: 8px; border-radius: 8px;
@ -4703,8 +4703,8 @@ body.dragging-location [data-drag-type="location"] {
padding: 9px 10px; padding: 9px 10px;
} }
.scene-inspector-v2-edit .scene-inspector-v2-metrics div, .scene-inspector-v2-edit .scene-inspector-v2-metrics > div,
.scene-inspector-v2-edit .scene-inspector-v2-counts div { .scene-inspector-v2-edit .scene-inspector-v2-counts > div {
padding: 7px 8px; padding: 7px 8px;
} }
@ -4795,6 +4795,15 @@ body.dragging-location [data-drag-type="location"] {
width: 34px; width: 34px;
} }
.scene-inspector-v2-character-list .visual-avatar > span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
line-height: 1;
}
.scene-inspector-v2-avatar-pov { .scene-inspector-v2-avatar-pov {
box-shadow: 0 0 0 2px rgba(47, 111, 99, 0.24); box-shadow: 0 0 0 2px rgba(47, 111, 99, 0.24);
} }
@ -4911,28 +4920,34 @@ body.dragging-location [data-drag-type="location"] {
.scene-inspector-v2-metric-bar { .scene-inspector-v2-metric-bar {
display: grid; display: grid;
grid-template-rows: auto 42px auto;
align-items: end;
gap: 6px; gap: 6px;
text-align: center;
} }
.scene-inspector-v2-metric-bar div { .scene-inspector-v2-metric-bar-heading {
display: flex; display: flex;
align-items: end; align-items: baseline;
justify-content: center; justify-content: space-between;
min-height: 42px; gap: 8px;
}
.scene-inspector-v2-metric-track {
display: flex;
align-items: stretch;
width: 100%;
height: 8px;
overflow: hidden;
border: 0; border: 0;
background: transparent; border-radius: 999px;
background: rgba(47, 111, 99, 0.12);
padding: 0; padding: 0;
} }
.scene-inspector-v2-metric-bar i { .scene-inspector-v2-metric-track i {
display: block; display: block;
width: 22px; width: var(--metric-percent);
height: max(6px, var(--metric-percent)); min-width: 4px;
border-radius: 6px 6px 2px 2px; border-radius: inherit;
background: linear-gradient(180deg, #6fa99b, var(--plotline-accent-dark)); background: linear-gradient(90deg, #6fa99b, var(--plotline-accent-dark));
} }
.scene-inspector-v2-callout { .scene-inspector-v2-callout {
@ -5578,12 +5593,8 @@ body.scene-inspector-editor-resizing {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
} }
.scene-inspector-v2-timeline .scene-inspector-v2-metric-bar { .scene-inspector-v2-timeline .scene-inspector-v2-metric-track {
grid-template-rows: auto 34px auto; height: 7px;
}
.scene-inspector-v2-timeline .scene-inspector-v2-metric-bar div {
min-height: 34px;
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {

2
PlotLine/wwwroot/css/site.min.css vendored
View File

File diff suppressed because one or more lines are too long