scroll to top functionality #5620

bintus-ux · 2024-11-18T11:52:22Z

Overview
The Scroll to Top feature enhances the user experience by providing an intuitive way for users to quickly return to the top of the registry page. This is particularly useful for pages with extensive content or long scroll lengths, such as the OpenTelemetry registry page, where users frequently navigate through dense information.

Note: This implementation addresses the same functionality described in an earlier PR (issue number #5331) for the Scroll to Top feature. However, due to issues with submodules in the previous PR, I have created this new PR to ensure proper integration of the feature. The previous PR serves as a reference for the original implementation.

linux-foundation-easycla · 2024-11-18T11:52:28Z

The committers listed above are authorized under a signed CLA.

✅ login: bintus-ux / name: Ezerike Caleb Chikere (f9efe04, ef86638, 2d93e09, fed3dd0, 4721fb3, 5e51f8b, 92598a3, 6f0b308, 2a306b2, 518293f, 40da502, 794e07b, 592568c, 7ece877, fa49f48, 30fcb29, cb6f411)

svrnm

thanks. See some comments

layouts/partials/hooks/body-end.html

layouts/shortcodes/ecosystem/registry/search-form.html

bintus-ux · 2024-11-19T12:48:07Z

Successfully ran npm run check:format.

chalin · 2024-11-19T13:04:16Z

assets/scss/_registry.scss

+
+// Scroll-to-top button styling
+.scroll-container {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.scroll-btn {
+  background-color: #007bff;
+  color: white;
+  bottom: 40px;
+  right: 40px;
+  display: none;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  border-radius: 50%;
+  position: fixed;
+}


Since these styles are no longer confined to the registry, they should be moved. I think that it's fine to move it to the end of assets/scss/_styles_project.scss.

Done. @chalin

chalin · 2024-11-19T13:08:01Z

layouts/partials/hooks/body-end.html

@@ -2,3 +2,48 @@
  {{ partial "script.html" (dict "src" "js/tracing.js") -}}
 {{ end -}}
 {{ partial "script.html" (dict "src" "js/navScroll.js") -}}
+


Move all of this extra content into it's own partial, say layouts/partials/scroll-to-top.html.

As for the JS, and I think I mentioned this before, do the following:

Move the JS into its own file, say, assets/js/scrollToTop.js

Use layouts/partials/script.html to bring in the script content.

But @svrnm said i handle this differently already

@bintus-ux can you give more details on your concerns on @chalin's requests? To me they sound like a further improvement on what we have so far.

Yeah all he just suggested was what i did initially already, i had the scrollToTop.js file in the js folder but you suggested i implement the javascript code on the body-end.html file that way getting rid of the scrollToTop.js file seeing as it was no longer needed, but i am confused now @svrnm

My apologies @svrnm @chalin i took my time to re-read the whole conversation and realized i got it mixed up, totally understand now, sorry for the misunderstanding (i have been feverish the past few days). Implementing the changes right now. Thanks so much.

@bintus-ux no worries, everyone of us is misreading things from time to time and from own experience I know that beign a non-native english speaker adds an additional source of potential misunderstanding, that's why it is always good to ask more questions!

I hope you feel better now!

Thank you so much for the words mentor, and yes i'm recuperating fast!

…s/scss/_styles_project.scss

…roll-to-top.html and scrollToTop.js file'

theletterf

I think it should be hidden in mobile resolutions (using a CSS media declaration to set it it display:none; if width is lower than n pixels)

Also, NN recommends to add a text label, too, and make it appear only after 3 or 4 page scrolls https://www.nngroup.com/articles/back-to-top/

bintus-ux · 2024-11-19T16:16:11Z

I think it should be hidden in mobile resolutions (using a CSS media declaration to set it it display:none; if width is lower than n pixels)

Also, NN recommends to add a text label, too, and make it appear only after 3 or 4 page scrolls https://www.nngroup.com/articles/back-to-top/

Well noted, on it

bintus-ux · 2024-11-20T13:16:29Z

In this update, I hid the "Top" label text on mobile devices using a CSS media query that sets it to display: none when the screen width is below a specified pixel value (e.g., 768px). Additionally, I implemented functionality where the scroll-to-top button disappears after 2-3 seconds of inactivity, as per your feedback. I also made the text label appear only after the user has scrolled 3-4 pages, following NN's recommendation for improved usability. I would appreciate the team's review please. @svrnm @chalin @theletterf

svrnm · 2024-11-26T10:36:28Z

@bintus-ux thanks! A few observations using the preview @ https://deploy-preview-5620--opentelemetry.netlify.app/

The "Top" does not show up for me. Also could this read "Go to top" or would this be to crowded?
We might want to add an exception for / since it feels off on that page

bintus-ux · 2024-11-26T10:38:51Z

@bintus-ux thanks! A few observations using the preview @ https://deploy-preview-5620--opentelemetry.netlify.app/

The "Top" does not show up for me. Also could this read "Go to top" or would this be to crowded?

We might want to add an exception for / since it feels off on that page

Indeed I initially used the text “Go to top” but it appeared crowded so I improvised

svrnm · 2024-11-26T11:23:40Z

@bintus-ux thanks! A few observations using the preview @ deploy-preview-5620--opentelemetry.netlify.app

The "Top" does not show up for me. Also could this read "Go to top" or would this be to crowded?

We might want to add an exception for / since it feels off on that page

Indeed I initially used the text “Go to top” but it appeared crowded so I improvised

Top similar to the up arrow might not be conclusive to every user, that's why there is the recommendation to go with "Back to Top"

bintus-ux · 2024-11-26T11:25:11Z

@bintus-ux thanks! A few observations using the preview @ https://deploy-preview-5620--opentelemetry.netlify.app/

The "Top" does not show up for me. Also could this read "Go to top" or would this be to crowded?

We might want to add an exception for / since it feels off on that page

Indeed it doesn’t come up for mobile as I was

@bintus-ux thanks! A few observations using the preview @ deploy-preview-5620--opentelemetry.netlify.app

The "Top" does not show up for me. Also could this read "Go to top" or would this be to crowded?

We might want to add an exception for / since it feels off on that page

Indeed I initially used the text “Go to top” but it appeared crowded so I improvised

Top similar to the up arrow might not be conclusive to every user, that's why there is the recommendation to go with "Back to Top"

yes indeed I’m on it

bintus-ux · 2024-11-28T08:47:06Z

Good day @svrnm , I’ve been trying to except / using the check {{ if not .IsHome }}
{{ partial "scroll-to-top.html" }}
{{ end }} in the body-end.html file which works but it happens to except the /ecosystem/registry page from using the scroll to top button as well, seems to take it also to be a home page or so.

svrnm · 2024-11-28T09:51:44Z

Good day @svrnm , I’ve been trying to except / using the check {{ if not .IsHome }} {{ partial "scroll-to-top.html" }} {{ end }} in the body-end.html file which works but it happens to except the /ecosystem/registry page from using the scroll to top button as well, seems to take it also to be a home page or so.

First of all that's actually a good way to fix that. Let's see if we can get this working (with this or any other check). Can you push the code changes so we can take a look as well? Thx

bintus-ux · 2024-11-28T10:31:45Z

Gotcha, on it.

bintus-ux · 2024-12-04T19:14:36Z

@svrnm i managed to use JavaScript to restrict displaying the scroll to top button on the home page, also updated the UI of the button and now make use of the text “Back to Top” which comes up on 3-4 scrolls and as well comes up on mobile, please do give a look mentor!

svrnm

thanks! some inline comments.

Also can you run npm run fix:all locally, you have some files changed and some submodules updated that shouldn't be there, this should help with that

svrnm · 2024-12-05T09:41:59Z

assets/js/scrollToTop.js

+      // Hide the button after 2-3 seconds of inactivity
+      hideTimeout = setTimeout(() => {
+        scrollToTopBtn.classList.remove("visible");
+      }, 2500);


Suggested change

}, 2500);

}, 5000);

