From 361fbc68c3ea5755c491401e0dec2ee1a43d47db Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Wed, 16 May 2018 12:33:49 -0700
Subject: [PATCH] Fix layout on iOS, prevent zoom on iOS 10+, fix input to use
tel instead of number for leading zeros
---
src/assets/stylesheets/link.scss | 3 ++-
src/hub.js | 3 +++
src/link.html | 1 +
src/react-components/link-root.js | 5 ++++-
src/utils/disable-ios-zoom.js | 24 ++++++++++++++++++++++++
5 files changed, 34 insertions(+), 2 deletions(-)
create mode 100644 src/utils/disable-ios-zoom.js
diff --git a/src/assets/stylesheets/link.scss b/src/assets/stylesheets/link.scss
index 63da92c97..25140d22a 100644
--- 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;
}
diff --git a/src/hub.js b/src/hub.js
index f85a4980f..8bd8e2a29 100644
--- 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);
diff --git a/src/link.html b/src/link.html
index 8f44654c0..954061491 100644
--- 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>
diff --git a/src/react-components/link-root.js b/src/react-components/link-root.js
index 1ab8aa478..a1035bc53 100644
--- 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 });
diff --git a/src/utils/disable-ios-zoom.js b/src/utils/disable-ios-zoom.js
new file mode 100644
index 000000000..c2d17104a
--- /dev/null
+++ b/src/utils/disable-ios-zoom.js
@@ -0,0 +1,24 @@
+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();
+ }
+ });
+}
--
GitLab