diff --git a/native/README.md b/native/README.md index 7a43557b08..934b4b11ac 100644 --- a/native/README.md +++ b/native/README.md @@ -29,9 +29,8 @@ Depending on whether you want to develop for Android, iOS or both the following - Install Java JDK, SDK and Runtime (v8 or v11). - Install the Android SDK by using - the [Android Support plugin](https://plugins.jetbrains.com/plugin/1792-android-support) in IntelliJ. -- Install the latest stable SDK Platform and Android SDK Tools in the SDK Manager (Settings > Appearance & Behaviour > - System Settings > Android SDK). + the [Android plugin](https://plugins.jetbrains.com/plugin/22989-android) in IntelliJ. +- Install the latest stable SDK Platform and Android SDK Tools in the SDK Manager (Settings > Languages & Frameworks > Android SDK Updater). - Install and accept the SDK license in the SDK Manager. - [optional] If you want to develop using an emulator, also install the Android Emulator in the Android SDK settings. diff --git a/native/src/components/CitySelector.tsx b/native/src/components/CitySelector.tsx index 34b2454e8a..9f70fd07b0 100644 --- a/native/src/components/CitySelector.tsx +++ b/native/src/components/CitySelector.tsx @@ -26,6 +26,12 @@ const SearchBar = styled.View` padding: 0 10%; ` +const SearchCounter = styled.Text` + margin: 15px 0 10px; + color: ${props => props.theme.colors.textSecondaryColor}; + font-weight: 500; +` + type CitySelectorProps = { cities: CityModel[] navigateToDashboard: (city: CityModel) => void @@ -70,6 +76,7 @@ const CitySelector = ({ cities, navigateToDashboard }: CitySelectorProps): React {t('nearbyCities')} + {t('search:searchResultsCount', { count: resultCities.length })} {resultCities.length === 0 ? : cityEntries} diff --git a/native/src/routes/SearchModal.tsx b/native/src/routes/SearchModal.tsx index f5480269d5..9e7da908ea 100644 --- a/native/src/routes/SearchModal.tsx +++ b/native/src/routes/SearchModal.tsx @@ -22,6 +22,11 @@ const Wrapper = styled.View` background-color: ${props => props.theme.colors.backgroundColor}; ` +const SearchCounter = styled.Text` + margin: 10px 20px; + color: ${props => props.theme.colors.textSecondaryColor}; +` + export type SearchModalProps = { allPossibleResults: SearchResult[] languageCode: string @@ -76,15 +81,18 @@ const SearchModal = ({ {query.length > 0 && ( - - } - /> + <> + {t('searchResultsCount', { count: searchResults.length })} + + } + /> + )} diff --git a/release-notes/unreleased/2520-Show-number-of-search-results.yml b/release-notes/unreleased/2520-Show-number-of-search-results.yml new file mode 100644 index 0000000000..dc777f8474 --- /dev/null +++ b/release-notes/unreleased/2520-Show-number-of-search-results.yml @@ -0,0 +1,8 @@ +issue_key: 2520 +show_in_stores: true +platforms: + - web + - android + - ios +en: Show number of search results +de: Zeige die Anzahl von Suchergebnissen an diff --git a/web/src/components/CitySelector.tsx b/web/src/components/CitySelector.tsx index bfb75f9394..9a91146fa0 100644 --- a/web/src/components/CitySelector.tsx +++ b/web/src/components/CitySelector.tsx @@ -25,6 +25,9 @@ const CityListParent = styled.div<{ $stickyTop: number }>` background-color: ${props => props.theme.colors.backgroundColor}; border-bottom: 1px solid ${props => props.theme.colors.themeColor}; ` +const SearchCounter = styled.p` + color: ${props => props.theme.colors.textSecondaryColor}; +` type CitySelectorProps = { cities: CityModel[] @@ -58,6 +61,7 @@ const CitySelector = ({ cities, language }: CitySelectorProps): ReactElement => placeholderText={t('searchCity')} spaceSearch={false} onStickyTopChanged={setStickyTop}> + {t('search:searchResultsCount', { count: resultCities.length })} {resultCities.length === 0 ? : groups} diff --git a/web/src/routes/SearchPage.tsx b/web/src/routes/SearchPage.tsx index adba4b4290..e145501fd0 100644 --- a/web/src/routes/SearchPage.tsx +++ b/web/src/routes/SearchPage.tsx @@ -25,6 +25,11 @@ const List = styled.ul` } ` +const SearchCounter = styled.p` + padding: 0 5px; + color: ${props => props.theme.colors.textSecondaryColor}; +` + const SearchPage = ({ city, cityCode, languageCode, pathname }: CityRouteProps): ReactElement | null => { const query = new URLSearchParams(useLocation().search).get('query') ?? '' const [filterText, setFilterText] = useState(query) @@ -102,6 +107,7 @@ const SearchPage = ({ city, cityCode, languageCode, pathname }: CityRouteProps): {query.length > 0 && ( <> + {t('searchResultsCount', { count: results.length })} {results.map(({ title, content, path, thumbnail }) => (