For me 2.5 seconds is to early, I suggest 5 or even more seconds for the timeout

svrnm · 2024-12-05T09:42:52Z

assets/scss/_styles_project.scss

+    &: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;
+    }


you might want to add a mode for dark mode as well

svrnm · 2024-12-05T09:43:07Z

layouts/partials/scroll-to-top.html

+<div class="scroll-container">
+  <button id="scrollToTopBtn" class="scroll-btn btn" aria-label="Scroll to top" title="Scroll to top">
+    <i class="fas fa-chevron-up scroll-icon"></i>
+    <span class="scroll-label">Back to Top</span>


this is never visible for me

It comes up after 3 to 4 scrolls which is mostly for long content pages did you try such page, maybe the registry page? @svrnm

what's the purpose of showing the arrow earlier than the text?

For the sake of i18n, I'd drop the English label. I think that using an icon is clear enough. WDYT @svrnm?

As pointed out by @theletterf i ought to only display the text after 3-4 page scrolls so I decided to only display the arrow until the page scroll triggers smoothly transitioning into view the label text? Or how do you suggest I go about it @svrnm

having that label is an accessibility feature for me, not everyone might immediately understand the meaning of this button/we can not assume that since we understand it everyone does. And again, that's also why I dislike the 3-4 page scrolls until it shows up.

