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

Updates global sidebar to use rem instead of px #14351

Conversation

gcamacho079
Copy link
Contributor

Description

When users increase font size by 200%, the badge icon overlaps the navigation icon. This PR updates sizes and widths to use rem so that the notification icon doesn't overlap the icon at 200% zoom.

In addition, it changes the breakpoints for the layout to use rem instead of px widths so that font size zoom triggers a shift to the mobile layout, increasing the screen real estate.

Related issues

@gcamacho079 gcamacho079 added the accessibility 👤 features related to accessibility label Feb 9, 2024
@gcamacho079
Copy link
Contributor Author

@brianjhanson was hoping for your input and a once-over on this one. I noticed that when browser/font zoom triggers the mobile sidebar layout, the data-sidebar attribute on <body> may still be set to collapsed, so the labels aren’t visible. I was thinking we'd also need to call the expand/collapse methods in the toggleNav function - thoughts?

@brianjhanson
Copy link
Contributor

@gcamacho079 fixed in f62e9cb. The rule governing the grid of nav-items wasn't in a media query which caused things to get out of whack.

@gcamacho079 gcamacho079 marked this pull request as ready for review February 14, 2024 16:47
@gcamacho079
Copy link
Contributor Author

@gcamacho079 fixed in f62e9cb. The rule governing the grid of nav-items wasn't in a media query which caused things to get out of whack.

Thank you so much, Brian! 👍🏼

Lupe Camacho and others added 3 commits February 14, 2024 13:05
…ollapsed-navigation-mode

# Conflicts:
#	src/web/assets/cp/dist/css/cp.css
#	src/web/assets/cp/dist/css/cp.css.map
[ci skip]
@brandonkelly brandonkelly merged commit 12db185 into 5.0 Feb 15, 2024
@brandonkelly brandonkelly deleted the feature/acc-360-when-zooming-text-to-200-in-collapsed-navigation-mode branch February 15, 2024 20:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility 👤 features related to accessibility
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants