maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-29 05:00:43 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

No search results: wrap result text to next line

Browse source
This commit is contained in:
Vesa Luusua 2018-02-20 10:52:42 +02:00
parent 3a168b882d
commit bf7a833682
2 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/SearchFilters/SearchFilters.css
View file

@ -6,6 +6,10 @@
background-color: var(--matterColorBright);
}
.longInfo {
flex-wrap: wrap;
}
.filters {
& > *:not(:last-child) {
margin-right: 8px;
@ -25,6 +29,17 @@
flex-shrink: 0;
}
.noSearchResults {
@apply --marketplaceH4FontStyles;
line-height: 20px;
margin-top: 13px;
margin-bottom: 12px;
/* parent uses flexbox: this defines minimum width for text "6 results" */
flex-basis: 100%;
flex-shrink: 0;
}
.resultsFound {
white-space: nowrap;
}

31
src/components/SearchFilters/SearchFilters.js
View file

@ -31,17 +31,8 @@ const SearchFiltersComponent = props => {
intl,
} = props;
const loadingResults = <FormattedMessage id="SearchFilters.loadingResults" />;
const resultsFound = (
<span className={css.resultsFound}>
<FormattedMessage id="SearchFilters.foundResults" values={{ count: resultsCount }} />
</span>
);
const noResults = <FormattedMessage id="SearchFilters.noResults" />;
const classes = classNames(rootClassName || css.root, className);
const hasNoResult = listingsAreLoaded && resultsCount === 0;
const classes = classNames(rootClassName || css.root, { [css.longInfo]: hasNoResult }, className);
const categoryLabel = intl.formatMessage({
id: 'SearchFilters.categoryLabel',
@ -106,11 +97,19 @@ const SearchFiltersComponent = props => {
{amenitiesFilter}
</div>
<div className={css.searchResultSummary}>
{listingsAreLoaded && resultsCount > 0 ? resultsFound : null}
{listingsAreLoaded && resultsCount === 0 ? noResults : null}
{searchInProgress ? loadingResults : null}
</div>
{listingsAreLoaded && resultsCount > 0 ? (
<div className={css.searchResultSummary}>
<span className={css.resultsFound}>
<FormattedMessage id="SearchFilters.foundResults" values={{ count: resultsCount }} />
</span>
</div>
) : null}
{listingsAreLoaded && resultsCount === 0 ? (
<div className={css.noSearchResults}>
<FormattedMessage id="SearchFilters.noResults" />
</div>
) : null}
</div>
);
};