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.

Sign up for GitHub

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

Jump to bottom

Toggle element selector modal sidebar for small screens and zoom #11323

Merged
merged 23 commits into from
Jun 9, 2022
Merged

Toggle element selector modal sidebar for small screens and zoom #11323

merged 23 commits into from
Jun 9, 2022

Conversation

gcamacho079
Copy link
Contributor

@gcamacho079 gcamacho079 commented May 25, 2022 •
edited
Loading

Description

  • Updates the UI of element selector modals that have sidebars to include a sidebar toggle button when modal drops below a certain width (Resolves DEV-547)
  • Updates Craft.ui.createButton function to use html and id from config object

Mobile view of a selector modal with a sidebar hidden behind a hamburger menu toggle
Screenshot of sidebar toggled open. A close button is at the top right of the sidebar, and the content is pushed offscreen while the sidebar is open

Related issues

@linear
Copy link

linear bot commented May 25, 2022

DEV-547 Element selector modals with sidebars become unusable at 320px

When the screen width is 320px, the sidebar takes up most of the available space in the modal.

The sidebar should be narrowed, or stack above the element select area inside the modal.

Screen Shot 2022-04-19 at 08.46.28.png

Resolves CMS-191

@gcamacho079 gcamacho079 requested a review from brandonkelly May 26, 2022 19:46
@gcamacho079 gcamacho079 marked this pull request as ready for review May 26, 2022 19:46
@gcamacho079 gcamacho079 reopened this May 27, 2022
@gcamacho079 gcamacho079 linked an issue May 27, 2022 that may be closed by this pull request
Asset modal interface is unusable on mobile #3781
Closed
@gcamacho079 gcamacho079 added enhancement improvements to existing features accessibility 👤 features related to accessibility labels May 27, 2022
@gcamacho079 gcamacho079 closed this Jun 3, 2022
@gcamacho079 gcamacho079 reopened this Jun 3, 2022
@brandonkelly
Merge branch '4.1' into fix/modal-sidebar
67e3f3f 
# Conflicts:
#	src/web/assets/cp/dist/cp.js
#	src/web/assets/cp/dist/cp.js.map
#	src/web/assets/cp/dist/css/cp.css
#	src/web/assets/cp/dist/css/cp.css.map
#	src/web/assets/dashboard/dist/css/Dashboard.css.map
#	src/web/assets/garnish/dist/garnish.js
#	src/web/assets/garnish/dist/garnish.js.map
#	src/web/assets/login/dist/css/login.css
#	src/web/assets/login/dist/css/login.css.map
#	src/web/assets/pluginstore/dist/css/app.css
#	src/web/assets/pluginstore/dist/css/app.css.map
#	src/web/assets/pluginstore/dist/js/app.js
#	src/web/assets/pluginstore/dist/js/app.js.map
@gcamacho079
Copy link
Contributor Author

this one [this.$sidebarToggleBtn] is fine as-is!

this.$mainHeading, this.$mainHeader, this.$sidebarHeader are not set using the find method so I think the PR is good to go without the requested changes, but let me know if I misunderstood!

@gcamacho079 gcamacho079 requested a review from brandonkelly June 9, 2022 16:33
@brandonkelly
Merge branch '4.1' into fix/modal-sidebar
45f552c 
# Conflicts:
#	src/web/assets/cp/dist/cp.js
#	src/web/assets/cp/dist/cp.js.map
#	src/web/assets/cp/dist/css/cp.css
#	src/web/assets/cp/dist/css/cp.css.map
#	src/web/assets/cp/src/css/_main.scss
#	src/web/assets/edituser/dist/css/profile.css.map
#	src/web/assets/garnish/dist/garnish.js
#	src/web/assets/garnish/dist/garnish.js.map
@brandonkelly
Release note
873b7b2
@brandonkelly brandonkelly merged commit fb375ab into 4.1 Jun 9, 2022
@brandonkelly brandonkelly deleted the fix/modal-sidebar branch June 9, 2022 21:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@benjamindavid benjamindavid Awaiting requested review from benjamindavid

@nfourtythree nfourtythree Awaiting requested review from nfourtythree

@brandonkelly brandonkelly Awaiting requested review from brandonkelly

Assignees
No one assigned
Labels
accessibility 👤 features related to accessibility enhancement improvements to existing features
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Asset modal interface is unusable on mobile
2 participants
@gcamacho079 @brandonkelly