diff --git a/src/l10n.json b/src/l10n.json index 843aa5d32..d9d86ba66 100644 --- a/src/l10n.json +++ b/src/l10n.json @@ -62,6 +62,7 @@ "general.scratchJr": "ScratchJr", "general.scratchStore": "Scratch Store", "general.search": "Search", + "general.searchEmpty": "Nothing found", "general.signIn": "Sign in", "general.statistics": "Statistics", "general.studios": "Studios", diff --git a/src/views/search/search.jsx b/src/views/search/search.jsx index be30ee8ab..bd738b6a1 100644 --- a/src/views/search/search.jsx +++ b/src/views/search/search.jsx @@ -33,7 +33,8 @@ var Search = injectIntl(React.createClass({ getInitialState: function () { return { loaded: [], - offset: 0 + offset: 0, + loadMore: false }; }, componentDidMount: function () { @@ -70,9 +71,9 @@ var Search = injectIntl(React.createClass({ }, function (err, body) { var loadedSoFar = this.state.loaded; Array.prototype.push.apply(loadedSoFar, body); - this.setState({loaded: loadedSoFar}); var currentOffset = this.state.offset + this.props.loadNumber; - this.setState({offset: currentOffset}); + var willLoadMore = body.length === this.props.loadNumber; + this.setState({loaded: loadedSoFar, offset: currentOffset, loadMore: willLoadMore}); }.bind(this)); }, onSearchSubmit: function (formData) { @@ -96,6 +97,31 @@ var Search = injectIntl(React.createClass({ } return allTab; }, + getProjectBox: function () { + var results = ; + var searchAction = null; + if (this.state.loaded.length === 0 && this.state.offset !== 0) { + searchAction =

; + } else if (this.state.loadMore) { + searchAction = ; + } + return ( +
+ {results} + {searchAction} +
+ ); + }, render: function () { return (
@@ -109,18 +135,7 @@ var Search = injectIntl(React.createClass({ {this.getTab('projects')} {this.getTab('studios')} -
- - -
+ {this.getProjectBox()}
); diff --git a/src/views/search/search.scss b/src/views/search/search.scss index 0a9d4f583..856f787fe 100644 --- a/src/views/search/search.scss +++ b/src/views/search/search.scss @@ -132,6 +132,13 @@ $base-bg: $ui-white; display: block; margin: 0 auto; } + + .search-prompt { + margin: 0 auto; + padding: 30px; + max-width: 500px; + text-align: center; + } } }