Skip to content

mobile usability of dismiss modal after successful log in #236

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

Closed
harlanlewis opened this issue Apr 24, 2020 · 4 comments · Fixed by #334
Closed

mobile usability of dismiss modal after successful log in #236

harlanlewis opened this issue Apr 24, 2020 · 4 comments · Fixed by #334
Labels
type: bug code to address defects in shipped code

Comments

@harlanlewis
Copy link

Issue:
After logging in, the modal does not have a visible target to dismiss it and continue using the site.

Device:
Using iPhone 7, Safari. I imagine this issue also affects other devices with similar viewports.

Steps:

  1. Inside the Log In modal (which covers the viewport on mobile as a faux page),
  2. when a user puts focus on a form field (email, password),
  3. the viewport zooms in slightly for the input to fill the screen width and scrolls to position it above the keyboard.
  4. After submitting the log in form successfully, the modal remains zoomed in.

Because the 'close' button is positioned horizontally outside of the zoomed-in form area, there is no visible way to dismiss the modal and return to the site. The zoom is subtle enough to be easily missed, making it appear that the site must be reloaded to continue.

IMG_0724

@peterp
Copy link

peterp commented May 13, 2020

I've also been thinking about this, the "LOGOUT" button is the thing that I want to tap on in this screen, even though it's the first thing I see directly after logging in.

image

@peterp
Copy link

peterp commented May 13, 2020

Maybe something like netlifyClient.login({ loginSuccessModal: false })

@cameronelliott
Copy link

cameronelliott commented Jul 20, 2020

I think this is an awesome contribution to the open source world by Netlify, and I really love the look of the widget.

But it seems like some users might accidentally 'click-thru' and then accidentally log-out after just logging in,
where you need to close the modal using the modal's small 'x' to close it, in order to continue.

It would be cool to make an option like in the previous comment.

@joaobraq
Copy link

joaobraq commented Jul 24, 2020

I have created hotfixes that solve the two problems described in this issue.

For the "iOS zoom problem" originally described by @harlanlewis, it is known that iOS will only zoom in input elements if their font-size is below 16px, therefore we can solve this by adding a bit of CSS to the iframe when the widget is opened:

netlifyIdentity.on('open', function() {
  var iframe = document.getElementById("netlify-identity-widget");
  if (iframe) {
    var iOSfix = iframe.contentWindow.document.createElement("style");
    iOSfix.innerText = "input { font-size: 16px!important }";
    iframe.contentWindow.document.body.appendChild(iOSfix);
  }
});

The effect this has on the design is minimal and I wonder if the community/maintainers would be open to officially changing the font-size to 16px:

16px

This has already been suggested in issue #151 and it seems like a good first issue for a PR (for myself included).

As for the quality of life improvement suggested by @peterp of auto-closing the modal on login, we can use a similar technique of accessing the DOM of the iframe to auto-click the close button when a login is made:

netlifyIdentity.on('login', function() {
  var iframe = document.getElementById("netlify-identity-widget");
  if (iframe) {
    var btnClose = iframe.contentWindow.document.querySelector(".btnClose");
    btnClose.click();
  }
});

A permanent solution which doesn't rely on a class name would be more desirable however and I support @peterp's suggestion of creating a flag.

jlengstorf added a commit that referenced this issue Jul 29, 2020
on iOS, inputs with font sizes below 16px are automatically zoomed in, which causes issues with page layouts and hides the close button for the widget modal. this change increases the input size to 16px to avoid the zoom on mobile devices

fix #236
@jlengstorf jlengstorf added the type: bug code to address defects in shipped code label Jul 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug code to address defects in shipped code
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants