SergeychWorks/lyng
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases 17 Wiki Activity

site: fixed scrolling overly high contents table in docs viewer

Browse Source
This commit is contained in:
Sergey Chernov 2026-01-04 23:01:11 +01:00
parent f5a3fbe9a3
commit 5f1e6564d5
2 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
site/src/jsMain/kotlin/App.kt
View File

@ -28,6 +28,7 @@ fun App() {
var toc by remember { mutableStateOf<List<TocItem>>(emptyList()) } var toc by remember { mutableStateOf<List<TocItem>>(emptyList()) }
var activeTocId by remember { mutableStateOf<String?>(null) } var activeTocId by remember { mutableStateOf<String?>(null) }
var contentEl by remember { mutableStateOf<HTMLElement?>(null) } var contentEl by remember { mutableStateOf<HTMLElement?>(null) }
var navEl by remember { mutableStateOf<HTMLElement?>(null) }
val isDocsRoute = route.startsWith("docs/") val isDocsRoute = route.startsWith("docs/")
val docKey = stripFragment(route) val docKey = stripFragment(route)
@ -60,6 +61,13 @@ fun App() {
onDispose { window.removeEventListener("hashchange", listener) } onDispose { window.removeEventListener("hashchange", listener) }
} }
LaunchedEffect(activeTocId) {
val activeId = activeTocId ?: return@LaunchedEffect
val nav = navEl ?: return@LaunchedEffect
val activeLink = nav.querySelector("a[data-toc-id=\"$activeId\"]") as? HTMLElement
activeLink?.scrollIntoView(js("({block: 'nearest', behavior: 'smooth'})"))
}
PageTemplate(title = when { PageTemplate(title = when {
isDocsRoute -> null isDocsRoute -> null
route.startsWith("reference") -> "Reference" route.startsWith("reference") -> "Reference"
@ -71,7 +79,11 @@ fun App() {
Div({ classes("col-12", "col-lg-3") }) { Div({ classes("col-12", "col-lg-3") }) {
Nav({ Nav({
classes("position-sticky") classes("position-sticky")
attr("style", "top: calc(var(--navbar-offset) + 1rem)") attr("style", "top: calc(var(--navbar-offset) + 1rem); max-height: calc(100vh - var(--navbar-offset) - 2rem); overflow-y: auto;")
ref {
navEl = it
onDispose { navEl = null }
}
}) { }) {
H2({ classes("h6", "text-uppercase", "text-muted") }) { Text("On this page") } H2({ classes("h6", "text-uppercase", "text-muted") }) { Text("On this page") }
Ul({ classes("list-unstyled") }) { Ul({ classes("list-unstyled") }) {
@ -82,6 +94,7 @@ fun App() {
val tocHref = "#/$routeNoFrag#${item.id}" val tocHref = "#/$routeNoFrag#${item.id}"
A(attrs = { A(attrs = {
attr("href", tocHref) attr("href", tocHref)
attr("data-toc-id", item.id)
attr("style", "padding-left: $pad") attr("style", "padding-left: $pad")
classes("link-body-emphasis", "text-decoration-none") classes("link-body-emphasis", "text-decoration-none")
if (activeTocId == item.id) { if (activeTocId == item.id) {

11
site/src/jsMain/kotlin/Main.kt
View File

@ -180,6 +180,17 @@ fun ensureDocsLayoutStyles() {
.markdown-body h1:first-child { .markdown-body h1:first-child {
margin-top: 0 !important; margin-top: 0 !important;
} }
/* Hide scrollbar for the TOC nav but allow scrolling */
nav.position-sticky::-webkit-scrollbar {
width: 4px;
}
nav.position-sticky::-webkit-scrollbar-thumb {
background: rgba(128,128,128,0.2);
border-radius: 4px;
}
nav.position-sticky:hover::-webkit-scrollbar-thumb {
background: rgba(128,128,128,0.5);
}
""" """
.trimIndent() .trimIndent()
) )