From fd2d277775ec772070557e43a29ae8c40bd48c2d Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Fri, 30 Mar 2018 11:05:34 -0700
Subject: [PATCH] Styling basically done, yay
---
src/assets/stylesheets/avatar-selector.scss | 8 +---
src/assets/stylesheets/hub-create.scss | 53 +++++++++++++++++++++
src/assets/stylesheets/index.scss | 2 +-
src/assets/stylesheets/shared.scss | 10 ++++
src/assets/translations.data.json | 5 +-
src/react-components/hub-create-panel.js | 48 ++++++++++++++-----
6 files changed, 105 insertions(+), 21 deletions(-)
diff --git a/src/assets/stylesheets/avatar-selector.scss b/src/assets/stylesheets/avatar-selector.scss
index 5367b3c3c..b3d20bea0 100644
--- a/src/assets/stylesheets/avatar-selector.scss
+++ b/src/assets/stylesheets/avatar-selector.scss
@@ -16,16 +16,10 @@
color: grey;
}
&__previous-button, &__next-button {
+ @extend %big-icon-button;
position: absolute;
top: 50%;
margin-top: -0.5em;
- appearance: none;
- -moz-appearance: none;
- -webkit-appearance: none;
- background: transparent;
- color: white;
- border: none;
- font-size: 64pt;
}
&__previous-button {
left: 0.2em;
diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
index 8e89596a8..222d0ddb7 100644
--- a/src/assets/stylesheets/hub-create.scss
+++ b/src/assets/stylesheets/hub-create.scss
@@ -43,6 +43,7 @@
padding-right: 90px;
width: 100%;
line-height: 40px;
+ z-index: 1;
&::selection {
background-color: #2F80ED;
@@ -120,6 +121,7 @@
border-radius: 14px;
overflow: hidden;
pointer-events: none;
+ z-index: 2;
@media (max-width: 768px) , (max-height: 715px) {
width: 100%;
@@ -153,6 +155,39 @@
height: 100%;
top: 0;
left: 0;
+
+ &__footer {
+ position: absolute;
+ bottom: 14px;
+ left: 12px;
+ font-size: 1.2em;
+ text-shadow: 0px 0px 6px #202020;
+ color: $light-text;
+ }
+
+ &__header {
+ position: absolute;
+ top: 14px;
+ left: 18px;
+ display: flex;
+ flex-direction: column;
+ text-shadow: 0px 0px 3px #404040;
+
+ &__title {
+ font-size: 1.6em;
+ font-weight: bold;
+ color: white;
+ }
+
+ &__author {
+ color: $light-text;
+ font-size: 1.4em;
+
+ @media (max-width: 520px) {
+ display: none;
+ }
+ }
+ }
}
&__controls {
@@ -161,6 +196,24 @@
height: 100%;
top: 0;
left: 0;
+
+ &__next, &__prev {
+ @extend %big-icon-button;
+
+ position: absolute;
+ top: 50%;
+ margin-top: -0.5em;
+ pointer-events: auto;
+ cursor: pointer;
+ }
+
+ &__prev {
+ left: 0.2em;
+ }
+
+ &__next {
+ right: 0.2em;
+ }
}
}
}
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index e5c55294d..f73001c82 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -113,7 +113,6 @@ body {
.hero-content {
flex: 10;
- text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
min-height: 740px;
display: flex;
flex-direction: column;
@@ -129,6 +128,7 @@ body {
padding-left: 2.1em;
padding-right: 2.1em;
flex: 10;
+ text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
@media (max-height: 812px) , (max-width: 768px) {
flex: 0 0 auto;
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index d51c344bc..c2d4f013d 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -32,3 +32,13 @@ $darker-grey: rgba(64, 64, 64, 1.0);
font-size: 1.0em;
padding-top: 4px;
}
+
+%big-icon-button {
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ background: transparent;
+ color: white;
+ border: none;
+ font-size: 64pt;
+}
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 44287798d..1757ec61c 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -34,7 +34,7 @@
"autoexit.subtitle": "You have started another session.",
"autoexit.cancel": "CANCEL",
"home.create_header": "Name your room:",
- "home.create_header_expanded": "Choose a scene:",
+ "home.environment_picker_footer": "Choose a scene",
"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 ",
@@ -45,6 +45,7 @@
"home.get_updates": "Get Updates",
"home.hero_title": "A new way to get together online.",
"home.hero_subtitle": "Laugh, play, get stuff done, or just hang out.",
- "home.made_with_love": "made with â¤ï¸ by "
+ "home.made_with_love": "made with â¤ï¸ by ",
+ "home.environment_author_by": " by "
}
}
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index 52cbbb29d..237a4fe04 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -21,7 +21,7 @@ class HubCreatePanel extends Component {
this.state = {
name: generateHubName(),
environmentIndex: Math.floor(Math.random() * props.environments.length),
- expanded: false
+ expanded: true
};
}
@@ -63,6 +63,9 @@ class HubCreatePanel extends Component {
const environment = this.props.environments[this.state.environmentIndex];
const environmentImageSrcSet = environment.meta.images.find(i => i.type === "preview-thumbnail").srcset;
+ const environmentTitle = environment.meta.title;
+ const environmentAuthor = (environment.meta.authors || [])[0];
+
const formNameClassNames = classNames("create-panel__form__name", {
"create-panel__form__name--expanded": this.state.expanded
});
@@ -107,20 +110,27 @@ class HubCreatePanel extends Component {
/>
)}
</div>
- <input
- className={formNameClassNames}
- value={this.state.name}
- onChange={e => this.setState({ name: e.target.value })}
- onFocus={e => e.target.select()}
- required
- pattern={HUB_NAME_PATTERN}
- title={formatMessage({ id: "home.create_name.validation_warning" })}
- />
{this.state.expanded && (
<div className="create-panel__form__environment">
<div className="create-panel__form__environment__picker">
<img className="create-panel__form__environment__picker__image" srcSet={environmentImageSrcSet} />
- <div className="create-panel__form__environment__picker__labels">labels</div>
+ <div className="create-panel__form__environment__picker__labels">
+ <div className="create-panel__form__environment__picker__labels__header">
+ <span className="create-panel__form__environment__picker__labels__header__title">
+ {environmentTitle}
+ </span>
+ {environmentAuthor &&
+ environmentAuthor.name && (
+ <span className="create-panel__form__environment__picker__labels__header__author">
+ <FormattedMessage id="home.environment_author_by" />
+ <span>{environmentAuthor.name}</span>
+ </span>
+ )}
+ </div>
+ <div className="create-panel__form__environment__picker__labels__footer">
+ <FormattedMessage id="home.environment_picker_footer" />
+ </div>
+ </div>
<div className="create-panel__form__environment__picker__controls">
<button
className="create-panel__form__environment__picker__controls__prev"
@@ -128,10 +138,26 @@ class HubCreatePanel extends Component {
>
<FontAwesomeIcon icon={faAngleLeft} />
</button>
+
+ <button
+ className="create-panel__form__environment__picker__controls__next"
+ onClick={this.setToNextEnvironment}
+ >
+ <FontAwesomeIcon icon={faAngleRight} />
+ </button>
</div>
</div>
</div>
)}
+ <input
+ className={formNameClassNames}
+ value={this.state.name}
+ onChange={e => this.setState({ name: e.target.value })}
+ onFocus={e => e.target.select()}
+ required
+ pattern={HUB_NAME_PATTERN}
+ title={formatMessage({ id: "home.create_name.validation_warning" })}
+ />
</div>
</div>
</form>
--
GitLab