From 54885b424a0fcab0e5282b03399aa0cc0fb97c24 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Thu, 29 Mar 2018 16:57:01 -0700
Subject: [PATCH] Create panel styling progress
---
src/assets/stylesheets/hub-create.scss | 34 +++++++++++++++++++++++-
src/assets/stylesheets/index.scss | 12 +++++++--
src/react-components/hub-create-panel.js | 14 ++++++++--
3 files changed, 55 insertions(+), 5 deletions(-)
diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
index 8f9ddb660..b20acd5f4 100644
--- a/src/assets/stylesheets/hub-create.scss
+++ b/src/assets/stylesheets/hub-create.scss
@@ -50,7 +50,7 @@
}
.create-panel__form__name--expanded {
- padding-top: 300px;
+ padding-top: 415px;
}
@media (max-width: 768px) {
@@ -96,3 +96,35 @@
cursor: pointer;
bottom: 0;
}
+
+.create-panel__form__environment {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 700px;
+ height: 100%;
+ box-sizing: border-box;
+ border-radius: 14px;
+ border: 3px solid white;
+ border-radius: 14px;
+ overflow: hidden;
+ pointer-events: none;
+}
+
+@media (max-width: 768px) {
+ .create-panel__form__environment {
+ width: 100%;
+ }
+}
+
+.create-panel__form__environment__picker {
+ width: 100%;
+ height: 390px;
+ border-bottom: 3px solid white;
+ overflow: hidden;
+}
+
+
+.create-panel__form__environment__picker__image {
+ width: 100%;
+}
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index a9799ea3b..67655d5f5 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -125,7 +125,7 @@ body {
// background-color: blue;
flex: 10;
text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
- min-height: 400px;
+ min-height: 700px;
display: flex;
flex-direction: column;
}
@@ -133,14 +133,21 @@ body {
@media (max-width: 768px) {
.hero-content {
padding: 1em 1.5em 1em 1.5em;
+ justify-content: space-around;
}
}
.hero-content__container {
- flex: 10;
padding-top: 2vw;
padding-left: 2.1em;
padding-right: 2.1em;
+ flex: 10;
+}
+
+@media (max-width: 768px) {
+ .hero-content__container {
+ flex: 0 0 auto;
+ }
}
.hero-content__container__title {
@@ -189,6 +196,7 @@ body {
@media (max-width: 768px) {
.hero-content__create {
padding: 0.5em;
+ align-self: center;
}
}
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index 7d4a9b2f5..cbe18342d 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -17,8 +17,8 @@ class HubCreatePanel extends Component {
this.state = {
name: generateHubName(),
- environmentBundleIndex: Math.floor(Math.random() * props.environments[0].length),
- expanded: false
+ environmentIndex: Math.floor(Math.random() * props.environments.length),
+ expanded: true
};
}
@@ -57,6 +57,9 @@ class HubCreatePanel extends Component {
</option>
));
+ const environment = this.props.environments[this.state.environmentIndex];
+ const environmentImageSrcSet = environment.meta.images.find(i => i.type === "preview-thumbnail").srcset;
+
const formNameClassNames = classNames("create-panel__form__name", {
"create-panel__form__name--expanded": this.state.expanded
});
@@ -108,6 +111,13 @@ class HubCreatePanel extends Component {
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>
+ </div>
+ )}
</div>
</div>
</form>
--
GitLab