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

PlotDirector Phase 17B Follow-up - Scene/Edit Focused Editor Flyout Layout

Browse Source
This commit is contained in:
Nick Beckley 2026-06-30 13:09:53 +01:00
parent 4ae45ab8f9
commit 26846f57e7
4 changed files with 122 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
PlotLine/Views/Shared/SceneInspectorV2/_SceneInspectorEditPage.cshtml
View File

@ -1,16 +1,19 @@
@model SceneEditViewModel
<div class="scene-inspector-v2 scene-inspector-v2-edit" data-scene-inspector-v2 data-scene-id="@Model.SceneID">
<partial name="~/Views/Shared/SceneInspectorV2/_SceneInspectorHealthStrip.cshtml" model="Model" />
<div class="scene-inspector-v2-summary-pane">
<partial name="~/Views/Shared/SceneInspectorV2/_SceneInspectorHealthStrip.cshtml" model="Model" />
<div class="scene-inspector-v2-grid">
<partial name="~/Views/Shared/SceneInspectorV2/_SceneOverviewCard.cshtml" model="Model" />
<partial name="~/Views/Shared/SceneInspectorV2/_SceneStoryCard.cshtml" model="Model" />
<partial name="~/Views/Shared/SceneInspectorV2/_ScenePeopleCard.cshtml" model="Model" />
<partial name="~/Views/Shared/SceneInspectorV2/_SceneWorldCard.cshtml" model="Model" />
<partial name="~/Views/Shared/SceneInspectorV2/_SceneWriterCard.cshtml" model="Model" />
<partial name="~/Views/Shared/SceneInspectorV2/_SceneContinuityCard.cshtml" model="Model" />
<div class="scene-inspector-v2-grid">
<partial name="~/Views/Shared/SceneInspectorV2/_SceneOverviewCard.cshtml" model="Model" />
<partial name="~/Views/Shared/SceneInspectorV2/_SceneStoryCard.cshtml" model="Model" />
<partial name="~/Views/Shared/SceneInspectorV2/_ScenePeopleCard.cshtml" model="Model" />
<partial name="~/Views/Shared/SceneInspectorV2/_SceneWorldCard.cshtml" model="Model" />
<partial name="~/Views/Shared/SceneInspectorV2/_SceneWriterCard.cshtml" model="Model" />
<partial name="~/Views/Shared/SceneInspectorV2/_SceneContinuityCard.cshtml" model="Model" />
</div>
</div>
<div class="scene-inspector-editor-resizer" data-scene-editor-resizer role="separator" aria-orientation="vertical" aria-label="Resize focused editor"></div>
<partial name="~/Views/Shared/SceneInspectorV2/_SceneInspectorEditorHost.cshtml" />
</div>

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

@ -4646,9 +4646,31 @@ body.dragging-location [data-drag-type="location"] {
}
.scene-inspector-v2-edit {
--scene-editor-width: 480px;
padding-bottom: 24px;
}
.scene-inspector-v2-edit.editor-overlay-open {
display: grid;
grid-template-columns: minmax(0, 1fr) 10px minmax(360px, min(var(--scene-editor-width), 50%));
align-items: stretch;
gap: 12px;
height: clamp(420px, calc(100vh - 280px), 760px);
min-height: 0;
}
.scene-inspector-v2-summary-pane {
display: grid;
gap: 14px;
min-width: 0;
}
.scene-inspector-v2-edit.editor-overlay-open .scene-inspector-v2-summary-pane {
min-height: 0;
overflow: auto;
padding-right: 2px;
}
.scene-inspector-v2-timeline {
min-height: 100%;
}
@ -4865,9 +4887,46 @@ body.dragging-location [data-drag-type="location"] {
}
.scene-inspector-v2-edit .scene-inspector-editor-overlay {
position: fixed;
inset: 96px 24px 24px;
z-index: 1030;
position: static;
inset: auto;
z-index: 1;
min-width: 0;
height: 100%;
max-height: none;
}
.scene-inspector-editor-resizer {
display: none;
}
.scene-inspector-v2-edit.editor-overlay-open .scene-inspector-editor-resizer {
display: block;
align-self: stretch;
min-height: 100%;
border-radius: 999px;
cursor: col-resize;
background: linear-gradient(180deg, rgba(47, 111, 99, 0.16), rgba(47, 111, 99, 0.04));
}
.scene-inspector-v2-edit.editor-overlay-open .scene-inspector-editor-resizer::before {
content: "";
display: block;
width: 2px;
height: 48px;
margin: 18px auto;
border-radius: 999px;
background: var(--plotline-accent);
opacity: 0.55;
}
.scene-inspector-v2-edit.editor-overlay-open .scene-inspector-editor-resizer:focus-visible,
.scene-inspector-v2-edit.editor-overlay-open .scene-inspector-editor-resizer:hover {
background: rgba(47, 111, 99, 0.16);
}
body.scene-inspector-editor-resizing {
cursor: col-resize;
user-select: none;
}
.scene-inspector-editor-shell {
@ -5051,6 +5110,10 @@ body.dragging-location [data-drag-type="location"] {
}
@media (max-width: 1100px) {
.scene-inspector-v2-edit.editor-overlay-open {
grid-template-columns: minmax(0, 1fr) 10px minmax(360px, min(var(--scene-editor-width), 52%));
}
.scene-inspector-v2-grid,
.scene-inspector-v2-health {
grid-template-columns: repeat(2, minmax(0, 1fr));

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

File diff suppressed because one or more lines are too long

44
PlotLine/wwwroot/js/scene-inspector-v2.js
View File

@ -123,6 +123,20 @@
}
}
function editorWidthBounds(root) {
const rootWidth = root.getBoundingClientRect().width || 960;
return {
min: Math.min(360, Math.max(280, rootWidth - 420)),
max: Math.max(360, rootWidth * 0.5)
};
}
function setEditEditorWidth(root, width) {
const bounds = editorWidthBounds(root);
const nextWidth = Math.min(bounds.max, Math.max(bounds.min, width));
root.style.setProperty("--scene-editor-width", `${Math.round(nextWidth)}px`);
}
document.addEventListener("click", async event => {
const openButton = event.target.closest("[data-scene-editor]");
if (openButton) {
@ -228,4 +242,34 @@
}
}
});
document.addEventListener("pointerdown", event => {
const resizer = event.target.closest("[data-scene-editor-resizer]");
if (!resizer) {
return;
}
const root = resizer.closest(".scene-inspector-v2-edit");
if (!root) {
return;
}
event.preventDefault();
document.body.classList.add("scene-inspector-editor-resizing");
resizer.setPointerCapture?.(event.pointerId);
const onMove = moveEvent => {
const rect = root.getBoundingClientRect();
setEditEditorWidth(root, rect.right - moveEvent.clientX);
};
const onUp = () => {
document.body.classList.remove("scene-inspector-editor-resizing");
document.removeEventListener("pointermove", onMove);
document.removeEventListener("pointerup", onUp);
};
document.addEventListener("pointermove", onMove);
document.addEventListener("pointerup", onUp);
});
})();