diff options
| author | Henk Verlinde <henk@ventizo.com> | 2022-06-20 16:00:01 +0300 |
|---|---|---|
| committer | Henk Verlinde <henk@ventizo.com> | 2022-06-20 16:00:01 +0300 |
| commit | 27e2ee173c09c1aeb72060f2f1eefada927cd394 (patch) | |
| tree | 8380d7599aad88335a25c36af32ce97257d599c5 | |
| parent | 7bfe21cb3c07f1d2b15e15721e21992bd3c03d55 (diff) | |
ux: update on this page toggle
| -rw-r--r-- | assets/scss/layouts/_header.scss | 9 | ||||
| -rw-r--r-- | layouts/partials/sidebar/docs-toc.html | 14 |
2 files changed, 14 insertions, 9 deletions
diff --git a/assets/scss/layouts/_header.scss b/assets/scss/layouts/_header.scss index f53d1bf..7bc7323 100644 --- a/assets/scss/layouts/_header.scss +++ b/assets/scss/layouts/_header.scss @@ -434,15 +434,18 @@ button#doks-versions { outline: 0; } -.doks-sidebar-toggle .doks-collapse { +.doks-sidebar-toggle .doks-collapse, +.doks-toc-toggle .doks-collapse { display: none; } -.doks-sidebar-toggle:not(.collapsed) .doks-expand { +.doks-sidebar-toggle:not(.collapsed) .doks-expand, +.doks-toc-toggle:not(.collapsed) .doks-expand { display: none; } -.doks-sidebar-toggle:not(.collapsed) .doks-collapse { +.doks-sidebar-toggle:not(.collapsed) .doks-collapse, +.doks-toc-toggle:not(.collapsed) .doks-collapse { display: inline-block; } diff --git a/layouts/partials/sidebar/docs-toc.html b/layouts/partials/sidebar/docs-toc.html index caae3f0..ba41c9a 100644 --- a/layouts/partials/sidebar/docs-toc.html +++ b/layouts/partials/sidebar/docs-toc.html @@ -1,12 +1,14 @@ {{ if and (ne .Params.toc false) (ne .TableOfContents "<nav id=\"TableOfContents\"></nav>") -}} <div class="d-xl-none"> - <p> - <a class="btn btn-outline-primary btn-sm" data-bs-toggle="collapse" href="#onThisPage" role="button" aria-expanded="false" aria-controls="onThisPage"> - On this page - </a> - </p> + <button class="btn btn-outline-primary btn-sm doks-toc-toggle collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#onThisPage" aria-controls="doks-docs-nav" aria-expanded="false" aria-label="Toggle On this page navigation"> + <span>On this page</span> + <span> + <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="doks doks-expand" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Expand</title><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg> + <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="doks doks-collapse" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Collapse</title><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg> + </span> + </button> <div class="collapse" id="onThisPage"> - <div class="card card-body py-1"> + <div class="card card-body mt-3 py-1"> <div class="page-links"> {{ .TableOfContents }} </div> |