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 #11881 Side navigation scrolling #11986

Closed
wants to merge 0 commits into from

Conversation

poju3185
Copy link
Contributor

@poju3185 poju3185 commented Mar 13, 2024

Summary

Fixes #11881
When the side nav was scrolled to its top or bottom limit, further scrolling attempts would unexpectedly propagate to the main content area, causing it to scroll instead. To resolve this issue, I've added the CSS property overscroll-behavior-y: contain; to the .side-nav-scrollable-area class, containing the scroll within the side nav and preventing it from affecting the main content area.

References

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Reviewer guidance

  1. Run the Kolibri Mac app on the browser
  2. Open the main side navigation
  3. Scroll, and observe the main page content does not also scrolling

Testing checklist

  • Contributor has fully tested the PR manually
  • If there are any front-end changes, before/after screenshots are included
  • Critical user journeys are covered by Gherkin stories
  • Critical and brittle code paths are covered by unit tests

PR process

  • PR has the correct target branch and milestone
  • PR has 'needs review' or 'work-in-progress' label
  • If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
  • If this is an important user-facing change, PR or related issue has a 'changelog' label
  • If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

  • Automated test coverage is satisfactory
  • PR is fully functional
  • PR has been tested for accessibility regressions
  • External dependency files were updated if necessary (yarn and pip)
  • Documentation is updated
  • Contributor is in AUTHORS.md
before.mov
after.mov

@poju3185 poju3185 changed the title Fix #11881 Fix #11881 Side navigation scrolling Mar 13, 2024
@LianaHarris360 LianaHarris360 self-requested a review March 14, 2024 14:04
Copy link
Member

@LianaHarris360 LianaHarris360 left a comment

Choose a reason for hiding this comment

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

Thank you for your work on this; the change looks good! Could you please retarget this pull request to the release-v0.16.x branch instead of develop so that this change can be included in the next planned patch?

@poju3185 poju3185 changed the base branch from develop to release-v0.16.x March 15, 2024 15:07
@github-actions github-actions bot added DEV: dev-ops Continuous integration & deployment DEV: renderers HTML5 apps, videos, exercises, etc. DEV: backend Python, databases, networking, filesystem... APP: Device Re: Device App (content import/export, facility-syncing, user permissions, etc.) APP: Facility Re: Facility App (user/class management, facility settings, csv import/export, etc.) APP: Learn Re: Learn App (content, quizzes, lessons, etc.) APP: Coach Re: Coach App (lessons, quizzes, groups, reports, etc.) APP: User Re: User app (sign-in, sign-up, user profile, etc.) APP: Setup Wizard Re: Setup Wizard (facility import, superuser creation, settings, etc.) DEV: tools Internal tooling for development SIZE: medium labels Mar 15, 2024
@poju3185 poju3185 closed this Mar 15, 2024
@poju3185
Copy link
Contributor Author

poju3185 commented Mar 15, 2024

@LianaHarris360, sorry I have to create another PR(#11992). This one was automatically closed when I was trying to retarget the release branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
APP: Coach Re: Coach App (lessons, quizzes, groups, reports, etc.) APP: Device Re: Device App (content import/export, facility-syncing, user permissions, etc.) APP: Facility Re: Facility App (user/class management, facility settings, csv import/export, etc.) APP: Learn Re: Learn App (content, quizzes, lessons, etc.) APP: Setup Wizard Re: Setup Wizard (facility import, superuser creation, settings, etc.) APP: User Re: User app (sign-in, sign-up, user profile, etc.) DEV: backend Python, databases, networking, filesystem... DEV: dev-ops Continuous integration & deployment DEV: frontend DEV: renderers HTML5 apps, videos, exercises, etc. DEV: tools Internal tooling for development SIZE: medium SIZE: very small
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Mac App: Opening the side navigation and scrolling activates scrolling for main page as well
2 participants