From a0ce8a6639719c63f206237f4fe428f912035eca Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Wed, 25 Jul 2018 23:53:19 +0000
Subject: [PATCH] Expand on open for carousel
---
src/assets/images/expand_dots_icon.svg | 20 ----
src/assets/stylesheets/hub-create.scss | 29 +-----
src/assets/translations.data.json | 1 -
src/react-components/hub-create-panel.js | 123 +++++++++--------------
4 files changed, 54 insertions(+), 119 deletions(-)
delete mode 100755 src/assets/images/expand_dots_icon.svg
diff --git a/src/assets/images/expand_dots_icon.svg b/src/assets/images/expand_dots_icon.svg
deleted file mode 100755
index 8d765ad21..000000000
--- a/src/assets/images/expand_dots_icon.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg width="26" height="6" viewBox="0 0 26 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<title>expand_dots_icon</title>
-<desc>Created using Figma</desc>
-<g id="Canvas" transform="translate(455 -258)">
-<g id="expand_dots_icon">
-<g id="Ellipse">
-<use xlink:href="#path0_fill" transform="translate(-455 258)" fill="#FFFFFF"/>
-</g>
-<g id="Ellipse">
-<use xlink:href="#path0_fill" transform="translate(-435 258)" fill="#FFFFFF"/>
-</g>
-<g id="Ellipse">
-<use xlink:href="#path0_fill" transform="translate(-445 258)" fill="#FFFFFF"/>
-</g>
-</g>
-</g>
-<defs>
-<path id="path0_fill" d="M 6 3C 6 4.65685 4.65685 6 3 6C 1.34315 6 0 4.65685 0 3C 0 1.34315 1.34315 0 3 0C 4.65685 0 6 1.34315 6 3Z"/>
-</defs>
-</svg>
diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
index b4b47eadd..c2e3c9411 100644
--- a/src/assets/stylesheets/hub-create.scss
+++ b/src/assets/stylesheets/hub-create.scss
@@ -8,18 +8,6 @@
align-items: center;
}
- :local(.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) {
- text-align: center;
- }
- }
-
:local(.form) {
position: relative;
width: 700px;
@@ -45,6 +33,8 @@
padding-right: 90px;
width: 100%;
line-height: 40px;
+ margin-top: 340px;
+ border-radius: 0px 0px 14px 14px;
&::selection {
background-color: #2F80ED;
@@ -61,24 +51,13 @@
font-size: 1.5em;
width: 100%;
text-align: center;
+ margin-top: 275px;
}
@media (max-width: 520px) {
padding-left: 15px;
font-size: 1.2em;
- }
-
- &:local(.expanded) {
- margin-top: 340px;
- border-radius: 0px 0px 14px 14px;
-
- @media (max-width: 768px) , (max-height: 715px) {
- margin-top: 275px;
- }
-
- @media (max-width: 520px) {
- margin-top: 165px;
- }
+ margin-top: 165px;
}
}
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 1f8ae6a1b..49b618828 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -45,7 +45,6 @@
"autoexit.title_units": " seconds",
"autoexit.subtitle": "You have started another session.",
"autoexit.cancel": "CANCEL",
- "home.create_header": "Name your room:",
"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 ",
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index 98440be7d..9a107a549 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -34,10 +34,7 @@ class HubCreatePanel extends Component {
this.state = {
ready: false,
name: generateHubName(),
- environmentIndex,
- // HACK: expand on small screens by default to ensure scene selection possible.
- // Eventually this could/should be done via media queries.
- expanded: window.innerWidth < 420
+ environmentIndex
};
// Optimisticly preload all environment thumbnails
@@ -154,36 +151,18 @@ class HubCreatePanel extends Component {
const environmentAuthor = (meta.authors || [])[0];
const environmentThumbnail = this._getEnvironmentThumbnail(this.state.environmentIndex);
- const formNameClassNames = classNames(styles.name, {
- [styles.expanded]: this.state.expanded
- });
-
return (
<form onSubmit={this.createHub}>
<div className={styles.createPanel}>
- {!this.state.expanded && (
- <div className={styles.header}>
- <FormattedMessage id="home.create_header" />
- </div>
- )}
<div className={styles.form}>
<div
className={styles.leftContainer}
onClick={async () => {
- if (this.state.expanded) {
- this.shuffle();
- } else {
- await this._preloadImage(this._getEnvironmentThumbnail(this.state.environmentIndex).srcset);
- this.setState({ expanded: true });
- }
+ this.shuffle();
}}
>
<button type="button" tabIndex="3" className={styles.rotateButton}>
- {this.state.expanded ? (
- <img src="../assets/images/dice_icon.svg" />
- ) : (
- <img src="../assets/images/expand_dots_icon.svg" />
- )}
+ <img src="../assets/images/dice_icon.svg" />
</button>
</div>
<div className={styles.rightContainer}>
@@ -195,63 +174,61 @@ class HubCreatePanel extends Component {
)}
</button>
</div>
- {this.state.expanded && (
- <div className={styles.environment}>
- <div className={styles.picker}>
- <img className={styles.image} srcSet={environmentThumbnail.srcset} />
- <div className={styles.labels}>
- <div className={styles.header}>
- {meta.url ? (
- <a href={meta.url} rel="noopener noreferrer" className={styles.title}>
- {environmentTitle}
+ <div className={styles.environment}>
+ <div className={styles.picker}>
+ <img className={styles.image} srcSet={environmentThumbnail.srcset} />
+ <div className={styles.labels}>
+ <div className={styles.header}>
+ {meta.url ? (
+ <a href={meta.url} rel="noopener noreferrer" className={styles.title}>
+ {environmentTitle}
+ </a>
+ ) : (
+ <span className={styles.itle}>environmentTitle</span>
+ )}
+ {environmentAuthor &&
+ environmentAuthor.name &&
+ (environmentAuthor.url ? (
+ <a href={environmentAuthor.url} rel="noopener noreferrer" className={styles.author}>
+ <FormattedMessage id="home.environment_author_by" />
+ <span>{environmentAuthor.name}</span>
</a>
) : (
- <span className={styles.itle}>environmentTitle</span>
- )}
- {environmentAuthor &&
- environmentAuthor.name &&
- (environmentAuthor.url ? (
- <a href={environmentAuthor.url} rel="noopener noreferrer" className={styles.author}>
- <FormattedMessage id="home.environment_author_by" />
- <span>{environmentAuthor.name}</span>
- </a>
- ) : (
- <span className={styles.author}>
- <FormattedMessage id="home.environment_author_by" />
- <span>{environmentAuthor.name}</span>
- </span>
- ))}
- {environmentAuthor &&
- environmentAuthor.organization &&
- (environmentAuthor.organization.url ? (
- <a href={environmentAuthor.organization.url} rel="noopener noreferrer" className={styles.org}>
- <span>{environmentAuthor.organization.name}</span>
- </a>
- ) : (
- <span className={styles.org}>
- <span>{environmentAuthor.organization.name}</span>
- </span>
- ))}
- </div>
- <div className={styles.footer}>
- <FormattedMessage id="home.environment_picker_footer" />
- </div>
+ <span className={styles.author}>
+ <FormattedMessage id="home.environment_author_by" />
+ <span>{environmentAuthor.name}</span>
+ </span>
+ ))}
+ {environmentAuthor &&
+ environmentAuthor.organization &&
+ (environmentAuthor.organization.url ? (
+ <a href={environmentAuthor.organization.url} rel="noopener noreferrer" className={styles.org}>
+ <span>{environmentAuthor.organization.name}</span>
+ </a>
+ ) : (
+ <span className={styles.org}>
+ <span>{environmentAuthor.organization.name}</span>
+ </span>
+ ))}
</div>
- <div className={styles.controls}>
- <button className={styles.prev} type="button" tabIndex="1" onClick={this.setToPreviousEnvironment}>
- <FontAwesomeIcon icon={faAngleLeft} />
- </button>
-
- <button className={styles.next} type="button" tabIndex="2" onClick={this.setToNextEnvironment}>
- <FontAwesomeIcon icon={faAngleRight} />
- </button>
+ <div className={styles.footer}>
+ <FormattedMessage id="home.environment_picker_footer" />
</div>
</div>
+ <div className={styles.controls}>
+ <button className={styles.prev} type="button" tabIndex="1" onClick={this.setToPreviousEnvironment}>
+ <FontAwesomeIcon icon={faAngleLeft} />
+ </button>
+
+ <button className={styles.next} type="button" tabIndex="2" onClick={this.setToNextEnvironment}>
+ <FontAwesomeIcon icon={faAngleRight} />
+ </button>
+ </div>
</div>
- )}
+ </div>
<input
tabIndex="4"
- className={formNameClassNames}
+ className={styles.name}
value={this.state.name}
onChange={e => this.setState({ name: e.target.value })}
onFocus={e => e.target.select()}
--
GitLab