diff options
Diffstat (limited to 'plugins/base/src/main/resources')
| -rw-r--r-- | plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js | 28 | ||||
| -rw-r--r-- | plugins/base/src/main/resources/dokka/styles/style.css | 103 |
2 files changed, 102 insertions, 29 deletions
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; |