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

Scrolling bug in HCD left nav menu #7551

Merged
merged 8 commits into from May 15, 2024

Conversation

RileySeaburg
Copy link
Member

@RileySeaburg RileySeaburg commented May 9, 2024

Summary

Fixes the guide sidenav styling bug discovered in #7544.

Preview

Link to Preview

Solution

Refactored code to use getBoundingClientRect.top with window.scrollY to get the distance from the top of the page for each heading to apply the highlight style.

How To Test

  1. Go to Link to Preview
  2. Scroll
  3. Notice the scroll bar update and not skip any headings

Dev Checklist

  • PR has correct labels
  • A11y testing (voice over testing, meets WCAG, run axe tools)
  • Code is formatted properly

RileySeaburg and others added 3 commits May 9, 2024 15:56
Fix title formatting
- Adds a development mode that allows easier debugging of JavaScript
@RileySeaburg RileySeaburg added Dev: frontend ideas and issues related to the presentation layer of the site Dev: Design labels May 9, 2024
@RileySeaburg RileySeaburg self-assigned this May 9, 2024
@RileySeaburg RileySeaburg added this to In Production in Digital.gov Content via automation May 9, 2024
Copy link

github-actions bot commented May 9, 2024

🔍 Preview in Federalist

@RileySeaburg
Copy link
Member Author

@nick-mon1 this is all set.

@nick-mon1 nick-mon1 changed the title Rs bug formatting skipped for heading Scrolling bug in HCD left nav menu May 13, 2024
Copy link
Contributor

@nick-mon1 nick-mon1 left a comment

Choose a reason for hiding this comment

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

content/guides/hcd/design-concepts/simple-is-hard.md Outdated Show resolved Hide resolved
themes/digital.gov/src/js/guide-sidenav.js Outdated Show resolved Hide resolved
themes/digital.gov/src/js/guide-sidenav.js Outdated Show resolved Hide resolved
themes/digital.gov/src/js/guide-sidenav.js Show resolved Hide resolved
ToniBonittoGSA
ToniBonittoGSA previously approved these changes May 14, 2024
Copy link
Contributor

@nick-mon1 nick-mon1 left a comment

Choose a reason for hiding this comment

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

Cleaned up the comments for the heading math calculations to be clearer.

@ToniBonittoGSA ToniBonittoGSA merged commit 61a2182 into main May 15, 2024
8 checks passed
Digital.gov Content automation moved this from In Production to Published week 18 May 15, 2024
@ToniBonittoGSA ToniBonittoGSA deleted the rs-bug-formatting-skipped-for-heading branch May 15, 2024 20:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Dev: Design Dev: frontend ideas and issues related to the presentation layer of the site
Projects
Digital.gov Content
  
Published week 18
Development

Successfully merging this pull request may close these issues.

None yet

3 participants