diff --git a/src/assets/stylesheets/2d-hud.css b/src/assets/stylesheets/2d-hud.css
index a50436114181d18997248dce77a3cc1d9500363f..024daffb0b6463f58a70d5e7d2ef9565d840de91 100644
--- a/src/assets/stylesheets/2d-hud.css
+++ b/src/assets/stylesheets/2d-hud.css
@@ -38,7 +38,7 @@
display: flex;
align-items: center;
justify-content: center;
- z-index: 10;
+ z-index: 1;
}
:local(.panel) {
diff --git a/src/assets/stylesheets/footer.scss b/src/assets/stylesheets/footer.scss
index aedd1cca5e8df8d097a560e2a934b2e119f19606..0e2e957677e8c5ebde65ab04c0ab7736890e2c41 100644
--- a/src/assets/stylesheets/footer.scss
+++ b/src/assets/stylesheets/footer.scss
@@ -7,6 +7,7 @@
font-size: 1.3em;
display: flex;
flex-direction: column;
+ pointer-events: auto;
// Position above virtual gamepad controls on mobile
z-index: 1;
@@ -17,69 +18,108 @@
}
:local(.header), :local(.menu-header) {
display: flex;
- border-bottom: 2px solid #333;
+}
+:local(.header) {
+ border-bottom: 1px solid rgba(32, 32, 32, 0.65);
+
+ @media (max-width: 768px) {
+ border-bottom: none;
+ }
+}
+:local(.menu-header) {
+ background-color: transparent;
+ border-bottom: 1px solid rgba(32, 32, 32, 0.65);
+
+ @media (min-width: 768px) {
+ display: none;
+ }
}
:local(.header) {
background-color: rgba(0, 0, 0, 0.65);
+
+ @media (max-width: 768px) {
+ background-color: transparent;
+ }
+
+ :local(.hub-info) {
+ @media (max-width: 768px) {
+ display: none;
+ }
+ }
+
+ :local(.hub-stats) {
+ @media (max-width: 768px) {
+ display: none;
+ }
+ }
}
+
:local(.hub-info) {
flex: 1;
- margin: 8px;
+ margin: 16px 24px;
+ display: flex;
+ align-items: center;
+ @media (max-width: 768px) {
+ margin: 16px 8px;
+ font-size: 0.9em;
+ }
+}
+:local(.hub-stats) {
+ text-align: right;
+ margin: 16px 24px;
display: flex;
align-items: center;
+ justify-content: flex-end;
+ @media (min-width: 768px) {
+ flex: 1;
+ }
@media (max-width: 768px) {
- font-size: 0.8em;
+ margin: 16px 8px;
+ }
+ :local(.hub-participant-count) {
+ margin: 0 12px;
}
}
+
:local(.menu) {
padding: 5px 0;
- background-color: rgba(0, 0, 0, 0.65);
+ background-color: rgba(0, 0, 0, 0.85);
display: flex;
flex-direction: column;
- border-top: 3px solid white;
}
:local(.menu-buttons) {
margin: 0 auto;
}
:local(.menu-button) {
@extend %default-font;
- margin: 8px 0;
+ margin: 16px 0;
padding: 0;
display: block;
background: none;
border: none;
color: white;
- pointer-events: auto;
cursor: pointer;
font-size: 0.8em;
-}
-:local(.menu-button__icon) {
- background: black;
- width: 39px !important;
- height: 39px;
- border: 3px solid white;
- border-radius: 39px;
- display: inline-block;
- font-size: 1.5em;
- vertical-align: sub;
- svg {
- margin-top: 7px;
- margin-left: 0px;
- }
-}
-:local(.menu-button__text) {
- margin-left: 16px;
-}
-:local(.hub-stats) {
- text-align: right;
- margin: 8px;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- @media (min-width: 768px) {
+
+ @media (max-width: 768px) {
flex: 1;
+ align-self: center;
+ }
+ :local(.menu-button__icon) {
+ background: black;
+ width: 40px !important;
+ height: 40px;
+ border: 3px solid white;
+ border-radius: 40px;
+ display: inline-block;
+ font-size: 22px;
+ vertical-align: sub;
+ line-height: 42px;
+ svg {
+ margin-left: 0px;
+ }
+ }
+ :local(.menu-button__text) {
+ margin-left: 16px;
}
-}
-:local(.hub-participant-count) {
- margin: 0 5px;
}
diff --git a/src/assets/stylesheets/hub.scss b/src/assets/stylesheets/hub.scss
index ac3260660d0abf421a145f309f29915a32c33293..b7d6a928ceb38e36282373ca184bbef631705025 100644
--- a/src/assets/stylesheets/hub.scss
+++ b/src/assets/stylesheets/hub.scss
@@ -12,15 +12,10 @@
display: none;
}
-.rs-base {
- top: auto;
- bottom: 60px;
-}
-
.a-canvas.a-grab-cursor:hover {
- cursor: none;
+ cursor: none;
}
.a-canvas.a-grab-cursor:active {
- cursor: none;
+ cursor: none;
}
diff --git a/src/assets/stylesheets/info-dialog.scss b/src/assets/stylesheets/info-dialog.scss
index 4781187be90775a98ba608a1cf3c06c741d7a6ff..8312010fc7602c17b5b1221ee423e910f7cdb8cc 100644
--- a/src/assets/stylesheets/info-dialog.scss
+++ b/src/assets/stylesheets/info-dialog.scss
@@ -37,11 +37,11 @@
&__title {
@extend %top-title;
- margin-top: 20px;
}
&__body {
margin: 40px;
+ margin-bottom: 0px;
font-size: 1.1em;
margin-top: 20px;
color: $grey-text;
diff --git a/src/assets/stylesheets/profile.scss b/src/assets/stylesheets/profile.scss
index 95f2caa2629d34e3f99fbab242f5cbf28b498038..d392c99abaeb15bfd047ccce1effa7ca501b5d43 100644
--- a/src/assets/stylesheets/profile.scss
+++ b/src/assets/stylesheets/profile.scss
@@ -16,6 +16,10 @@
margin: 1em 0;
}
+ &__form {
+ height: 100%;
+ }
+
&__box {
border-radius: 8px;
display: flex;
@@ -27,7 +31,9 @@
width: 60vw;
min-width: 300px;
max-width: 700px;
- height: 500px;
+ min-height: 300px;
+ max-height: 1000px;
+ height: 90%;
&--darkened {
background-color: $darkest-transparent;
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 69415d5b01c1341c48f2e36d1aa593308962ec8d..5a1ad32fa33a1dce374dedcf9694d01d4793d044 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -13,9 +13,8 @@
"entry.daydream-via-chrome": "Using Google Chrome",
"entry.enable-screen-sharing": "Share my desktop",
"profile.save": "SAVE",
- "profile.display_name.label": "Display name:",
"profile.display_name.validation_warning": "Alphanumerics and hyphens. At least 3 characters, no more than 32",
- "profile.header": "Your identity",
+ "profile.header": "Your display name:",
"profile.terms.prefix": "I confirm that I am over the age of 13 and agree to the",
"profile.terms.privacy": "privacy policy",
"profile.terms.conjunction": "and",
diff --git a/src/components/stats-plus.css b/src/components/stats-plus.css
index 8fa50fd3e50d9893a32f284930cad5e7a4c239ae..9fc5a1908dbc72abadc6a67c0479e3cfe8d01db3 100644
--- a/src/components/stats-plus.css
+++ b/src/components/stats-plus.css
@@ -14,14 +14,15 @@
font-family: monospace;
cursor: pointer;
position: absolute;
- bottom: 50px;
- left: 0;
- padding: 8px;
+ top: 0;
+ right: 0;
+ padding: 8px 12px;
color: #aaa;
font-size: 10px;
}
-:global(.rs-mobile) {
- bottom: auto;
- top: 0;
+:global(.rs-base) {
+ right: 10px;
+ left: auto;
+ top: 10px;
}
diff --git a/src/react-components/footer.js b/src/react-components/footer.js
index b22ab86e1c2185d7c5b61b808598dfd341fc1375..858c6dfdfa841429d490612a182f3e74915fdf7f 100644
--- a/src/react-components/footer.js
+++ b/src/react-components/footer.js
@@ -1,6 +1,5 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import MobileDetect from "mobile-detect";
import FontAwesomeIcon from "@fortawesome/react-fontawesome";
import faUsers from "@fortawesome/fontawesome-free-solid/faUsers";
import faEllipsisH from "@fortawesome/fontawesome-free-solid/faEllipsisH";
@@ -10,8 +9,6 @@ import faTimes from "@fortawesome/fontawesome-free-solid/faTimes";
import styles from "../assets/stylesheets/footer.scss";
-const mobiledetect = new MobileDetect(navigator.userAgent);
-
export default class Footer extends Component {
static propTypes = {
hubName: PropTypes.string,
@@ -26,43 +23,31 @@ export default class Footer extends Component {
const menuVisible = this.state.menuVisible;
return (
<div className={styles.container}>
- {mobiledetect.mobile() ? (
- <div className={styles.floatingButton}>
- <button className={styles.menuButton} onClick={() => this.setState({ menuVisible: !menuVisible })}>
- <i className={styles.menuButtonIcon}>
- <FontAwesomeIcon icon={menuVisible ? faTimes : faEllipsisH} />
- </i>
- </button>
+ <div className={styles.header}>
+ <div className={styles.hubInfo}>
+ <span>{this.props.hubName}</span>
</div>
- ) : (
- <div className={styles.header}>
- <div className={styles.hubInfo}>
- <span>{this.props.hubName}</span>
- </div>
- <button className={styles.menuButton} onClick={() => this.setState({ menuVisible: !menuVisible })}>
- <i className={styles.menuButtonIcon}>
- <FontAwesomeIcon icon={menuVisible ? faTimes : faEllipsisH} />
- </i>
- </button>
- <div className={styles.hubStats}>
- <FontAwesomeIcon icon={faUsers} />
- <span className={styles.hubParticipantCount}>{this.props.participantCount || "-"}</span>
- </div>
+ <button className={styles.menuButton} onClick={() => this.setState({ menuVisible: !menuVisible })}>
+ <i className={styles.menuButtonIcon}>
+ <FontAwesomeIcon icon={menuVisible ? faTimes : faEllipsisH} />
+ </i>
+ </button>
+ <div className={styles.hubStats}>
+ <FontAwesomeIcon icon={faUsers} />
+ <span className={styles.hubParticipantCount}>{this.props.participantCount || "-"}</span>
</div>
- )}
+ </div>
{menuVisible && (
<div className={styles.menu}>
- {mobiledetect.mobile() && (
- <div className={styles.menuHeader}>
- <div className={styles.hubInfo}>
- <span>{this.props.hubName}</span>
- </div>
- <div className={styles.hubStats}>
- <FontAwesomeIcon icon={faUsers} />
- <span className={styles.hubParticipantCount}>{this.props.participantCount || "-"}</span>
- </div>
+ <div className={styles.menuHeader}>
+ <div className={styles.hubInfo}>
+ <span>{this.props.hubName}</span>
+ </div>
+ <div className={styles.hubStats}>
+ <FontAwesomeIcon icon={faUsers} />
+ <span className={styles.hubParticipantCount}>{this.props.participantCount || "-"}</span>
</div>
- )}
+ </div>
<div className={styles.menuButtons}>
<button className={styles.menuButton} onClick={this.props.onClickInvite}>
<i className={styles.menuButtonIcon}>
diff --git a/src/react-components/profile-entry-panel.js b/src/react-components/profile-entry-panel.js
index 2732f3ca9bd173cc3390bd1af05316b8f6614747..d38ac55e33c5294ccf262db97fbd2b11c5a20b32 100644
--- a/src/react-components/profile-entry-panel.js
+++ b/src/react-components/profile-entry-panel.js
@@ -72,16 +72,14 @@ class ProfileEntryPanel extends Component {
return (
<div className="profile-entry">
- <form onSubmit={this.saveStateAndFinish}>
+ <form onSubmit={this.saveStateAndFinish} className="profile-entry__form">
<div className="profile-entry__box profile-entry__box--darkened">
- <div className="profile-entry__subtitle">
+ <label htmlFor="#profile-entry-display-name" className="profile-entry__subtitle">
<FormattedMessage id="profile.header" />
- </div>
+ </label>
<label>
- <span className="profile-entry__display-name-label">
- <FormattedMessage id="profile.display_name.label" />
- </span>
<input
+ id="profile-entry-display-name"
className="profile-entry__form-field-text"
value={this.state.display_name}
onChange={e => this.setState({ display_name: e.target.value })}