diff --git a/src/assets/images/default_thumbnail.png b/src/assets/images/default_thumbnail.png new file mode 100644 index 0000000000000000000000000000000000000000..55ae93b221662e08cec3877c5cb5544997f7a8a7 Binary files /dev/null and b/src/assets/images/default_thumbnail.png differ diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss index 001ca379bd533abff1765aa117b549037077a2c5..636ab5d656725522d5a407d93c8a1d92361d61ca 100644 --- a/src/assets/stylesheets/hub-create.scss +++ b/src/assets/stylesheets/hub-create.scss @@ -151,7 +151,7 @@ } &__image { - width: 112%; + width: 106%; position: absolute; top: -3%; left: -3%; diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js index f117ead03f85bc0116619e14c2c3f3d7505b8ba5..086f2bfc925584be4134b8f16659aeb3fef4eabb 100644 --- a/src/react-components/hub-create-panel.js +++ b/src/react-components/hub-create-panel.js @@ -7,6 +7,8 @@ import faAngleLeft from "@fortawesome/fontawesome-free-solid/faAngleLeft"; import faAngleRight from "@fortawesome/fontawesome-free-solid/faAngleRight"; import FontAwesomeIcon from "@fortawesome/react-fontawesome"; +import defaultThumbnail from "../assets/images/default_thumbnail.png"; + const HUB_NAME_PATTERN = "^[A-Za-z0-9-'\":!@#$%^&*(),.?~ ]{4,64}$"; class HubCreatePanel extends Component { @@ -84,10 +86,13 @@ class HubCreatePanel extends Component { } const environment = this.props.environments[this.state.environmentIndex]; - const environmentImageSrcSet = environment.meta.images.find(i => i.type === "preview-thumbnail").srcset; + const meta = environment.meta || {}; - const environmentTitle = environment.meta.title; - const environmentAuthor = (environment.meta.authors || [])[0]; + const environmentTitle = meta.title || environment.name; + const environmentAuthor = (meta.authors || [])[0]; + const environmentThumbnail = (meta.images || []).find(i => i.type === "preview-thumbnail") || { + srcset: defaultThumbnail + }; const formNameClassNames = classNames("create-panel__form__name", { "create-panel__form__name--expanded": this.state.expanded @@ -134,7 +139,10 @@ class HubCreatePanel extends Component { {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} /> + <img + className="create-panel__form__environment__picker__image" + srcSet={environmentThumbnail.srcset} + /> <div className="create-panel__form__environment__picker__labels"> <div className="create-panel__form__environment__picker__labels__header"> <span className="create-panel__form__environment__picker__labels__header__title">