From a01120c2f5f131a1e0d06ff4d7bd52f4013463a1 Mon Sep 17 00:00:00 2001 From: Giulio Longfils Date: Sat, 2 Dec 2023 22:07:34 +0100 Subject: [PATCH 1/2] adding top button to docs --- docs/_includes/topButton.html | 1 + docs/_layouts/default.html | 2 ++ docs/assets/css/style.scss | 21 +++++++++++++++++++++ docs/assets/scripts/topButton.js | 17 +++++++++++++++++ 4 files changed, 41 insertions(+) create mode 100644 docs/_includes/topButton.html create mode 100644 docs/assets/scripts/topButton.js diff --git a/docs/_includes/topButton.html b/docs/_includes/topButton.html new file mode 100644 index 00000000..112047c8 --- /dev/null +++ b/docs/_includes/topButton.html @@ -0,0 +1 @@ + diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 9aa35329..245e031b 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -37,6 +37,7 @@

{{ site.title | default: site.github.repository_name }}

{% include search.html %} {{ content }} + {% include topButton.html %} @@ -51,5 +52,6 @@

{{ site.title | default: site.github.repository_name }}

+ diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss index 8ce60c3d..a4d49321 100644 --- a/docs/assets/css/style.scss +++ b/docs/assets/css/style.scss @@ -157,3 +157,24 @@ img.copy-icon { width: 16px; vertical-align: bottom; } + +#topButton { + display: none; + position: fixed; + bottom: 15px; + right: 15px; + z-index: 99; + border: 1px solid #444; + outline: none; + background-color: #3A3C42; + color: white; + cursor: pointer; + padding: 10px; + border-radius: 5px; + font-size: 14px; +} + +#topButton:hover { + background-color: #555; + box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; +} diff --git a/docs/assets/scripts/topButton.js b/docs/assets/scripts/topButton.js new file mode 100644 index 00000000..2bd6171a --- /dev/null +++ b/docs/assets/scripts/topButton.js @@ -0,0 +1,17 @@ +const topButton = document.getElementById("topButton"); +const topButtonOffset = 350; + +window.onscroll = function() { scrollFunction() }; + +function scrollFunction() { + if (document.body.scrollTop > topButtonOffset || document.documentElement.scrollTop > topButtonOffset) { + topButton.style.display = 'block'; + } else { + topButton.style.display = 'none'; + } +} + +function topFunction() { + document.body.scrollTop = 0; // For Safari + document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera +} From 506c67905029f0307cbbaf508b88806d139e48cc Mon Sep 17 00:00:00 2001 From: Giulio Longfils Date: Sat, 2 Dec 2023 22:37:03 +0100 Subject: [PATCH 2/2] docs scroll fix --- docs/assets/scripts/search.js | 3 +++ docs/assets/scripts/topButton.js | 13 ------------- 2 files changed, 3 insertions(+), 13 deletions(-) diff --git a/docs/assets/scripts/search.js b/docs/assets/scripts/search.js index 954b5c2f..28f67455 100644 --- a/docs/assets/scripts/search.js +++ b/docs/assets/scripts/search.js @@ -5,6 +5,7 @@ const resultsContainer = document.getElementById('results-container'); const noResult = document.createElement('li'); const searchContainerTop = searchContainer.getBoundingClientRect().top - 5; const section = document.querySelectorAll('section')[0]; +const topButton = document.getElementById("topButton"); noResult.innerText = 'No results' noResult.setAttribute('id', 'no-results'); @@ -36,9 +37,11 @@ function stickyHeader() { if (window.pageYOffset > searchContainerTop) { searchContainer.classList.add('sticky'); section.classList.add('sticky-section'); + topButton.style.display = 'block'; } else { searchContainer.classList.remove('sticky'); section.classList.remove('sticky-section'); + topButton.style.display = 'none'; } } diff --git a/docs/assets/scripts/topButton.js b/docs/assets/scripts/topButton.js index 2bd6171a..0664f1cc 100644 --- a/docs/assets/scripts/topButton.js +++ b/docs/assets/scripts/topButton.js @@ -1,16 +1,3 @@ -const topButton = document.getElementById("topButton"); -const topButtonOffset = 350; - -window.onscroll = function() { scrollFunction() }; - -function scrollFunction() { - if (document.body.scrollTop > topButtonOffset || document.documentElement.scrollTop > topButtonOffset) { - topButton.style.display = 'block'; - } else { - topButton.style.display = 'none'; - } -} - function topFunction() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera