diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4f06a8784b74c6ab155cee275df75d6ed43fd3e7
--- /dev/null
+++ b/src/assets/stylesheets/hub-create.scss
@@ -0,0 +1,91 @@
+.create-panel {
+ display: flex;
+ flex-direction: column;
+}
+
+@media (max-width: 768px) {
+ .create-panel {
+ align-items: center;
+ }
+}
+
+.create-panel__header {
+ color: $grey-text;
+ font-size: 1.2em;
+ margin-bottom: 14px;
+ margin-left: 12px;
+ text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
+}
+
+@media (max-width: 768px) {
+ .create-panel__header {
+ text-align: center;
+ }
+}
+
+.create-panel__form {
+ position: relative;
+ width: 600px;
+}
+
+@media (max-width: 768px) {
+ .create-panel__form {
+ width: auto;
+ max-width: 500px;
+ }
+}
+
+.create-panel__form__name {
+ @extend %rounded-border;
+ @extend %default-font;
+
+ color: white;
+ font-size: 2em;
+ background: black;
+ padding: 20px;
+ padding-left: 90px;
+ padding-right: 90px;
+ width: 100%;
+ line-height: 40px;
+}
+
+@media (max-width: 768px) {
+ .create-panel__form__name {
+ min-width: auto;
+ font-size: 1.5em;
+ width: 100%;
+ text-align: center;
+ }
+}
+
+.create-panel__form__name::selection {
+ background-color: #2F80ED;
+ color: white;
+}
+
+.create-panel__form__name::-moz-selection {
+ background-color: #2F80ED;
+ color: white;
+}
+
+.create-panel__form__left_button {
+ position: absolute;
+ height: 100%;
+ width: 90px;
+ left: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+}
+
+.create-panel__form__right_button {
+ position: absolute;
+ height: 100%;
+ width: 90px;
+ right: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+}
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 295144b6923265b50e9b5b1ffe68c86d922b0f56..a9799ea3bc28b52314473257cec7766ef1690176 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -1,4 +1,5 @@
@import 'shared';
+@import 'hub-create';
* {
box-sizing: border-box;
@@ -39,7 +40,7 @@ body {
position: fixed;
top: 0;
left: 0;
- opacity: 0.5;
+ opacity: 0.66;
min-width: 100%;
min-height: 100%;
z-index: 1;
@@ -54,11 +55,11 @@ body {
.header-content {
- padding: 1.35em 2.5em 1.35em 2.5em;
- background-color: black;
+ padding: 1.5em 2.5em 1.5em 2.5em;
+ background-color: rgba(0, 0, 0, 0.85);
min-height: 75px;
display: flex;
- border-bottom: 1px solid #242424;
+ border-bottom: 2px solid #242424;
}
.header-content__title {
@@ -105,10 +106,10 @@ body {
}
}
-
.header-content__experiment__info {
display: flex;
flex-direction: column;
+ justify-content: center;
}
.header-content__experiment__info__header a {
@@ -124,8 +125,9 @@ body {
// background-color: blue;
flex: 10;
text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
- padding: 3vw 3.5vw 3vw 3.5vw;
min-height: 400px;
+ display: flex;
+ flex-direction: column;
}
@media (max-width: 768px) {
@@ -135,8 +137,10 @@ body {
}
.hero-content__container {
- display: flex;
- flex-direction: column;
+ flex: 10;
+ padding-top: 2vw;
+ padding-left: 2.1em;
+ padding-right: 2.1em;
}
.hero-content__container__title {
@@ -161,14 +165,13 @@ body {
font-size: 2.5vw;
font-weight: lighter;
color: $light-text;
- margin-top: 0.2em;
}
@media (max-width: 768px) {
.hero-content__container__subtitle {
font-size: 1.1em;
text-align: center;
- margin-top: 0.5em;
+ margin-top: 0.2em;
}
}
@@ -178,12 +181,23 @@ body {
}
}
+.hero-content__create {
+ padding: 2.1em;
+ padding-bottom: 3.5vw;
+}
+
+@media (max-width: 768px) {
+ .hero-content__create {
+ padding: 0.5em;
+ }
+}
+
.footer-content {
padding: 1em 2.25em 1em 2.25em;
- background-color: black;
+ background-color: rgba(0, 0, 0, 0.85);
min-height: 75px;
display: flex;
- border-top: 1px solid #242424;
+ border-top: 2px solid #242424;
align-items: center;
justify-content: center;
}
@@ -209,3 +223,4 @@ body {
.footer-content__links__bottom {
margin-top: 4px;
}
+
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index eef481a28f656518cadf8eb6617cf36c7b505377..6e1bce2f24592d0d521183f1e62cf95e83c9aff1 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -31,7 +31,7 @@
"autoexit.title_units": " seconds",
"autoexit.subtitle": "You have started another session.",
"autoexit.cancel": "CANCEL",
- "home.create_header": "Choose a room name",
+ "home.create_header": "Name your room:",
"home.create_name.validation_warning": "Invalid name, limited to 4 to 64 characters and limited symbols.",
"home.webvr_disclaimer_pre": "A ",
"home.webvr_disclaimer_post": " experiment by ",
@@ -40,7 +40,6 @@
"home.join_on_slack": "Join us on Slack",
"home.report_issue": "Report an Issue",
"home.get_updates": "Get Updates",
- "home.release_notes": "Release Notes",
"home.hero_title": "A new way to get together online.",
"home.hero_subtitle": "Laugh, play, get stuff done, or just hang out."
}
diff --git a/src/components/gltf-bundle.js b/src/components/gltf-bundle.js
index 55646540a198c3a379d829102562d5b86d381771..791fa7eef9076b44eda996192181dc488e755846 100644
--- a/src/components/gltf-bundle.js
+++ b/src/components/gltf-bundle.js
@@ -20,7 +20,7 @@ AFRAME.registerComponent("gltf-bundle", {
const gltfEl = document.createElement("a-gltf-entity");
gltfEl.setAttribute("src", src);
gltfEl.setAttribute("position", "0 0 0");
- loaded.push(new Promise(resolve => gltfEl.addEventListener("loaded", resolve)));
+ loaded.push(new Promise(resolve => gltfEl.addEventListener("model-loaded", resolve)));
this.el.appendChild(gltfEl);
}
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index fd565300c1d610ea20f3a23e5378e4691972d37e..4a48d9c7a71bb6bed378b32d4fa98c0c392192f2 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -64,10 +64,7 @@ class HomeRoot extends Component {
</div>
<div className="header-content__experiment">
<div className="header-content__experiment__container">
- <img
- src="../assets/images/webvr_cube.svg"
- className="header-content__experiment__icon"
- />
+ <img src="../assets/images/webvr_cube.svg" className="header-content__experiment__icon" />
<div className="header-content__experiment__info">
<div className="header-content__experiment__info__header">
<span>
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index d755cd716e06b5fea19f0ac5985d2b99595a0e94..1b44c979f222a002b099dd70fe39bae5a543054a 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
import { injectIntl, FormattedMessage } from "react-intl";
import { generateHubName } from "../utils/name-generation";
+const HUB_NAME_PATTERN = "^[A-Za-z0-9-'\":!@#$%^&*(),.?~ ]{4,64}$";
+
class HubCreatePanel extends Component {
static propTypes = {
intl: PropTypes.object,
@@ -35,6 +37,11 @@ class HubCreatePanel extends Component {
document.location = hub.url;
};
+ isHubNameValid = () => {
+ const hubAlphaPattern = "[A-Za-z0-9]{4}";
+ return new RegExp(HUB_NAME_PATTERN).test(this.state.name) && new RegExp(hubAlphaPattern).test(this.state.name);
+ };
+
render() {
const { formatMessage } = this.props.intl;
@@ -55,30 +62,37 @@ class HubCreatePanel extends Component {
<FormattedMessage id="home.create_header" />
</div>
<div className="create-panel__form">
+ <div
+ className="create-panel__form__left_button"
+ onClick={e => {
+ e.preventDefault();
+ this.setState({ name: generateHubName() });
+ }}
+ >
+ <img className="create-panel__form__rotate_button" src="../assets/images/expand_dots_icon.svg" />
+ </div>
+ <div className="create-panel__form__right_button" onClick={this.createHub}>
+ {this.isHubNameValid() ? (
+ <img
+ className="create-panel__form__submit_button"
+ src="../assets/images/hub_create_button_enabled.svg"
+ />
+ ) : (
+ <img
+ className="create-panel__form__submit_button"
+ src="../assets/images/hub_create_button_disabled.svg"
+ />
+ )}
+ </div>
<input
className="create-panel__form__name"
value={this.state.name}
onChange={e => this.setState({ name: e.target.value })}
onFocus={e => e.target.select()}
required
- pattern={"^[A-Za-z0-9-'\":!@#$%^&*(),.?~ ]{4,64}$"}
+ pattern={HUB_NAME_PATTERN}
title={formatMessage({ id: "home.create_name.validation_warning" })}
/>
- <select
- onChange={e => this.setState({ environmentBundleUrl: e.target.value })}
- value={this.state.environmentBundleUrl}
- >
- {environmentChoices}
- </select>
- <button
- onClick={e => {
- e.preventDefault();
- this.setState({ name: generateHubName() });
- }}
- >
- Rotate
- </button>
- <input type="submit" value={"hi"} />
</div>
</div>
</form>
diff --git a/src/utils/name-generation.js b/src/utils/name-generation.js
index cdedd157240ef4a34acd534d8c5e7d36b0ca55fc..385e62bd01890e983fd3a8fc9e38ecb7fd570130 100644
--- a/src/utils/name-generation.js
+++ b/src/utils/name-generation.js
@@ -659,7 +659,8 @@ const nouns = [
"congregation",
"rendezvous",
"huddle",
- "meet"
+ "meet",
+ "soiree"
];
export function generateHubName() {