diff options
| author | Błażej Kardyś <bkardys@virtuslab.com> | 2020-09-01 16:07:45 +0200 |
|---|---|---|
| committer | Paweł Marks <Kordyjan@users.noreply.github.com> | 2020-09-10 10:37:56 +0200 |
| commit | 34dcd02073128ff8a6b924f82ffb5929fcd405d3 (patch) | |
| tree | 6fba43c0c302f5fbe21a37db775d6935e9971196 | |
| parent | 34971f2a2f6e243627c095f9ce0bae29afb74299 (diff) | |
| download | dokka-34dcd02073128ff8a6b924f82ffb5929fcd405d3.tar.gz dokka-34dcd02073128ff8a6b924f82ffb5929fcd405d3.tar.bz2 dokka-34dcd02073128ff8a6b924f82ffb5929fcd405d3.zip | |
Adding mobile-friendly layout
3 files changed, 54 insertions, 0 deletions
diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt index 48aa56fb..93a20157 100644 --- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt +++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt @@ -703,6 +703,10 @@ open class HtmlRenderer( div { id = "main" div { + id = "leftToggler" + span("icon-toggler") + } + div { id = "searchBar" } script(type = ScriptType.textJavaScript, src = page.root("scripts/pages.js")) {} diff --git a/plugins/base/src/main/resources/dokka/scripts/scripts.js b/plugins/base/src/main/resources/dokka/scripts/scripts.js index c2e29b9f..85dfd86f 100644 --- a/plugins/base/src/main/resources/dokka/scripts/scripts.js +++ b/plugins/base/src/main/resources/dokka/scripts/scripts.js @@ -8,4 +8,10 @@ document.getElementById("navigationFilter").oninput = function (e) { part.classList.add("filtered"); } } +} + +window.addEventListener("DOMContentLoaded", () => { + document.getElementById("leftToggler").onclick = function() { + document.getElementById("leftColumn").classList.toggle("open"); + } }
\ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css index 41e2536f..37d6383c 100644 --- a/plugins/base/src/main/resources/dokka/styles/style.css +++ b/plugins/base/src/main/resources/dokka/styles/style.css @@ -1075,3 +1075,47 @@ div.runnablesample { margin-top: 0.2em; margin-bottom: 0.2em; } + +@media screen and (max-width: 759px) { + #main { + max-width: 100%; + } + #leftColumn { + position: absolute; + margin-left: -280px; + transition: margin .2s ease-out; + z-index: 4; + background: white; + } + #leftColumn.open { + margin-left: 0; + } + #leftColumn.open ~ #main #searchBar { + display: none; + } + #leftToggler { + display: unset; + position: fixed; + top: 50%; + transform: translateY(-50%); + margin-left: 12px; + z-index: 5; + font-size: 30px; + transition: margin .2s ease-out; + } + #leftColumn.open ~ #main #leftToggler { + margin-left: 280px;; + } + .icon-toggler::before { + content: "\232A"; + } + #leftColumn.open ~ #main .icon-toggler::before { + content: "\2329"; + } + .sideMenuPart > .overview:before { + width: 100%; + } + .popup-wrapper { + width: 100%; !important + } +}
\ No newline at end of file |