Fix layout on iOS, prevent zoom on iOS 10+, fix input to use tel instead of...

Fix layout on iOS, prevent zoom on iOS 10+, fix input to use tel instead of number for leading zeros

Fix layout on iOS, prevent zoom on iOS 10+, fix input to use tel instead of...
361fbc68 · Greg Fodor · 7c576218 · 361fbc68 · 361fbc68 · 361fbc68
Commit 361fbc68 authored 6 years ago by Greg Fodor
--- a/src/assets/stylesheets/link.scss
+++ b/src/assets/stylesheets/link.scss
@@ -108,6 +108,7 @@ a {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
+  text-align: center;
 }
 :local(.keypad-button) {
@@ -170,7 +171,7 @@ a {
  margin: 0;
  font-size: 64pt;
  border: 0;
-  width: 225px;
+  width: 295px;
  letter-spacing: 0.08em;
  text-align: center;
 }

--- a/src/hub.js
+++ b/src/hub.js
@@ -69,6 +69,7 @@ import UIRoot from "./react-components/ui-root";
 import HubChannel from "./utils/hub-channel";
 import LinkChannel from "./utils/link-channel";
 import { connectToReticulum } from "./utils/phoenix-utils";
+import { disableiOSZoom } from "./utils/disable-ios-zoom";
 import "./systems/personal-space-bubble";
 import "./systems/app-mode";
@@ -133,6 +134,8 @@ if (!isBotMode) {
  registerTelemetry();
 }
+disableiOSZoom();
 AFRAME.registerInputBehaviour("trackpad_dpad4", trackpad_dpad4);
 AFRAME.registerInputBehaviour("joystick_dpad4", joystick_dpad4);
 AFRAME.registerInputBehaviour("msft_mr_axis_with_deadzone", msft_mr_axis_with_deadzone);

--- a/src/link.html
+++ b/src/link.html
@@ -7,6 +7,7 @@
    <link rel="shortcut icon" type="image/png" href="/favicon.ico"/>
    <title>Enter Code | Hubs by Mozilla</title>
    <link href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,300i,400,400i,700" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 </head>
 <body>

--- a/src/react-components/link-root.js
+++ b/src/react-components/link-root.js
@@ -6,10 +6,12 @@ import en from "react-intl/locale-data/en";
 import { lang, messages } from "../utils/i18n";
 import classNames from "classnames";
 import styles from "../assets/stylesheets/link.scss";
+import { disableiOSZoom } from "../utils/disable-ios-zoom";
 const MAX_DIGITS = 4;
 addLocaleData([...en]);
+disableiOSZoom();
 class LinkRoot extends Component {
  static propTypes = {
@@ -106,7 +108,8 @@ class LinkRoot extends Component {
              <div className={styles.enteredDigits}>
                <input
                  className={styles.digitInput}
-                  type="number"
+                  type="tel"
+                  pattern="[0-9]*"
                  value={this.state.enteredDigits}
                  onChange={ev => {
                    this.setState({ enteredDigits: ev.target.value });

--- a/src/utils/disable-ios-zoom.js
+++ b/src/utils/disable-ios-zoom.js
+import MobileDetect from "mobile-detect";
+const mobiledetect = new MobileDetect(navigator.userAgent);
+export function disableiOSZoom() {
+  if (!mobiledetect.is("iPhone") && !mobiledetect.is("iPad")) return;
+  let lastTouchAtMs = 0;
+  document.addEventListener("touchmove", ev => {
+    if (ev.scale === 1) return;
+    ev.preventDefault();
+  });
+  document.addEventListener("touchend", ev => {
+    const now = new Date().getTime();
+    const isDoubleTouch = now - lastTouchAtMs <= 300;
+    lastTouchAtMs = now;
+    if (isDoubleTouch) {
+      ev.preventDefault();
+    }
+  });
+}