diff --git a/src/assets/stylesheets/link.scss b/src/assets/stylesheets/link.scss index 9e56a1081c1dfe8d1815cecd3e0d7977285dffc2..ee36c30f0086562c06388b9e13bb2f8e4dbf9699 100644 --- a/src/assets/stylesheets/link.scss +++ b/src/assets/stylesheets/link.scss @@ -10,6 +10,17 @@ body { padding: 0; background-color: white; color: black; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + overflow-y: hidden; +} + +button { + outline: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + -webkit-tap-highlight-color: transparent; } a { @@ -112,6 +123,7 @@ a { :local(.header) { text-align: center; + white-space: pre-wrap; } :local(.footer) { diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json index 0581d31342d92dbde2fdc7ba5f3ded36f4112cc5..6213bc174429e46a1ac7f770f64a56a907de3449 100644 --- a/src/assets/translations.data.json +++ b/src/assets/translations.data.json @@ -76,7 +76,7 @@ "link.link_page_header_entry": "Enter your code:", "link.link_page_header_headset": "Enter headset link code:", "link.linking_a_headset": "Linking a Headset?", - "link.try_again": "We couldn't find that code. Please try again.", + "link.try_again": "We couldn't find that code.\nPlease try again.", "help.report_issue": "Report an Issue", "scene.logo_tagline": "A new way to get together", "scene.create_button": "Create a room with this scene", diff --git a/src/react-components/link-root.js b/src/react-components/link-root.js index 389b6ad3e46447ff35402e6581a827c6d96312da..0fb46771ac5f5ff3adf39002071a8a841142fa4b 100644 --- a/src/react-components/link-root.js +++ b/src/react-components/link-root.js @@ -14,6 +14,7 @@ const MAX_LETTERS = 4; addLocaleData([...en]); disableiOSZoom(); +const hasTouchEvents = "ontouchstart" in document.documentElement; class LinkRoot extends Component { static propTypes = { @@ -196,14 +197,20 @@ class LinkRoot extends Component { disabled={this.state.entered.length === this.maxAllowedChars()} key={`char_${i}`} className={styles.keypadButton} - onClick={() => this.addToEntry(d)} + onClick={() => { + if (!hasTouchEvents) this.addToEntry(d); + }} + onTouchStart={() => this.addToEntry(d)} > {d} </button> ))} <button className={classNames(styles.keypadButton, styles.keypadToggleMode)} - onClick={() => this.toggleMode()} + onTouchStart={() => this.toggleMode()} + onClick={() => { + if (!hasTouchEvents) this.toggleMode(); + }} > {this.state.isAlphaMode ? "123" : "ABC"} </button> @@ -211,7 +218,10 @@ class LinkRoot extends Component { <button disabled={this.state.entered.length === this.maxAllowedChars()} className={classNames(styles.keypadButton, styles.keypadZeroButton)} - onClick={() => this.addToEntry(0)} + onTouchStart={() => this.addToEntry(0)} + onClick={() => { + if (!hasTouchEvents) this.addToEntry(0); + }} > 0 </button> @@ -219,23 +229,27 @@ class LinkRoot extends Component { <button disabled={this.state.entered.length === 0 || this.state.entered.length === this.maxAllowedChars()} className={classNames(styles.keypadButton, styles.keypadBackspace)} - onClick={() => this.removeChar()} + onTouchStart={() => this.removeChar()} + onClick={() => { + if (!hasTouchEvents) this.removeChar(); + }} > ⌫ </button> </div> <div className={styles.footer}> - {!this.state.isAlphaMode && ( - <div className={styles.linkHeadsetFooterLink}> - <img onClick={() => this.toggleMode()} src={HeadsetIcon} className={styles.headsetIcon} /> - <span> - <a href="#" onClick={() => this.toggleMode()}> - <FormattedMessage id="link.linking_a_headset" /> - </a> - </span> - </div> - )} + <div + className={styles.linkHeadsetFooterLink} + style={{ visibility: this.state.isAlphaMode ? "hidden" : "visible" }} + > + <img onClick={() => this.toggleMode()} src={HeadsetIcon} className={styles.headsetIcon} /> + <span> + <a href="#" onClick={() => this.toggleMode()}> + <FormattedMessage id="link.linking_a_headset" /> + </a> + </span> + </div> </div> </div> </div>