Storyline: unfoldable section list per chapter in the sidebar
Each chapter in the right-hand menu gets a caret that unfolds its numbered sections (e.g. the prologue's 28 scenes); clicking one jumps straight to it. The chapter you're reading starts unfolded, other chapters' sections link across (/storyline/overview#section-…), and the section at the top of the pane is highlighted as you scroll. - ChapterOutline service parses each rendered chapter for its <h2 class="storyline-section"> headings, adds anchor ids and returns the outline; the controller renders all chapters once to feed the sidebar. - storyline-toc Stimulus controller: fold/unfold, in-pane jump, scroll-spy (works in the split view and in the small-screen window-scroll fallback). - Tests for the outline parser. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -260,6 +260,49 @@ table.dataTable {
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
/* Unfoldable per-chapter section lists */
|
||||
.storyline-toc-row { display: flex; align-items: flex-start; gap: 0.15rem; }
|
||||
.storyline-toc-row .storyline-toc-link { flex: 1 1 auto; min-width: 0; }
|
||||
.storyline-toc-fold {
|
||||
flex: 0 0 1.4rem;
|
||||
height: 1.9rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--bs-secondary-color);
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
button.storyline-toc-fold:hover { color: var(--bs-body-color); }
|
||||
.storyline-toc-item.is-open > .storyline-toc-row > button.storyline-toc-fold { transform: rotate(90deg); }
|
||||
.storyline-toc-sections {
|
||||
display: none;
|
||||
margin: 0.1rem 0 0.4rem 1.4rem;
|
||||
padding: 0;
|
||||
max-height: 45vh;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.storyline-toc-sections::-webkit-scrollbar { display: none; }
|
||||
.storyline-toc-item.is-open > .storyline-toc-sections { display: block; }
|
||||
.storyline-toc-sub {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-left: 2px solid var(--bs-border-color);
|
||||
text-decoration: none;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
.storyline-toc-sub:hover { color: var(--bs-body-color); background: var(--bs-tertiary-bg); }
|
||||
.storyline-toc-sub.is-current {
|
||||
color: var(--bs-body-color);
|
||||
border-left-color: var(--bs-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
.storyline-toc-sub .storyline-toc-num { flex: 0 0 1.4rem; }
|
||||
.storyline-section { scroll-margin-top: 0.75rem; }
|
||||
|
||||
/* --- Storyline: the document itself --------------------------------- */
|
||||
.storyline-doc {
|
||||
max-width: 46rem;
|
||||
|
||||
Reference in New Issue
Block a user