diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss index b20acd5f46248899cff2c821d714ba0ed3d3e0aa..9366a357a74ef374a4f6da94b1a457627a22bd79 100644 --- a/src/assets/stylesheets/hub-create.scss +++ b/src/assets/stylesheets/hub-create.scss @@ -31,10 +31,17 @@ @media (max-width: 768px) { .create-panel__form { width: auto; - max-width: 500px; + width: 500px; } } +@media (max-width: 520px) { + .create-panel__form { + width: 300px; + } +} + + .create-panel__form__name { @extend %rounded-border; @extend %default-font; @@ -60,6 +67,21 @@ width: 100%; text-align: center; } + + .create-panel__form__name--expanded { + padding-top: 300px; + } +} + +@media (max-width: 520px) { + .create-panel__form__name { + padding-left: 15px; + font-size: 1.2em; + } + + .create-panel__form__name--expanded { + padding-top: 190px; + } } .create-panel__form__name::selection { @@ -85,6 +107,12 @@ bottom: 0; } +@media (max-width: 520px) { + .create-panel__form__left_button { + display: none; + } +} + .create-panel__form__right_button { position: absolute; height: 95px; @@ -124,6 +152,17 @@ overflow: hidden; } +@media (max-width: 768px) { + .create-panel__form__environment__picker { + height: 280px; + } +} + +@media (max-width: 520px) { + .create-panel__form__environment__picker { + height: 165px; + } +} .create-panel__form__environment__picker__image { width: 100%; diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss index 67655d5f54dadf58845968346d45e03a4f127898..a4ed51980179f1e5837bfd015ca81508805e36d7 100644 --- a/src/assets/stylesheets/index.scss +++ b/src/assets/stylesheets/index.scss @@ -125,15 +125,22 @@ body { // background-color: blue; flex: 10; text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0); - min-height: 700px; + min-height: 740px; display: flex; flex-direction: column; } +@media (max-width: 1280px) { + .hero-content { + min-height: 600px; + } +} + @media (max-width: 768px) { .hero-content { padding: 1em 1.5em 1em 1.5em; justify-content: space-around; + min-height: 490px; } } diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js index cbe18342db9acc52a184c5fd1931944ffc107477..946f2737fcbf4b4d19042fa0360252edd8ccd6a9 100644 --- a/src/react-components/hub-create-panel.js +++ b/src/react-components/hub-create-panel.js @@ -18,7 +18,7 @@ class HubCreatePanel extends Component { this.state = { name: generateHubName(), environmentIndex: Math.floor(Math.random() * props.environments.length), - expanded: true + expanded: false }; } @@ -67,9 +67,11 @@ class HubCreatePanel extends Component { return ( <form onSubmit={this.createHub}> <div className="create-panel"> - <div className="create-panel__header"> - <FormattedMessage id={this.state.expanded ? "home.create_header_expanded" : "home.create_header"} /> - </div> + {!this.state.expanded && ( + <div className="create-panel__header"> + <FormattedMessage id="home.create_header" /> + </div> + )} <div className="create-panel__form"> <div className="create-panel__form__left_button"