Coding-Alchemist-Abhijay commented on code in PR #1293:
URL: https://github.com/apache/airflow-site/pull/1293#discussion_r2578057538
##########
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>
Review Comment:
Hey there @choo121600 ! Thank you for your review. First of all, sorry for
the delay — I will update the video right away.
Now, answering your question:
Yes, there was a specific reason for separating the classes. Let me explain
the thought process from the beginning.
Initially, on the Airflow homepage, I created individual `<div>` elements
for the “Scroll to Top” button. However, I ran into a couple of issues:
1. When scrolling to the bottom, the button overflowed into the footer.
2. Even after preventing the overflow and making it sticky, the “Suggest a
Change” button and the “Scroll to Top” button ended up stopping at different
heights above the footer.
* The “Suggest a Change” button appeared slightly above the “Scroll to
Top” button, which didn’t look visually clean.
To fix this, I had to wrap each button in its own container:
* A `<div>` with class `--suggestButton` (with `flex-end`)
* A `<div>` with class `--scrollButton` (with `flex-start`)
Then, to align both of them at the same level just above the footer, I
wrapped these two containers inside another wrapper `<div>` with class
`--button` and applied "display:flex"--> `justify-content: space-between`.
This ensured that both buttons stayed aligned neatly and consistently at the
bottom.
As for why I created a new wrapper class `--bothButtons`:
The original `button` class was also tied to the scroll trigger. On the
homepage, this behavior (buttons appearing on scroll) was fine, but on other
pages like Community, Meetups, and Documentation, the user doesn’t need to
scroll.
So, to keep them aligned on those pages as well, I created a separate
wrapper class that keeps both buttons at the same level above the footer.
I hope this explanation clarifies why I separated the classes and added
these wrappers. If you have any more questions or need further changes, feel
free to let me know. Thank you!
Updated Recording -->
https://github.com/user-attachments/assets/44382963-23e9-4d89-9cc5-5ab2627ed492
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
