improvement in ui and ux of footer links and back-to-top #413
Conversation
Signed-off-by: Mohit Davar <[email protected]>
|
Welcome @Mohit-Davar! |
volcano-sh-bot
added
the
kind/design
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @Mohit-Davar, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request aims to enhance the user interface and experience of the website's footer section. It addresses existing alignment issues and improves overall visual balance by refining padding, spacing, and typography. Additionally, it introduces a smoother and more interactive "back-to-top" functionality.
Highlights
- Footer Styling Enhancements: Applied comprehensive inline CSS to the footer for improved centering, padding, and consistent text color, ensuring a more balanced visual presentation.
- Dynamic Copyright Year: Updated the copyright display to automatically show the current year, removing the hardcoded "2025".
- Refined Back-to-Top Button: Reworked the "back-to-top" button's structure and styling, adding hover effects and implementing smooth scrolling functionality via JavaScript for a better user experience.
- Improved Link Hover States: Introduced CSS rules to provide a distinct hover effect for all links within the footer, enhancing interactivity.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments or fill out our survey to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
volcano-sh-bot
added
the
size/L
There was a problem hiding this comment.
Code Review
This PR successfully improves the footer's UI and UX by addressing alignment issues and adding smooth scrolling. The dynamic year is also a great improvement. However, there are significant maintainability concerns due to the extensive use of inline styles and embedded <style> and <script> blocks. My review comments focus on refactoring these to follow best practices by separating concerns, which will improve code quality, performance, and make future maintenance easier.
| </div> | ||
| <p class="powered-by" style="padding-bottom: 20px;">{{ with .Site.Copyright }}{{ . | markdownify}} {{ end }}</p> | ||
| <div style="font-size: 18px; margin: 30px 0px;"> | ||
| Volcano是 <a href="https://www.cncf.io/" tyle="color: #c8000b; transition: color 0.3s ease;">云原生计算基金会</a> 孵化项目 |
There was a problem hiding this comment.
There is a typo in the style attribute. It should be style instead of tyle.
| Volcano是 <a href="https://www.cncf.io/" tyle="color: #c8000b; transition: color 0.3s ease;">云原生计算基金会</a> 孵化项目 | |
| Volcano是 <a href="https://www.cncf.io/" style="color: #c8000b; transition: color 0.3s ease;">云原生计算基金会</a> 孵化项目 |
| @@ -1,52 +1,107 @@ | |||
| <footer class="site-footer"> | |||
| <footer class="site-footer" style="text-align: center; padding: 40px 20px; color: #fff;"> | |||
There was a problem hiding this comment.
This file makes extensive use of inline styles. While convenient for small tweaks, it's a best practice to move styles to external CSS files. This improves maintainability, allows for browser caching (better performance), and separates content (HTML) from presentation (CSS). Please consider creating dedicated CSS classes and moving these styles to assets/css/custom.css.
| <style> | ||
| .back-to-top-btn:hover img { | ||
| transform: translateY(-3px); | ||
| } | ||
|
|
||
| footer a:hover { | ||
| color: #ff1a1a !important; | ||
| } | ||
|
|
||
| .back-to-top { | ||
| cursor: pointer; | ||
| } | ||
| </style> |
There was a problem hiding this comment.
Embedding a <style> block directly in an HTML file is not recommended. It mixes structure and presentation, making the codebase harder to manage. Please move these styles into the assets/css/custom.css file to keep your CSS organized in one place.
| <script> | ||
| // Smooth scroll to top functionality | ||
| document.addEventListener('DOMContentLoaded', function () { | ||
| document.querySelectorAll('.back-to-top').forEach(btn => { | ||
| btn.addEventListener('click', function (e) { | ||
| e.preventDefault(); | ||
| window.scrollTo({ top: 0, behavior: 'smooth' }); | ||
| }); | ||
| }); | ||
| }); | ||
| </script> |
There was a problem hiding this comment.
It's best practice to keep JavaScript in external .js files rather than embedding it in HTML. This separation of concerns improves code organization, maintainability, and allows browsers to cache the script. Please move this script into assets/js/custom.js.
| footer a:hover { | ||
| color: #ff1a1a !important; | ||
| } |
There was a problem hiding this comment.
The use of !important should be avoided as it can make CSS difficult to debug and override later. You can usually achieve the same result by increasing the selector's specificity. For example, using .site-footer a:hover would likely be specific enough to override any conflicting styles without needing !important.
| footer a:hover { | |
| color: #ff1a1a !important; | |
| } | |
| footer a:hover { | |
| color: #ff1a1a; | |
| } |
2 participants
/kind design
This PR fixes footer alignment issues and improves overall UX.
It ensures consistent padding, spacing, and typography for better visual balance.
Fixes Improve footer content alignment and visual spacing #391 and "Back to Top" scroll can be made into a smooth transition #388
Before:
https://github.com/user-attachments/assets/d2113c2e-3bc3-4e8d-a4e4-b9e08ad97122
After:
https://github.com/user-attachments/assets/f6e582e8-5931-4c15-b022-03d060c86ac3