Although I have to admit I didn't think about the localized pages.

Since we have conflicting opinions between maintainers here, I suggest we do not over-engineer the problem for now and block @bintus-ux any longer, so let's do the following:

Remove the "Back to top" label for now

Raise a new issue that we want to have it added to the scroll to top functionality.

For me this would be good enough, wdyt? @chalin @theletterf

Yes, good plan! 🙌🏻

Btw, the need-of-rebase issue and one suggestion I made in #5620 (review) are still pending.

Yea that sounds good, fixes will be done today, thanks again!

bintus-ux · 2024-12-05T14:39:43Z

Alright I will get to the changes

chalin · 2024-12-05T20:48:11Z

/fix:submodule

opentelemetrybot · 2024-12-05T20:48:24Z

You triggered fix:submodule action run at https://github.com/open-telemetry/opentelemetry.io/actions/runs/12187808976

opentelemetrybot · 2024-12-05T20:48:30Z

fix:submodule failed or was cancelled. For details, see https://github.com/open-telemetry/opentelemetry.io/actions/runs/12187808976.

chalin

Hi @bintus-ux - thanks for the continued work on this PR. See inline comments.

chalin · 2024-12-05T20:49:50Z

layouts/partials/scroll-to-top.html

+<div class="scroll-container">
+  <button id="scrollToTopBtn" class="scroll-btn btn" aria-label="Scroll to top" title="Scroll to top">
+    <i class="fas fa-chevron-up scroll-icon"></i>
+    <span class="scroll-label">Back to Top</span>


For the sake of i18n, I'd drop the English label. I think that using an icon is clear enough. WDYT @svrnm?

chalin · 2024-12-05T20:49:57Z

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" }}


Suggested change

{{ partial "scroll-to-top.html" }}

{{ partial "scroll-to-top.html" -}}

chalin · 2024-12-05T20:51:52Z

content-modules/opentelemetry-java-examples

This submodule (content-modules/opentelemetry-java-examples) should not be modified. You'll need:

Pull down the latest main branch

Rebase your PR branch from the latest from main, and resolve any conflicts (as there are currently conflicts).

Gotcha, on it mentor. Thanks

bintus-ux · 2024-12-15T07:37:16Z

I apologise for the inactivity this week,caught up with in real life activities as i recently lost my dad, but will try making the fixes onwards now.

bintus-ux · 2024-12-15T07:38:29Z

i think i broke a couple files on rushing to fix, maybe making a new PR with your suggested changes would not be bad @svrnm ?

svrnm · 2024-12-16T08:26:37Z

i think i broke a couple files on rushing to fix, maybe making a new PR with your suggested changes would not be bad @svrnm ?

a new PR might be a good idea 👍

chalin · 2024-12-16T19:31:48Z

a new PR might be a good idea 👍

Yes. Please reference the new PR in this one before / while closing it.

bintus-ux requested a review from a team as a code owner November 18, 2024 11:52

bintus-ux force-pushed the opentelemetry-devbranch1 branch from 596ed56 to 3348c39 Compare November 18, 2024 12:19

bintus-ux mentioned this pull request Nov 18, 2024

add scroll to top button #5331

Closed

