diff --git a/.gitmodules b/.gitmodules index 81e7ea448e3c..a78309399754 100644 --- a/.gitmodules +++ b/.gitmodules @@ -31,4 +31,4 @@ [submodule "content-modules/opentelemetry-java-examples"] path = content-modules/opentelemetry-java-examples url = https://github.com/open-telemetry/opentelemetry-java-examples.git - javaexamples-pin = f9553ef + javaexamples-pin = 0f736ec diff --git a/assets/js/scrollToTop.js b/assets/js/scrollToTop.js new file mode 100644 index 000000000000..d7a2a07abd68 --- /dev/null +++ b/assets/js/scrollToTop.js @@ -0,0 +1,63 @@ +document.addEventListener("DOMContentLoaded", function () { + const scrollToTopBtn = document.getElementById("scrollToTopBtn"); + const footer = document.querySelector(".td-footer"); + const scrollLabel = scrollToTopBtn?.querySelector(".scroll-label"); + let hideTimeout; + + // Check if the current page is the homepage + if (window.location.pathname === "/") { + if (scrollToTopBtn) scrollToTopBtn.style.display = "none"; + return; // Exit early to prevent further execution on the homepage + } + + if (!scrollToTopBtn || !footer) return; + + // Function to adjust button position to avoid footer overlap + function adjustButtonPosition() { + const footerTop = footer.getBoundingClientRect().top; + const windowHeight = window.innerHeight; + + if (footerTop < windowHeight + 40) { + scrollToTopBtn.style.bottom = `${windowHeight - footerTop + 40}px`; + } else { + scrollToTopBtn.style.bottom = "40px"; + } + } + + // Show or hide the button with a fade effect and handle label transition + function toggleButtonVisibility() { + const scrollPosition = + document.body.scrollTop || document.documentElement.scrollTop; + + if (scrollPosition > 200) { + scrollToTopBtn.classList.add("visible"); + + // Show the label after 3-4 page scrolls + const pageHeight = window.innerHeight; + if (scrollPosition > pageHeight * 3) { + scrollToTopBtn.classList.add("show-label"); + } else { + scrollToTopBtn.classList.remove("show-label"); + } + + // Clear any existing timeout for hiding the button + if (hideTimeout) clearTimeout(hideTimeout); + + // Hide the button after 2-3 seconds of inactivity + hideTimeout = setTimeout(() => { + scrollToTopBtn.classList.remove("visible"); + }, 2500); + } else { + scrollToTopBtn.classList.remove("visible"); + scrollToTopBtn.classList.remove("show-label"); + } + + adjustButtonPosition(); + } + + scrollToTopBtn.onclick = function () { + window.scrollTo({ top: 0, behavior: "smooth" }); + }; + + window.addEventListener("scroll", toggleButtonVisibility); +}); diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 6de8eb1b3b6a..b131f84e88ff 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -25,14 +25,15 @@ margin-top: 1rem; margin-bottom: 1rem; - > ul { + >ul { list-style: none; margin: 0; padding: 0; - > li { + >li { display: inline; - > a { + + >a { @extend .btn; margin: 0.25rem; @@ -47,7 +48,10 @@ .l-get-started-buttons { @extend .l-buttons; - > ul > li > a /*, > p > a*/ { + >ul>li>a + + /*, > p > a*/ + { @extend .btn-lg; @extend .btn-secondary; } @@ -56,7 +60,7 @@ .l-primary-buttons { @extend .l-buttons; - > ul > li > a { + >ul>li>a { @extend .btn-lg; @extend .btn-primary; } @@ -67,7 +71,10 @@ @extend .l-buttons; justify-content: left; - > ul > li > a /*, > p > a*/ { + >ul>li>a + + /*, > p > a*/ + { @extend .btn-lg; @extend .btn-primary; padding: 20px; @@ -80,7 +87,10 @@ @extend .l-buttons; justify-content: left; - > ul > li > a /*, > p > a*/ { + >ul>li>a + + /*, > p > a*/ + { @extend .btn-lg; @extend .btn-secondary; padding: 20px; @@ -95,9 +105,11 @@ @include media-breakpoint-up(md) { padding: 0; } + svg { height: 48px; } + .navbar-brand__name { display: none; } @@ -127,6 +139,7 @@ a { color: white; + &.external-link:after { display: none; } @@ -167,7 +180,7 @@ .community-contribution { text-align: center; - & > p { + &>p { font-size: $h3-font-size; font-weight: $headings-font-weight; line-height: $headings-line-height; @@ -192,6 +205,7 @@ summary { display: block; + &::-webkit-details-marker { display: none; } @@ -226,9 +240,11 @@ .td-byline { margin: 0 !important; } + .article-meta { margin: 0; } + p:first-of-type { @extend .small; opacity: 0.65; @@ -321,9 +337,90 @@ details { // Workaround for iOS and macOS Safari 17+. For details see: // https://github.com/open-telemetry/opentelemetry.io/issues/3538 -.td-content .highlight > pre { - > .click-to-copy, - > code { +.td-content .highlight>pre { + + >.click-to-copy, + >code { overflow-y: auto; } } + +// Scroll-to-top button styling +.scroll-container { + position: fixed; + bottom: 40px; + right: 20px; + z-index: 1000; + + .scroll-btn { + position: fixed; + bottom: 0; + right: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: transparent; + border: none; + border-radius: 0; + cursor: pointer; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease-in-out; + padding: 8px 16px; + + &:hover { + background-color: #f1f1f1; + border: 2px solid #007bff; + border-top-right-radius: 20px; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 0; + } + + .scroll-icon { + font-size: 18px; + color: #007bff; + transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; + + &:hover { + color: #0056b3; + transform: scale(1.2); + } + } + + .scroll-label { + font-size: 12px; + font-family: "Roboto", Arial, sans-serif; + font-weight: 500; + color: #333; + opacity: 0; + transform: translateY(10px); + transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; + text-align: center; + } + + &.show-label .scroll-label { + opacity: 1; + transform: translateY(0); + } + + &.visible { + opacity: 1; + visibility: visible; + } + } +} + +@media (max-width: 768px) { + .scroll-container { + .scroll-btn { + bottom: 20px; + right: 10px; + + .scroll-icon { + font-size: 16px; + } + } + } +} \ No newline at end of file diff --git a/content-modules/opentelemetry-java-examples b/content-modules/opentelemetry-java-examples index f9553eff58aa..0f736eca6a4b 160000 --- a/content-modules/opentelemetry-java-examples +++ b/content-modules/opentelemetry-java-examples @@ -1 +1 @@ -Subproject commit f9553eff58aabb28dabee8c14274d9860b4c52bd +Subproject commit 0f736eca6a4b6865fb62b00033a53369e69440f7 diff --git a/layouts/partials/hooks/body-end.html b/layouts/partials/hooks/body-end.html index 9df70d272006..2433a53090df 100644 --- a/layouts/partials/hooks/body-end.html +++ b/layouts/partials/hooks/body-end.html @@ -2,3 +2,5 @@ {{ partial "script.html" (dict "src" "js/tracing.js") -}} {{ end -}} {{ partial "script.html" (dict "src" "js/navScroll.js") -}} +{{ partial "scroll-to-top.html" }} +{{ partial "script.html" (dict "src" "js/scrollToTop.js") -}} diff --git a/layouts/partials/scroll-to-top.html b/layouts/partials/scroll-to-top.html new file mode 100644 index 000000000000..36db78ca054a --- /dev/null +++ b/layouts/partials/scroll-to-top.html @@ -0,0 +1,6 @@ +
+ +
\ No newline at end of file