From 5c58897f8d4a1f24a41457fd867a6e4816a5cace Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Thu, 26 Jul 2018 01:15:54 +0000
Subject: [PATCH] WIP new carousel
---
src/assets/stylesheets/hub-create.scss | 21 +++++++--------
src/react-components/hub-create-panel.js | 34 ++++--------------------
src/react-components/info-dialog.js | 1 +
3 files changed, 15 insertions(+), 41 deletions(-)
diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
index e3810f19e..9e6cd302b 100644
--- a/src/assets/stylesheets/hub-create.scss
+++ b/src/assets/stylesheets/hub-create.scss
@@ -11,14 +11,16 @@
:local(.form) {
position: relative;
width: 700px;
+ height: 460px;
@media (max-width: 768px) , (max-height: 715px) {
- width: auto;
width: 500px;
+ height: 340px;
}
@media (max-width: 520px) {
width: 300px;
+ height: 260px;
}
:local(.name) {
@@ -116,19 +118,10 @@
:local(.picker) {
width: 100%;
- height: 340px;
- border-bottom: 2px solid white;
+ height: 100%;
overflow: hidden;
position: relative;
- @media (max-width: 768px) , (max-height: 715px) {
- height: 280px;
- }
-
- @media (max-width: 520px) {
- height: 165px;
- }
-
:local(.image) {
width: 106%;
position: absolute;
@@ -145,7 +138,7 @@
background: rgb(2,0,36);
background: linear-gradient(0deg, rgba(2,0,36,0.324) 0%, rgba(1,0,11,0.1189076314119398) 60%, rgba(0,0,0,0.3242297602634804) 100%);
- :local(.customButton) {
+ :local(.custom-button) {
@extend %default-font;
cursor: pointer;
position: absolute;
@@ -160,6 +153,10 @@
background: transparent;
border: none;
pointer-events: auto;
+
+ @media (max-width: 520px) {
+ display: none;
+ }
}
:local(.header) {
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index a5e67d34f..06b712bde 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -169,25 +169,6 @@ class HubCreatePanel extends Component {
<form onSubmit={this.createHub}>
<div className={styles.createPanel}>
<div className={styles.form}>
- <div
- className={styles.leftContainer}
- onClick={async () => {
- this.shuffle();
- }}
- >
- <button type="button" tabIndex="3" className={styles.rotateButton}>
- <img src="../assets/images/dice_icon.svg" />
- </button>
- </div>
- <div className={styles.rightContainer}>
- <button type="submit" tabIndex="5" className={styles.submitButton}>
- {this.isHubNameValid() ? (
- <img src="../assets/images/hub_create_button_enabled.svg" />
- ) : (
- <img src="../assets/images/hub_create_button_disabled.svg" />
- )}
- </button>
- </div>
<div className={styles.environment}>
<div className={styles.picker}>
<img className={styles.image} srcSet={environmentThumbnail.srcset} />
@@ -242,16 +223,11 @@ class HubCreatePanel extends Component {
</div>
</div>
</div>
- <input
- tabIndex="4"
- className={styles.name}
- 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 className={styles.rightContainer}>
+ <button type="submit" tabIndex="5" className={styles.submitButton}>
+ <img src="../assets/images/hub_create_button_enabled.svg" />
+ </button>
+ </div>
</div>
</div>
</form>
diff --git a/src/react-components/info-dialog.js b/src/react-components/info-dialog.js
index cc73d8ce6..c41efd2e7 100644
--- a/src/react-components/info-dialog.js
+++ b/src/react-components/info-dialog.js
@@ -215,6 +215,7 @@ class InfoDialog extends Component {
className="custom-scene-form__link_field"
value={this.state.customRoomName}
pattern={HUB_NAME_PATTERN}
+ title="Invalid name, limited to 4 to 64 characters and limited symbols."
onChange={e => this.setState({ customRoomName: e.target.value })}
required
/>
--
GitLab