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

Password modal z-index #565

Merged
merged 2 commits into from
Sep 9, 2021
Merged

Password modal z-index #565

merged 2 commits into from
Sep 9, 2021

Conversation

ludoboludo
Copy link
Contributor

Why are these changes introduced?

Fixes #557

What approach did you take?

Updated the z-index value of the .modal__content to 3 instead of 1.

I added all the sections available on the password page and test how it played with the modal. A z-index: 3; seemed to suffice to resolve the issue.

Other considerations

Demo links

Checklist

To test
In the theme editor, go to the password page and add sections, then open the modal by clicking on Enter password and see if anything shows up on top of it.

@tauthomas01 tauthomas01 self-assigned this Sep 7, 2021
tauthomas01
tauthomas01 previously approved these changes Sep 7, 2021
Copy link
Contributor

@tauthomas01 tauthomas01 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.

@KaichenWang KaichenWang self-assigned this Sep 7, 2021
@KaichenWang KaichenWang self-requested a review September 7, 2021 15:39
KaichenWang
KaichenWang previously approved these changes Sep 7, 2021
Copy link
Contributor

@KaichenWang KaichenWang 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. One element that might still overlap with the modal is the featured product desktop share popup (.share-button__fallback).

Screen Shot 2021-09-07 at 11 44 27 AM

@ludoboludo ludoboludo dismissed stale reviews from KaichenWang and tauthomas01 via 20f2259 September 7, 2021 18:05
@@ -1708,7 +1708,7 @@ input[type='checkbox'] {
right: 0;
bottom: 0;
background: rgb(var(--color-background));
z-index: 1;
z-index: 4;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

this class is also used on the search modal from the header but from what I'm seeing it doesn't have any negative impact 🤔

@ludoboludo
Copy link
Contributor Author

Good find @KaichenWang.

I also noticed that the styling was duplicated in section-password.css so I removed it from there.

cc: @tauthomas01

Copy link
Contributor

@KaichenWang KaichenWang left a comment

Choose a reason for hiding this comment

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

Tested and looks good

@ludoboludo ludoboludo merged commit 6888fc9 into main Sep 9, 2021
@ludoboludo ludoboludo deleted the password-zindex branch September 9, 2021 21:08
@martinamarien martinamarien mentioned this pull request Sep 13, 2021
phapsidesGT pushed a commit to Gravytrain-UK/gt-shopify-dawn-theme that referenced this pull request Sep 3, 2024
* Password modal z-index

* update to 4 based on review
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Password Page: Z index issue on Password overlay
3 participants