From 995e3f1e63d6be8307c840a7ce683c02db14837c Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Mon, 14 May 2018 14:54:25 -0700
Subject: [PATCH] Fixes for landscape view and VR view
---
src/assets/stylesheets/link.scss | 36 ++++++++++++++++++++++-
src/react-components/link-root.js | 48 ++++++++++++++++++++-----------
2 files changed, 66 insertions(+), 18 deletions(-)
diff --git a/src/assets/stylesheets/link.scss b/src/assets/stylesheets/link.scss
index 3f16b7a5a..9dcd16148 100644
--- a/src/assets/stylesheets/link.scss
+++ b/src/assets/stylesheets/link.scss
@@ -36,11 +36,35 @@ a {
:local(.link-contents) {
display: flex;
- flex-direction: column;
+ flex-direction: row;
align-items: center;
justify-content: center;
color: $grey-text;
font-size: 1.4em;
+
+ @media (max-width: 690px) {
+ flex-direction: column;
+ }
+}
+
+:local(.entered-footer) {
+ margin: 16px;
+ font-size: 0.8em;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ @media (max-width: 690px) {
+ display: none;
+ }
+}
+
+:local(.entered-contents) {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
}
:local(.code-loading-panel) {
@@ -63,6 +87,15 @@ a {
:local(.footer) {
margin: 16px;
font-size: 0.8em;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ @media (min-width: 690px) , (max-height: 650px) {
+ display: none;
+ }
}
:local(.keypad) {
@@ -144,3 +177,4 @@ a {
:local(.digit-input::placeholder) {
letter-spacing: 0;
}
+
diff --git a/src/react-components/link-root.js b/src/react-components/link-root.js
index a5ebcb8ba..1d6d5aa95 100644
--- a/src/react-components/link-root.js
+++ b/src/react-components/link-root.js
@@ -54,8 +54,9 @@ class LinkRoot extends Component {
};
removeDigit = () => {
- if (this.state.enteredDigits.length === 0) return;
- this.setState({ enteredDigits: this.state.enteredDigits.substring(0, -1) });
+ const enteredDigits = this.state.enteredDigits;
+ if (enteredDigits.length === 0) return;
+ this.setState({ enteredDigits: enteredDigits.substring(0, enteredDigits.length - 1) });
};
attemptLink = code => {
@@ -96,20 +97,34 @@ class LinkRoot extends Component {
</div>
)}
- <div className={styles.header}>
- <FormattedMessage id={this.state.failedAtLeastOnce ? "link.try_again" : "link.link_page_header"} />
- </div>
+ <div className={styles.enteredContents}>
+ <div className={styles.header}>
+ <FormattedMessage id={this.state.failedAtLeastOnce ? "link.try_again" : "link.link_page_header"} />
+ </div>
+
+ <div className={styles.enteredDigits}>
+ <input
+ className={styles.digitInput}
+ type="number"
+ value={this.state.enteredDigits}
+ onChange={ev => {
+ this.setState({ enteredDigits: ev.target.value });
+ }}
+ placeholder="- - - -"
+ />
+ </div>
- <div className={styles.enteredDigits}>
- <input
- className={styles.digitInput}
- type="number"
- value={this.state.enteredDigits}
- onChange={ev => {
- this.setState({ enteredDigits: ev.target.value });
- }}
- placeholder="- - - -"
- />
+ <div className={styles.enteredFooter}>
+ <span>
+ <FormattedMessage id="link.dont_have_a_code" />
+ </span>{" "}
+ <span>
+ <a href="/">
+ <FormattedMessage id="link.create_a_room" />
+ </a>
+ </span>
+ <img className={styles.footerImage} src="../assets/images/logo.svg" />
+ </div>
</div>
<div className={styles.keypad}>
@@ -148,9 +163,8 @@ class LinkRoot extends Component {
<FormattedMessage id="link.create_a_room" />
</a>
</span>
+ <img className={styles.footerImage} src="../assets/images/logo.svg" />
</div>
-
- <img className={styles.footerImage} src="../assets/images/logo.svg" />
</div>
</div>
</IntlProvider>
--
GitLab