Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Provide a better visualization for collapsing long blocks of code/output #5405

Open
svrnm opened this issue Oct 15, 2024 · 9 comments · May be fixed by #5463
Open

Provide a better visualization for collapsing long blocks of code/output #5405

svrnm opened this issue Oct 15, 2024 · 9 comments · May be fixed by #5463
Labels
help wanted Extra attention is needed ux

Comments

@svrnm
Copy link
Member

svrnm commented Oct 15, 2024

We are currently using <details> and <summary> to wrap long code blocks or text outputs. An example can be seen here:

Code: https://github.com/open-telemetry/opentelemetry.io/blob/main/content/en/docs/languages/js/getting-started/nodejs.md?plain=1#L254
Output: https://opentelemetry.io/docs/languages/js/getting-started/nodejs/#run-the-instrumented-app

Screenshot:
Screenshot 2024-10-15 at 12 21 45

This is really hard to see and easily overseen when someone scrolls through the page, especially when they are looking for the expected output or a code snippet.

It would be great to have a better visualization, e.g. the first few lines are shown but the rest is hidden away with an "unfold" button. There are plenty of options, but it would be good to have something that makes it visually clear that there is something behind that "tiny arrow"

Special Note for Outreachy Contributors: if you want to work on this issue, please make sure that you have completed the small steps and at least one assigned issue as outlined here: #5290
@svrnm svrnm added ux outreachy Issues for Outreachy Participants labels Oct 15, 2024
@svrnm svrnm mentioned this issue Oct 15, 2024
Merged
@kemsguy7
Copy link

@svrnm , can you please assign this to me?

@svrnm
Copy link
Member Author

svrnm commented Oct 15, 2024

@svrnm , can you please assign this to me?

Let's finish #5403 first, then you can work on this one

@kemsguy7
Copy link

@svrnm , can you please assign this to me?

Let's finish #5403 first, then you can work on this one

Please can i work on this now?

@svrnm
Copy link
Member Author

svrnm commented Oct 16, 2024

@svrnm , can you please assign this to me?

Let's finish #5403 first, then you can work on this one

Please can i work on this now?

Yes! I suggest you start by making some suggestions how you would implement that or what ideas you have to address the issue

@kemsguy7
Copy link

@svrnm , here are my suggestions for improvement

1Preview with Gradient Fade:

  • Show the first 3-4 lines of content by default
  • Add a gradient fade-out effect at the bottom of the preview
  • Use a prominent "Show More" button below the fade
  • This gives users a glimpse of the content while indicating there's more

2. Visual Indicators:

  • Add an icon (like a chevron or expand arrow) that rotates on expansion
  • Use a distinctive background color or border to make the collapsible section stand out
  • Include a label showing content type (e.g., "Console Output", "Code Sample")
  • Add content length indicator (e.g., "120 lines")

3.Interactive Elements:

  • Add a copy button that's always visible, even when collapsed
  • Include syntax highlighting in the preview
  • Smooth expand/collapse animation
  • Optional: Add a mini-map preview on hover

4.Accessibility Improvements:
Clear focus states
Keyboard navigation support with javascript
Screen reader friendly labels
Proper ARIA attributes

Kindly let me know if I can proceed with my Implementation, thanks

@svrnm
Copy link
Member Author

svrnm commented Oct 22, 2024

@kemsguy7 this sounds good to me. Please start with focusing on 1 Preview with Gradient Fade in a pull request, if we get this working, we can address the other few additional improvements.

@kemsguy7
Copy link

kemsguy7 commented Oct 22, 2024 •
edited
Loading

@kemsguy7 this sounds good to me. Please start with focusing on 1 Preview with Gradient Fade in a pull request, if we get this working, we can address the other few additional improvements.

Alright mentor, will will send a PR soon

@kemsguy7 kemsguy7 linked a pull request Oct 23, 2024 that will close this issue
Open
@chalin
Copy link
Contributor

chalin commented Nov 2, 2024

@svrnm As I mentioned in #5463, I'd prefer a simpler solution. We can probably, for now, make due with CSS styling over <details> elements. For example, I've styled the first of the two elements shown in this screenshot (of course, this is a POC, color and border can be tweaked):

image

/cc @jack-berg

@svrnm
Copy link
Member Author

svrnm commented Nov 4, 2024

@chalin let's talk about this at the next SIG meeting (Monday next week)

@svrnm svrnm added help wanted Extra attention is needed and removed outreachy Issues for Outreachy Participants labels Nov 6, 2024
@svrnm svrnm linked a pull request Nov 6, 2024 that will close this issue
collapse block fix #5463
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted Extra attention is needed ux
Projects
SIG Comms: PRs & Issues
Status: No status
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

collapse block fix kemsguy7/opentelemetry.io
3 participants
@svrnm @chalin @kemsguy7