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

fix(sidebar): unify sections by declaring them with CSS classes #9930

Merged
merged 7 commits into from Apr 5, 2024

Conversation

caugner
Copy link
Contributor

@caugner caugner commented Nov 2, 2023

Summary

Fixes #9917.

Problem

  1. Some sidebars contain unlinked section titles, and these were positioned differently than linked section titles.
  2. Linked section titles were inconsistently created by nesting <a> and <strong> within each other.
  3. Overall, the spacing of section titles was inconsistent.

Solution

  1. Use the existing CSS class no-link to add missing padding to unlinked section titles (all links in the sidebar already have additional padding).
  2. Add the CSS class section for sidebar section titles and remove <strong> tags.
  3. Set margin-top: 1.5rem for all section titles (increases spacing for most, decreases spacing slightly for some).

Note: This has the (positive?) side-effect that section titles are now also highlighted if they are the current page.


Screenshots

Macro Before After
CSSRef image image
HTMLSidebar image image
HTTPSidebar image image
JSRef image image
MathMLRef image image
SVGRef image image

How did you test this change?

Ran yarn && yarn dev locally and looked at the following pages:

Link section titles have two additional CSS properties that caused
them to be positioned differently than pure text section titles.
@caugner caugner added involves: UX Requires the attention of the UX team. sidebar/toc Sidebar and table of contents layout Issues related to alignment, positioning and spacing/margin/padding refactor Refactorings labels Nov 2, 2023
@caugner caugner requested a review from a team as a code owner November 2, 2023 13:13
@github-actions github-actions bot added the macros tracking issues related to kumascript macros label Nov 2, 2023
@caugner
Copy link
Contributor Author

caugner commented Apr 4, 2024

FYI @argl @fiji-flo I checked and no new occurrences of <strong> have been introduced in sidebars since creating this PR.

Copy link
Contributor

@argl argl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, love the rigorous combing through the sidebar markup, making all a bit simpler.

@caugner caugner merged commit b5bb96e into main Apr 5, 2024
16 checks passed
@caugner caugner deleted the fix-sidebar-sections branch April 5, 2024 07:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
idle involves: UX Requires the attention of the UX team. layout Issues related to alignment, positioning and spacing/margin/padding macros tracking issues related to kumascript macros refactor Refactorings sidebar/toc Sidebar and table of contents
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Docs/Web/CSS sidebar contains inconsistent spacing between sections
2 participants