open-telemetry
✅ [Outreachy] Sticky searchform
The Sticky Search Form is a feature designed to improve the user experience on the OpenTelemetry website by enhancing accessibility and ease of use for search functionality. This feature keeps the search form anchored at the top of the page as users scroll through content, ensuring that the search field remains readily available without requiring users to scroll back to the top. This is particularly beneficial on content-heavy pages where navigating back to the search bar may disrupt the browsing experience.
Key Features: Search Accessibility: The search form becomes "sticky" once the user scrolls beyond a predefined threshold, staying fixed at the top of the viewport. This allows users to initiate a search from anywhere on the page. Dynamic User Experience: The sticky search form improves navigation efficiency by offering quick access to content search, eliminating the need for unnecessary scrolling. Responsive Design: The implementation ensures that the sticky search form adapts to various screen sizes, providing a seamless experience across devices, from desktop to mobile.
https://github.com/user-attachments/assets/0f7837b1-3572-4308-b7bb-a5c7b09c7ab4
https://github.com/user-attachments/assets/f36739cc-7818-4e64-b42e-344a6e754e70
Desktop view mode, not so sure about the UI look on mobile though, would love to hear your input mentor. @svrnm
This looks good, thank you!
A thing that I saw while trying it out is that the buttons have a transparent background, and therefore text in the background shines through, I guess you need to change that to a solid background
Yes indeed, you’re right. I will fix
Fixed mentor @svrnm . The Search form buttons are now solid with a white background (bg-white).
Hey, the sticky search looks good to me! Can you remove the scroll up button from this PR, so both features are in separate PRs as discussed? thanks
Oh yeah, my bad, will fix now
On Wed, 16 Oct 2024 at 10:45 AM Severin Neumann @.***> wrote:
Hey, the sticky search looks good to me! Can you remove the scroll up button from this PR, so both features are in separate PRs as discussed? thanks
— Reply to this email directly, view it on GitHub https://github.com/open-telemetry/opentelemetry.io/pull/5400#issuecomment-2416286510, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5F4OZ4HCPPDTFVJH4CM6ADZ3YYVDAVCNFSM6AAAAABP4U6OHWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJWGI4DMNJRGA . You are receiving this because you authored the thread.Message ID: @.***>
@bintus-ux can you run npm run fix:format locally and upload the changes? This should resolve the CI issue
@bintus-ux can you run
npm run fix:formatlocally and upload the changes? This should resolve the CI issue
Oh yeah, on it now.
I consider this as done! After the outreachy application phase we will take another look and see if we can merge this PR. Thank you!
I consider this as done! After the outreachy application phase we will take another look and see if we can merge this PR. Thank you!
Let’s gooooo!!! Appreciate mentor @svrnm
Got you, on it.
On Mon, 11 Nov 2024 at 3:29 PM Severin Neumann @.***> wrote:
@.**** requested changes on this pull request.
hey @bintus-ux https://github.com/bintus-ux, we would like to merge this PR into the project, there are a few more changes I need you to look into. thanks!
On assets/js/stickySearch.js https://github.com/open-telemetry/opentelemetry.io/pull/5400#discussion_r1836753778 :
can you move this to the content of assets/js/registrySearch.js since it is unique to the registry and does not need to live in it's own file
In layouts/partials/hooks/body-end.html https://github.com/open-telemetry/opentelemetry.io/pull/5400#discussion_r1836755079 :
@@ -2,3 +2,4 @@ {{ partial "script.html" (dict "src" "js/tracing.js") -}} {{ end -}} {{ partial "script.html" (dict "src" "js/navScroll.js") -}} +{{ partial "script.html" (dict "src" "js/stickySearch.js") -}}
⬇️ Suggested change
-{{ partial "script.html" (dict "src" "js/stickySearch.js") -}}
This will not be necessary anymore when you have moved the stickySearch.js to be included in the registrySearch.js
— Reply to this email directly, view it on GitHub https://github.com/open-telemetry/opentelemetry.io/pull/5400#pullrequestreview-2427426044, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5F4OZ4G5YCCK4GHSZVNEV32AC5NJAVCNFSM6AAAAABP4U6OHWVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDIMRXGQZDMMBUGQ . You are receiving this because you were mentioned.Message ID: @.***>
Btw, this is what it looks like on mobile:
I don't think that we want such a floating search form on mobile.
Given #5331, we might not want this on desktop either.
Thoughts @svrnm et all?
Yes true i was contemplating on a way to adjust the Search form UI on mobile @chalin
Btw, this is what it looks like on mobile:
I don't think that we want such a floating search form on mobile.
Given #5331, we might not want this on desktop either.
Thoughts @svrnm et all?
What do you think of the idea of displaying a search icon alone on mobile which is sticky of course and on user clicking on the icon it smoothly reveals the contents of the searchform, that way its less congested for mobile? @chalin
let's focus on the scroll to top functionality for now, and revisit this one later. I agree with @chalin that maybe having one of the 2 solutions should be enough
let's focus on the scroll to top functionality for now, and revisit this one later. I agree with @chalin that maybe having one of the 2 solutions should be enough
Noted mentor.