svrnm requested changes Nov 18, 2024

View reviewed changes

layouts/partials/hooks/body-end.html Outdated Show resolved Hide resolved

layouts/partials/hooks/body-end.html Outdated Show resolved Hide resolved

layouts/shortcodes/ecosystem/registry/search-form.html Outdated Show resolved Hide resolved

bintus-ux and others added 6 commits November 19, 2024 07:44

scroll to top functionality

92598a3

'scroll to top functionality fix'

592568c

'fix'

ef86638

'fix'

30fcb29

reverting change in body-end.html

4721fb3

updated _registry.scss file

2a306b2

chalin force-pushed the opentelemetry-devbranch1 branch from c1daa1a to 2a306b2 Compare November 19, 2024 12:44

bintus-ux requested a review from svrnm November 19, 2024 12:50

chalin requested changes Nov 19, 2024

View reviewed changes

bintus-ux added 3 commits November 19, 2024 14:35

'moving scrollToTop css code from assets/scss/_registry.scss to asset…

2d93e09

…s/scss/_styles_project.scss

'fix'

5e51f8b

'fix for scrollToTop creating it's own partial in layouts/partials/sc…

fed3dd0

…roll-to-top.html and scrollToTop.js file'

opentelemetrybot requested a review from a team November 19, 2024 15:50

'format fix'

f9efe04

theletterf reviewed Nov 19, 2024

View reviewed changes

opentelemetrybot requested a review from a team November 19, 2024 15:59

fix for scrolltotop button

6f0b308

bintus-ux requested review from theletterf and chalin November 22, 2024 16:05

svrnm requested changes Dec 5, 2024

View reviewed changes

chalin requested changes Dec 5, 2024

View reviewed changes

Update body-end.html

518293f

bintus-ux force-pushed the opentelemetry-devbranch1 branch from 0ce766f to 2b81dea Compare December 14, 2024 06:56

opentelemetrybot requested a review from a team December 14, 2024 06:56

bintus-ux force-pushed the opentelemetry-devbranch1 branch from 2b81dea to fdcd56b Compare December 15, 2024 06:12

Updated scroll-to-top functionality and styling

fa49f48

bintus-ux force-pushed the opentelemetry-devbranch1 branch from fdcd56b to fa49f48 Compare December 15, 2024 06:23

bintus-ux added 2 commits December 15, 2024 07:41

Remove existing opentelemetry-java-examples submodule

7ece877

Re-adding opentelemetry-java-examples submodule

794e07b

bintus-ux force-pushed the opentelemetry-devbranch1 branch from efed389 to 794e07b Compare December 15, 2024 07:14

bintus-ux added 2 commits December 15, 2024 08:17

Revert .gitmodules

40da502

fix

cb6f411

	{{ partial "scroll-to-top.html" }}
	{{ partial "scroll-to-top.html" -}}

scroll to top functionality #5620

Are you sure you want to change the base?

scroll to top functionality #5620

Conversation

bintus-ux commented Nov 18, 2024

linux-foundation-easycla bot commented Nov 18, 2024 • edited Loading

svrnm left a comment

Choose a reason for hiding this comment

bintus-ux commented Nov 19, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

theletterf left a comment

Choose a reason for hiding this comment

bintus-ux commented Nov 19, 2024

bintus-ux commented Nov 20, 2024

svrnm commented Nov 26, 2024

bintus-ux commented Nov 26, 2024

svrnm commented Nov 26, 2024

bintus-ux commented Nov 26, 2024

bintus-ux commented Nov 28, 2024

svrnm commented Nov 28, 2024

bintus-ux commented Nov 28, 2024

bintus-ux commented Dec 4, 2024

svrnm left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bintus-ux Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bintus-ux commented Dec 5, 2024

chalin commented Dec 5, 2024

opentelemetrybot commented Dec 5, 2024

opentelemetrybot commented Dec 5, 2024

chalin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bintus-ux commented Dec 15, 2024

bintus-ux commented Dec 15, 2024

svrnm commented Dec 16, 2024

chalin commented Dec 16, 2024

linux-foundation-easycla bot commented Nov 18, 2024 •

edited

Loading

bintus-ux Dec 5, 2024 •

edited

Loading