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 }) => (