diff --git a/app/soapbox/features/compose/components/search_results.js b/app/soapbox/features/compose/components/search_results.js index d61226193..25dd43c7b 100644 --- a/app/soapbox/features/compose/components/search_results.js +++ b/app/soapbox/features/compose/components/search_results.js @@ -9,17 +9,20 @@ import Hashtag from '../../../components/hashtag'; import LoadingIndicator from 'soapbox/components/loading_indicator'; import FilterBar from '../../search/components/filter_bar'; import LoadMore from '../../../components/load_more'; +import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; +import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components'; import classNames from 'classnames'; export default class SearchResults extends ImmutablePureComponent { static propTypes = { - value: ImmutablePropTypes.string, + value: PropTypes.string, results: ImmutablePropTypes.map.isRequired, submitted: PropTypes.bool, expandSearch: PropTypes.func.isRequired, selectedFilter: PropTypes.string.isRequired, selectFilter: PropTypes.func.isRequired, + features: PropTypes.object.isRequired, }; handleLoadMore = () => this.props.expandSearch(this.props.selectedFilter); @@ -27,7 +30,7 @@ export default class SearchResults extends ImmutablePureComponent { handleSelectFilter = newActiveFilter => this.props.selectFilter(newActiveFilter); render() { - const { value, results, submitted, selectedFilter } = this.props; + const { value, results, submitted, selectedFilter, features } = this.props; if (submitted && results.isEmpty()) { return ( @@ -35,6 +38,12 @@ export default class SearchResults extends ImmutablePureComponent { ); + } else if (features.suggestions && results.isEmpty()) { + return ( + + {Component => } + + ); } let searchResults; diff --git a/app/soapbox/features/compose/containers/search_results_container.js b/app/soapbox/features/compose/containers/search_results_container.js index 650b28316..54b5765de 100644 --- a/app/soapbox/features/compose/containers/search_results_container.js +++ b/app/soapbox/features/compose/containers/search_results_container.js @@ -2,14 +2,18 @@ import { connect } from 'react-redux'; import SearchResults from '../components/search_results'; import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestions'; import { expandSearch, setFilter } from '../../../actions/search'; +import { getFeatures } from 'soapbox/utils/features'; const mapStateToProps = state => { + const instance = state.get('instance'); + return { value: state.getIn(['search', 'submittedValue']), results: state.getIn(['search', 'results']), suggestions: state.getIn(['suggestions', 'items']), submitted: state.getIn(['search', 'submitted']), selectedFilter: state.getIn(['search', 'filter']), + features: getFeatures(instance), }; }; diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss index 87a2142d9..d7f728257 100644 --- a/app/styles/components/search.scss +++ b/app/styles/components/search.scss @@ -167,6 +167,7 @@ .search-page { height: 100%; + min-height: 140px; } .column { diff --git a/app/styles/components/wtf-panel.scss b/app/styles/components/wtf-panel.scss index b9530646b..b76e7a6e4 100644 --- a/app/styles/components/wtf-panel.scss +++ b/app/styles/components/wtf-panel.scss @@ -1,12 +1,14 @@ .wtf-panel { - @include standard-panel-shadow; + @include standard-panel; display: flex; width: 100%; - border-radius: 10px; flex-direction: column; height: auto; box-sizing: border-box; - background: var(--foreground-color); + + @media screen and (max-width: 580px) { + border-radius: 0; + } &:first-child { margin-top: 0; @@ -159,3 +161,8 @@ margin-left: auto; } } + +.column .sub-navigation ~ .wtf-panel { + border-top-left-radius: 0; + border-top-right-radius: 0; +}