diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss index 8f9ddb660581421c15bd16ad6c736a01e5d4fb8c..b20acd5f46248899cff2c821d714ba0ed3d3e0aa 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 a9799ea3bc28b52314473257cec7766ef1690176..67655d5f54dadf58845968346d45e03a4f127898 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 7d4a9b2f5196d9bfe427d7a7881c510fffc8dc87..cbe18342db9acc52a184c5fd1931944ffc107477 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>