diff options
| -rw-r--r-- | content/assets/javascripts/docs.js | 7 | ||||
| -rw-r--r-- | content/assets/stylesheets/toc.scss | 40 | ||||
| -rw-r--r-- | layouts/default.html | 2 |
3 files changed, 33 insertions, 16 deletions
diff --git a/content/assets/javascripts/docs.js b/content/assets/javascripts/docs.js index 91f3356e..b829c273 100644 --- a/content/assets/javascripts/docs.js +++ b/content/assets/javascripts/docs.js @@ -108,11 +108,8 @@ function getUlAncestorsCount(el, root) { // grab the h1's li anchor text var title = document.createElement('h4'); - title.classList.add('border-bottom-0', 'mb-0', 'pb-0'); - title.innerHTML = [ - '<span class="font-weight-bold toc-header">On this page</span>', - '<button type="button" class="btn btn-link p-0 toc-collapse" data-toggle="collapse" data-target="#markdown-toc" aria-expanded="true" aria-contols="markdown-toc">On this page</button>' - ].join(''); + title.classList.add('border-bottom-0', 'font-weight-bold', 'mb-0', 'pb-0'); + title.innerHTML = 'On this page'; // add the text as a title sidebarContent.appendChild(title); diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss index 46ee2436..5a7ec0c4 100644 --- a/content/assets/stylesheets/toc.scss +++ b/content/assets/stylesheets/toc.scss @@ -78,26 +78,48 @@ version: 8 // ToC toggle button .toc-collapse { + font-size: 13px; + display: block; + padding: 5px 5px 5px 0; + position: absolute; + z-index: 1; + right: 0; + color: $link-color-nav; + + &:hover { + color: $link-color-nav-hover; + } + &::before { font-family: FontAwesome; - content: "\f078"; + content: "\f147"; padding-right: 5px; } + &::after { + content: ""; + font-style: italic; + } + &.collapsed { + left: 0; + right: 0; + text-align: right; + background-color: $body-background-color; + &::before { - content: "\f054"; + content: "\f196"; } - } - } - .toc-header { - display: none; + &::after { + content: "On this page"; + } + } } + // ToC toggle button .doc-nav-content { margin: 0; - padding-left: 5px; } } @@ -131,10 +153,6 @@ version: 8 .toc-collapse { display: none; // ToC toggle button => don't display on big screens } - - .toc-header { - display: block; - } } .doc-nav ul ul { diff --git a/layouts/default.html b/layouts/default.html index 8a465187..51c3fbd2 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -30,9 +30,11 @@ <li class="breadcrumb"><%= @item.key?(:title) ? "#{@item[:title]}" : "Current page" %></li> </ul> <div id="doc-nav" class="doc-nav"> + <a class="toc-collapse" data-toggle="collapse" href="#doc-nav-content" aria-expanded="true" aria-controls="doc-nav-content"></a> </div> <% else %> <div id="doc-nav" class="doc-nav toc-no-breadcrumbs"> + <a class="toc-collapse" role="button" data-toggle="collapse" href="#doc-nav-content" aria-expanded="true" aria-controls="doc-nav-content"></a> </div> <% end %> <% end %> |