diff options
Diffstat (limited to 'plugins/base/src/main')
4 files changed, 124 insertions, 46 deletions
diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt index 05eda494..615bbfc3 100644 --- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt +++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt @@ -99,8 +99,7 @@ open class HtmlRenderer( node.hasStyle(TextStyle.Span) -> span() { childrenCallback() } node.dci.kind == ContentKind.Symbol -> div("symbol $additionalClasses") { childrenCallback() } node.dci.kind == ContentKind.BriefComment -> div("brief $additionalClasses") { childrenCallback() } - node.dci.kind == ContentKind.Cover -> div("cover $additionalClasses") { - filterButtons(pageContext) + node.dci.kind == ContentKind.Cover -> div("cover $additionalClasses") { //TODO this can be removed childrenCallback() } node.hasStyle(TextStyle.Paragraph) -> p(additionalClasses) { childrenCallback() } @@ -110,8 +109,8 @@ open class HtmlRenderer( } } - private fun FlowContent.filterButtons(page: ContentPage) { - if (shouldRenderSourceSetBubbles) { + private fun FlowContent.filterButtons(page: PageNode) { + if (shouldRenderSourceSetBubbles && page is ContentPage) { div(classes = "filter-section") { id = "filter-section" page.content.withDescendants().flatMap { it.sourceSets }.distinct().forEach { @@ -584,13 +583,22 @@ open class HtmlRenderer( override fun FlowContent.buildNavigation(page: PageNode) = - div(classes = "breadcrumbs") { - val path = locationProvider.ancestors(page).filterNot { it is RendererSpecificPage }.asReversed() - if (path.isNotEmpty()) { - buildNavigationElement(path.first(), page) - path.drop(1).forEach { node -> - text("/") - buildNavigationElement(node, page) + div("navigation-wrapper") { + id = "navigation-wrapper" + div(classes = "breadcrumbs") { + val path = locationProvider.ancestors(page).filterNot { it is RendererSpecificPage }.asReversed() + if (path.isNotEmpty()) { + buildNavigationElement(path.first(), page) + path.drop(1).forEach { node -> + text("/") + buildNavigationElement(node, page) + } + } + } + div("pull-right d-flex") { + filterButtons(page) + div { + id = "searchBar" } } } @@ -706,7 +714,7 @@ open class HtmlRenderer( override fun buildPage(page: ContentPage, content: (FlowContent, ContentPage) -> Unit): String = buildHtml(page, page.embeddedResources) { - div { + div("main-content") { id = "content" attributes["pageIds"] = page.pageId content(this, page) @@ -762,15 +770,12 @@ open class HtmlRenderer( id = "leftToggler" span("icon-toggler") } - div { - id = "searchBar" - } script(type = ScriptType.textJavaScript, src = page.root("scripts/pages.js")) {} script(type = ScriptType.textJavaScript, src = page.root("scripts/main.js")) {} content() div(classes = "footer") { span("go-to-top-icon") { - a(href = "#container") + a(href = "#content") } span { text("© 2020 Copyright") } span("pull-right") { diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt index 93fe8221..8e31fbc6 100644 --- a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt +++ b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt @@ -85,7 +85,7 @@ object ScriptsInstaller : PageTransformer { "scripts/clipboard.js", "scripts/navigation-loader.js", "scripts/platform-content-handler.js", - "scripts/main.js" + "scripts/main.js", ) override fun invoke(input: RootPageNode): RootPageNode { diff --git a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js index 26dd9424..07a6642b 100644 --- a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js +++ b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js @@ -4,6 +4,8 @@ filteringContext = { activeFilters: [] } let highlightedAnchor; +let topNavbarOffset; +var scrollNavbarBreakPoint = 300 window.addEventListener('load', () => { document.querySelectorAll("div[data-platform-hinted]") @@ -18,6 +20,13 @@ window.addEventListener('load', () => { initTabs() handleAnchor() initHidingLeftNavigation() + + document.getElementById('main').addEventListener("scroll", (e) => { + const element = document.getElementsByClassName("navigation-wrapper")[0] + const additionalOffset = element.classList.contains("sticky-navigation") ? 14 : 0 + element.classList.toggle("sticky-navigation", e.target.scrollTop + additionalOffset > scrollNavbarBreakPoint) + }) + topNavbarOffset = document.getElementById('navigation-wrapper') }) const initHidingLeftNavigation = () => { @@ -64,7 +73,24 @@ function handleAnchor() { content.classList.add('anchor-highlight') highlightedAnchor = content } - element.scrollIntoView({behavior: "smooth"}) + + const scrollToElement = () => document.getElementById('main').scrollTo({ top: element.offsetTop - topNavbarOffset.offsetHeight, behavior: "smooth"}) + + const waitAndScroll = () => { + setTimeout(() => { + if(topNavbarOffset){ + scrollToElement() + } else { + waitForScroll() + } + }, 100) + } + + if(topNavbarOffset){ + scrollToElement() + } else { + waitAndScroll() + } } } } diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css index 5e505f33..9e843fe1 100644 --- a/plugins/base/src/main/resources/dokka/styles/style.css +++ b/plugins/base/src/main/resources/dokka/styles/style.css @@ -11,16 +11,68 @@ --horizontal-spacing-for-content: 42px; --mobile-horizontal-spacing-for-content: 8px; --bottom-spacing: 16px; + --color-scrollbar: rgba(39, 40, 44, 0.40); + --color-scrollbar-track: #f4f4f4; } -#content { - padding: 0 var(--horizontal-spacing-for-content) var(--bottom-spacing) var(--horizontal-spacing-for-content); +html { + height: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + scrollbar-color: rgba(39, 40, 44, 0.40) #F4F4F4; + scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track); } -.breadcrumbs { +html ::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +html ::-webkit-scrollbar-track { + background-color: var(--color-scrollbar-track); +} + +html ::-webkit-scrollbar-thumb { + width: 8px; + border-radius: 6px; + background: rgba(39, 40, 44, 0.40); + background: var(--color-scrollbar); +} + + +.main-content { + padding-bottom: var(--bottom-spacing); + z-index: 0; +} + +.main-content>* { + margin-left: var(--horizontal-spacing-for-content); + margin-right: var(--horizontal-spacing-for-content); +} + +.navigation-wrapper { + display: flex; padding: 24px 0; + flex-wrap: wrap; +} + +.navigation-wrapper.sticky-navigation { + position: sticky; + top: 0; + background-color: #f4f4f4; + border-bottom: 1px solid #DADFE6; + padding-top: 19px; + padding-bottom: 18px; + z-index: 8; + + /* Reset margin and use padding for border */ + margin-left: 0; + margin-right: 0; + padding-left: var(--horizontal-spacing-for-content); + padding-right: var(--horizontal-spacing-for-content); +} + +.breadcrumbs { color: var(--breadcrumb-font-color); - max-width: calc(100% - 32px); overflow-wrap: break-word; } @@ -93,7 +145,6 @@ .cover { display: flex; flex-direction: column; - width: 100%; } .cover .platform-hinted .sourceset-depenent-content > .symbol, @@ -145,10 +196,6 @@ border-bottom: 2px solid white; } -.title { - overflow-x: auto; -} - .title > .divergent-group:first-of-type { padding-top: 0; } @@ -157,6 +204,7 @@ display: flex; flex-direction: row; min-height: 100%; + height: 100%; } #main { @@ -164,6 +212,8 @@ max-width: calc(100% - 280px); display: flex; flex-direction: column; + height: auto; + overflow: auto; } #leftColumn { @@ -177,6 +227,8 @@ padding-top: 16px; position: relative; max-height: calc(100% - 140px); + height: 100%; + overflow-y: auto; } #sideMenu img { @@ -187,10 +239,6 @@ background: #DADFE6; } -#searchBar { - float: right; -} - #logo { background-size: 125px 26px; border-bottom: 1px solid #DADFE6; @@ -464,9 +512,6 @@ h1.cover { line-height: 64px; letter-spacing: -1.5px; - margin-left: calc(-1 * var(--horizontal-spacing-for-content)); - margin-right: calc(-1 * var(--horizontal-spacing-for-content)); - padding-left: var(--horizontal-spacing-for-content); border-bottom: 1px solid #DADFE6; margin-bottom: 0; @@ -720,11 +765,7 @@ footer { flex-direction: row; align-self: flex-end; min-height: 30px; - position: absolute; - top: 20px; - right: 88px; z-index: 0; - flex-wrap: wrap; } .platform-selector:hover { @@ -1039,7 +1080,7 @@ td.content { display: flex; align-items: center; position: relative; - height: var(--footer-height); + min-height: var(--footer-height); border-top: 1px solid #DADFE6; font-size: 12px; line-height: 16px; @@ -1105,11 +1146,11 @@ div.runnablesample { padding: 0; } +.d-flex { + display: flex; +} + @media screen and (max-width: 1119px) { - /* TODO this feels wrong as only is an aproximation of correct solution*/ - .filter-section { - position: unset; - } h1.cover { font-size: 48px; line-height: 48px; @@ -1166,10 +1207,16 @@ div.runnablesample { padding-right: 0.5em; margin-left: -0.5em; } - #content { - padding: var(--mobile-horizontal-spacing-for-content); - padding-top: 0; + .main-content > * { + margin-left: var(--mobile-horizontal-spacing-for-content); + margin-right: var(--mobile-horizontal-spacing-for-content); } + + .navigation-wrapper.sticky-navigation { + padding-left: var(--mobile-horizontal-spacing-for-content); + padding-right: var(--mobile-horizontal-spacing-for-content); + } + #sideMenu { padding-bottom: 16px; overflow: auto; |