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.

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

Code blocks should not be collapsed. #22

Closed
tellyworth opened this issue May 27, 2022 Discussed in #4 · 2 comments · Fixed by #88 or #100
Closed

Code blocks should not be collapsed. #22

tellyworth opened this issue May 27, 2022 Discussed in #4 · 2 comments · Fixed by #88 or #100
Assignees
Labels
[Component] Syntax Highlighting Related to the code snippets & syntax highlighter ui

Comments

@tellyworth
Copy link
Contributor

Discussed in #4

Originally posted by StevenDufresne May 23, 2022
When we provide code for users, we should assume that all code is relevant and that it's better to see all the code than just a portion of it. I'm sure there are instances where functions are too long. In those cases, maybe we can collapse, or consider not showing the block.

Screenshot

@tellyworth tellyworth added the ui label May 27, 2022
@StevenDufresne
Copy link
Contributor

StevenDufresne commented May 30, 2022

Huddle Chat Notes:

  • At the very least increase the number of lines shown.
    • Comments should probably have a lower limit than the official doc blocks
  • Could add better logic, for example:
    • <= 15 lines, show all
    • > 15 lines < 30, show expand button
    • > 30 lines, show 20 lines, show expand button
  • Ren: Do we need to have a link below the blocks that does the collapsing? Once you expand, the link disappears to the bottom of the page.
    • Can we maybe click on the block itself to expand/collapse? Maybe a toggle in a different location?

@renintw renintw self-assigned this May 30, 2022
@ryelle ryelle added the [Component] Syntax Highlighting Related to the code snippets & syntax highlighter label Jun 1, 2022
@ryelle
Copy link
Contributor

ryelle commented Jun 1, 2022

An example of collapse/expand in a different location: https://docs.docker.com/engine/api/v1.41/#operation/ContainerList

Screen Shot 2022-06-01 at 11 18 25 AM

Can we maybe click on the block itself to expand/collapse?

For accessibility this would be very tricky to implement, and could have a negative impact on copying the code. Ideally the expand & collapse actions would be buttons with just the "expand" or "collapse" label.

renintw added a commit that referenced this issue Jun 10, 2022
* Fix button not sticky, and overlapping

* Increase number of lines shown based on discussion

See #22 (comment).

* Inject buttons before the `pre`, style like a frame header

* Remove unused CSS attributes

Co-authored-by: Kelly Dwan <[email protected]>
johnolson2219 pushed a commit to johnolson2219/dev_wpMed that referenced this issue Aug 26, 2023
* Fix button not sticky, and overlapping

* Increase number of lines shown based on discussion

See WordPress/wporg-developer#22 (comment).

* Inject buttons before the `pre`, style like a frame header

* Remove unused CSS attributes

Co-authored-by: Kelly Dwan <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Component] Syntax Highlighting Related to the code snippets & syntax highlighter ui
Projects
None yet
4 participants