ux: update on this page toggle

This commit is contained in:
Henk Verlinde 2022-06-20 15:00:01 +02:00
parent 7bfe21cb3c
commit 27e2ee173c
2 changed files with 14 additions and 9 deletions

View File

@ -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;
}

View File

@ -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>