This is an automated email from the ASF dual-hosted git repository. kaxilnaik pushed a commit to branch staging in repository https://gitbox.apache.org/repos/asf/airflow-site.git
commit 85cdbc44a6e5a1cb8a812b3f021fef751fafae7b Author: Coding-Alchemist-Abhijay <[email protected]> AuthorDate: Tue Dec 2 17:55:36 2025 +0530 feat: scroll to top button (#1293) * add scroll to top button * add Scroll To Top Button * add scroll to top button bugfix-1 * add scroll to top button bugfix-2 * add scroll to top button bugfix-3 * add scroll to top button bugfix-4 * add scroll to top button bugfix-5 --- landing-pages/site/assets/scss/_base-layout.scss | 49 ++++++++++++++++++-- landing-pages/site/assets/scss/_scroll-to-top.scss | 32 +++++++++++++ landing-pages/site/assets/scss/main-custom.scss | 1 + landing-pages/site/data/integrations.json | 2 +- landing-pages/site/layouts/_default/baseof.html | 9 +++- landing-pages/site/layouts/blog/baseof.html | 9 +++- landing-pages/site/layouts/community/baseof.html | 9 +++- landing-pages/site/layouts/docs/baseof.html | 10 +++- landing-pages/site/layouts/install/baseof.html | 9 +++- landing-pages/site/layouts/meetups/baseof.html | 9 +++- .../partials/buttons/button-with-arrow.html | 24 ++++++++++ landing-pages/site/layouts/partials/footer.html | 1 + .../site/layouts/partials/scroll-to-top.html | 22 +++++++++ .../site/layouts/partials/suggest-change.html | 2 - .../site/layouts/privacy-notice/baseof.html | 10 +++- landing-pages/site/layouts/roadmap/baseof.html | 10 +++- landing-pages/site/layouts/taxonomy/baseof.html | 9 +++- landing-pages/site/layouts/use-cases/baseof.html | 9 +++- landing-pages/src/index.js | 1 + landing-pages/src/js/scrollToTop.js | 54 ++++++++++++++++++++++ landing-pages/yarn.lock | 2 +- 21 files changed, 266 insertions(+), 17 deletions(-) diff --git a/landing-pages/site/assets/scss/_base-layout.scss b/landing-pages/site/assets/scss/_base-layout.scss index 02639e9532..f999f3e247 100644 --- a/landing-pages/site/assets/scss/_base-layout.scss +++ b/landing-pages/site/assets/scss/_base-layout.scss @@ -23,25 +23,68 @@ // padding: 123px 0 40px; padding: 163px 0 40px; // TEMP - accommodate Airflow Summit banner (123 + 40) + &--scrollButton { + position: sticky; + width: 100%; + margin-left: 40px; + margin-right: 40px; + bottom: 40px; + z-index: 1; + } + + &--suggestButton { + display: flex; + justify-content: flex-end; + position: sticky; + width: 100%; + margin-left: auto; + margin-right: 40px; + bottom: 40px; + z-index: 1; + } + &--button { display: flex; position: sticky; - width: fit-content; + width: 100%; margin-left: auto; margin-right: 40px; bottom: 40px; - justify-content: flex-end; + justify-content: space-between; z-index: 1; } + } @media (max-width: $tablet) { .base-layout { padding: 76px 0 60px; - &--button { + &--suggestButton{ + display: none; + } + + &--scrollButton button span { display: none; } + + &--scrollButton button { + width: 55px; + height: 55px; // Slightly increased button height + display: flex; + align-items: center; + justify-content: center; + padding: 0; + } + + &--scrollButton button svg { + display: block; + margin: 0 auto; + position: relative; + left: 56%; // Move just a little bit more to the right + transform: translateX(-50%); + } + } } diff --git a/landing-pages/site/assets/scss/_scroll-to-top.scss b/landing-pages/site/assets/scss/_scroll-to-top.scss new file mode 100644 index 0000000000..6e4508f3e6 --- /dev/null +++ b/landing-pages/site/assets/scss/_scroll-to-top.scss @@ -0,0 +1,32 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +.scroll-to-top--button { + display: flex; + position: sticky; + bottom : 40px; + width: fit-content; + margin-left: 40px; + justify-content: flex-start; + z-index: 2; + + @media (max-width: $tablet) { + display: none; + } +} diff --git a/landing-pages/site/assets/scss/main-custom.scss b/landing-pages/site/assets/scss/main-custom.scss index 7073ba2c85..60cb3e2ef3 100644 --- a/landing-pages/site/assets/scss/main-custom.scss +++ b/landing-pages/site/assets/scss/main-custom.scss @@ -48,6 +48,7 @@ @import "search"; @import "rating"; @import "rst-content"; +@import "scroll-to-top"; @import "content-drawer"; @import "dropdown"; @import "highlights"; diff --git a/landing-pages/site/data/integrations.json b/landing-pages/site/data/integrations.json index a6a2daf80b..9745dcf0e4 120000 --- a/landing-pages/site/data/integrations.json +++ b/landing-pages/site/data/integrations.json @@ -1 +1 @@ -../static/integrations.json \ No newline at end of file +../static/integrations.json diff --git a/landing-pages/site/layouts/_default/baseof.html b/landing-pages/site/layouts/_default/baseof.html index 8858e75f7c..311e322e37 100644 --- a/landing-pages/site/layouts/_default/baseof.html +++ b/landing-pages/site/layouts/_default/baseof.html @@ -32,7 +32,14 @@ <main role="main" class="td-main container"> {{ block "main" . }}{{ end }} </main> - {{ partial "suggest-change" . }} + <div class="base-layout--button"> + <div class="base-layout--scrollButton"> + {{ partial "scroll-to-top" . }} + </div> + <div class="base-layout--suggestButton"> + {{ partial "suggest-change" . }} + </div> + </div> </div> </div> {{ partialCached "footer.html" . }} diff --git a/landing-pages/site/layouts/blog/baseof.html b/landing-pages/site/layouts/blog/baseof.html index 8466877599..2e84ede665 100644 --- a/landing-pages/site/layouts/blog/baseof.html +++ b/landing-pages/site/layouts/blog/baseof.html @@ -31,7 +31,14 @@ <main role="main" class="td-main container"> {{ block "main" . }}{{ end }} </main> - {{ partial "suggest-change" . }} + <div class="base-layout--button"> + <div class="base-layout--scrollButton"> + {{ partial "scroll-to-top" . }} + </div> + <div class="base-layout--suggestButton"> + {{ partial "suggest-change" . }} + </div> + </div> </div> </div> {{ partialCached "footer.html" . }} diff --git a/landing-pages/site/layouts/community/baseof.html b/landing-pages/site/layouts/community/baseof.html index 6814d9bd5a..fc5ac3b0da 100644 --- a/landing-pages/site/layouts/community/baseof.html +++ b/landing-pages/site/layouts/community/baseof.html @@ -31,9 +31,16 @@ <main role="main" class="td-main container"> {{ block "main" . }}{{ end }} </main> - {{ partial "suggest-change" . }} + <div class="base-layout--button"> + <div class="base-layout--scrollButton"> + {{ partial "scroll-to-top" . }} + </div> + <div class="base-layout--suggestButton"> + {{ partial "suggest-change" . }} + </div> </div> </div> +</div> {{ partialCached "footer.html" . }} {{ partial "scripts.html" . }} </body> diff --git a/landing-pages/site/layouts/docs/baseof.html b/landing-pages/site/layouts/docs/baseof.html index 5742a85d16..61d8cc2c5b 100644 --- a/landing-pages/site/layouts/docs/baseof.html +++ b/landing-pages/site/layouts/docs/baseof.html @@ -32,7 +32,15 @@ {{ block "main" . }}{{ end }} </main> </div> - {{ partial "suggest-change" . }} +<div class="base-layout--button"> + <div class="base-layout--scrollButton"> + {{ partial "scroll-to-top" . }} + </div> + <div class="base-layout--suggestButton"> + {{ partial "suggest-change" . }} + </div> +</div> +</div> </div> {{ partialCached "footer.html" . }} {{ partial "scripts.html" . }} diff --git a/landing-pages/site/layouts/install/baseof.html b/landing-pages/site/layouts/install/baseof.html index 7f46604fb7..b3131cba45 100644 --- a/landing-pages/site/layouts/install/baseof.html +++ b/landing-pages/site/layouts/install/baseof.html @@ -31,7 +31,14 @@ <main role="main" class="td-main container"> {{ block "main" . }}{{ end }} </main> - {{ partial "suggest-change" . }} + <div class="base-layout--button"> + <div class="base-layout--scrollButton"> + {{ partial "scroll-to-top" . }} + </div> + <div class="base-layout--suggestButton"> + {{ partial "suggest-change" . }} + </div> + </div> </div> </div> {{ partialCached "footer.html" . }} diff --git a/landing-pages/site/layouts/meetups/baseof.html b/landing-pages/site/layouts/meetups/baseof.html index 8466877599..2e84ede665 100644 --- a/landing-pages/site/layouts/meetups/baseof.html +++ b/landing-pages/site/layouts/meetups/baseof.html @@ -31,7 +31,14 @@ <main role="main" class="td-main container"> {{ block "main" . }}{{ end }} </main> - {{ partial "suggest-change" . }} + <div class="base-layout--button"> + <div class="base-layout--scrollButton"> + {{ partial "scroll-to-top" . }} + </div> + <div class="base-layout--suggestButton"> + {{ partial "suggest-change" . }} + </div> + </div> </div> </div> {{ partialCached "footer.html" . }} diff --git a/landing-pages/site/layouts/partials/buttons/button-with-arrow.html b/landing-pages/site/layouts/partials/buttons/button-with-arrow.html new file mode 100644 index 0000000000..566865e460 --- /dev/null +++ b/landing-pages/site/layouts/partials/buttons/button-with-arrow.html @@ -0,0 +1,24 @@ +{{/* + Licensed to the Apache Software Foundation (ASF) under one + or more contributor license agreements. See the NOTICE file + distributed with this work for additional information + regarding copyright ownership. The ASF licenses this file + to you under the Apache License, Version 2.0 (the + "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, + software distributed under the License is distributed on an + "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, either express or implied. See the License for the + specific language governing permissions and limitations + under the License. + */}} +<button id="{{ .id }}" class="btn-hollow btn-brown btn-with-icon with-box-shadow {{ .class }}"> + <svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24" fill="currentColor" viewBox="0 0 16 16"> + <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/> + </svg> + <span class="bodytext__medium--brownish-grey">{{ .text }}</span> +</button> diff --git a/landing-pages/site/layouts/partials/footer.html b/landing-pages/site/layouts/partials/footer.html index c467d38579..7752756cf7 100644 --- a/landing-pages/site/layouts/partials/footer.html +++ b/landing-pages/site/layouts/partials/footer.html @@ -102,3 +102,4 @@ </span> </div> </footer> + diff --git a/landing-pages/site/layouts/partials/scroll-to-top.html b/landing-pages/site/layouts/partials/scroll-to-top.html new file mode 100644 index 0000000000..3f4237f94c --- /dev/null +++ b/landing-pages/site/layouts/partials/scroll-to-top.html @@ -0,0 +1,22 @@ +{{/* + Licensed to the Apache Software Foundation (ASF) under one + or more contributor license agreements. See the NOTICE file + distributed with this work for additional information + regarding copyright ownership. The ASF licenses this file + to you under the Apache License, Version 2.0 (the + "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, + software distributed under the License is distributed on an + "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, either express or implied. See the License for the + specific language governing permissions and limitations + under the License. + */}} + + {{ partial "buttons/button-with-arrow" (dict "text" "Scroll to top" "class" "button-fixed" "id" "scroll-to-top-btn") }} + + \ No newline at end of file diff --git a/landing-pages/site/layouts/partials/suggest-change.html b/landing-pages/site/layouts/partials/suggest-change.html index 514b66cacc..88c68a0cff 100644 --- a/landing-pages/site/layouts/partials/suggest-change.html +++ b/landing-pages/site/layouts/partials/suggest-change.html @@ -17,9 +17,7 @@ under the License. */}} -<div class="base-layout--button"> {{ $url := printf "https://github.com/apache/airflow-site/edit/main/landing-pages/site/content/%s/%s"; $.Site.Language.Lang .Path }} <a href={{ $url }}> {{ partial "buttons/button-with-icon" (dict "text" "Suggest a change on this page" "class" "button-fixed") }} </a> -</div> diff --git a/landing-pages/site/layouts/privacy-notice/baseof.html b/landing-pages/site/layouts/privacy-notice/baseof.html index 5742a85d16..61d8cc2c5b 100644 --- a/landing-pages/site/layouts/privacy-notice/baseof.html +++ b/landing-pages/site/layouts/privacy-notice/baseof.html @@ -32,7 +32,15 @@ {{ block "main" . }}{{ end }} </main> </div> - {{ partial "suggest-change" . }} +<div class="base-layout--button"> + <div class="base-layout--scrollButton"> + {{ partial "scroll-to-top" . }} + </div> + <div class="base-layout--suggestButton"> + {{ partial "suggest-change" . }} + </div> +</div> +</div> </div> {{ partialCached "footer.html" . }} {{ partial "scripts.html" . }} diff --git a/landing-pages/site/layouts/roadmap/baseof.html b/landing-pages/site/layouts/roadmap/baseof.html index ca7dcd7b2f..31d0c78f13 100644 --- a/landing-pages/site/layouts/roadmap/baseof.html +++ b/landing-pages/site/layouts/roadmap/baseof.html @@ -65,7 +65,15 @@ {{ block "main" . }}{{ end }} </main> </div> - {{ partial "suggest-change" . }} +<div class="base-layout--button"> + <div class="base-layout--scrollButton"> + {{ partial "scroll-to-top" . }} + </div> + <div class="base-layout--suggestButton"> + {{ partial "suggest-change" . }} + </div> +</div> +</div> </div> {{ partialCached "footer.html" . }} {{ partial "scripts.html" . }} diff --git a/landing-pages/site/layouts/taxonomy/baseof.html b/landing-pages/site/layouts/taxonomy/baseof.html index 8466877599..2e84ede665 100644 --- a/landing-pages/site/layouts/taxonomy/baseof.html +++ b/landing-pages/site/layouts/taxonomy/baseof.html @@ -31,7 +31,14 @@ <main role="main" class="td-main container"> {{ block "main" . }}{{ end }} </main> - {{ partial "suggest-change" . }} + <div class="base-layout--button"> + <div class="base-layout--scrollButton"> + {{ partial "scroll-to-top" . }} + </div> + <div class="base-layout--suggestButton"> + {{ partial "suggest-change" . }} + </div> + </div> </div> </div> {{ partialCached "footer.html" . }} diff --git a/landing-pages/site/layouts/use-cases/baseof.html b/landing-pages/site/layouts/use-cases/baseof.html index 8466877599..2e84ede665 100644 --- a/landing-pages/site/layouts/use-cases/baseof.html +++ b/landing-pages/site/layouts/use-cases/baseof.html @@ -31,7 +31,14 @@ <main role="main" class="td-main container"> {{ block "main" . }}{{ end }} </main> - {{ partial "suggest-change" . }} + <div class="base-layout--button"> + <div class="base-layout--scrollButton"> + {{ partial "scroll-to-top" . }} + </div> + <div class="base-layout--suggestButton"> + {{ partial "suggest-change" . }} + </div> + </div> </div> </div> {{ partialCached "footer.html" . }} diff --git a/landing-pages/src/index.js b/landing-pages/src/index.js index 3b6c772fc7..01c5b60c59 100644 --- a/landing-pages/src/index.js +++ b/landing-pages/src/index.js @@ -27,6 +27,7 @@ import "./js/progressTracking"; import "./js/rating"; import "./js/makeTableResponsive"; import "./js/versionSelector"; +import "./js/scrollToTop"; if (document.querySelector("#search")) { import(/* webpackChunkName: "search" */ "./js/searchBlogPosts"); diff --git a/landing-pages/src/js/scrollToTop.js b/landing-pages/src/js/scrollToTop.js new file mode 100644 index 0000000000..4be968fd38 --- /dev/null +++ b/landing-pages/src/js/scrollToTop.js @@ -0,0 +1,54 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +const SCROLL_THRESHOLD = 100; // Show button after scrolling 100px + +document.addEventListener("DOMContentLoaded", function() { + const scrollToTopBtn = document.getElementById("scroll-to-top-btn"); + + if (!scrollToTopBtn) { + return; // Button not found on this page + } + + // Function to toggle button visibility + function toggleScrollToTopBtn() { + if (window.scrollY > SCROLL_THRESHOLD) { + scrollToTopBtn.style.display = "flex"; + } else { + scrollToTopBtn.style.display = "none"; + } + } + + // Function to scroll to top smoothly + function scrollToTop() { + window.scrollTo({ + top: 0, + behavior: "smooth" + }); + } + + // Add scroll event listener + window.addEventListener("scroll", toggleScrollToTopBtn); + + // Add click event listener + scrollToTopBtn.addEventListener("click", scrollToTop); + + // Initialize button visibility on load + toggleScrollToTopBtn(); +}); diff --git a/landing-pages/yarn.lock b/landing-pages/yarn.lock index 094ddc2d11..2ede7863ea 100644 --- a/landing-pages/yarn.lock +++ b/landing-pages/yarn.lock @@ -7565,4 +7565,4 @@ yocto-queue@^1.0.0: zod@^3.25.51: version "3.25.76" resolved "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz"; - integrity sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ== + integrity sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ== \ No newline at end of file
