2520: Show number search results

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.
 

native/src/components/CitySelector.tsx

@@ -26,6 +26,12 @@ const SearchBar = styled.View`
   padding: 0 10%;
 `
 
+const SearchCounter = styled.Text`
+  margin: 15px 0 10px 0;
+  color: ${props => props.theme.colors.textSecondaryColor};
+  font-weight: 500;
+`
+
 type CitySelectorProps = {
   cities: Array<CityModel>
   navigateToDashboard: (city: CityModel) => void
@@ -70,6 +76,7 @@ const CitySelector = ({ cities, navigateToDashboard }: CitySelectorProps): React
           <CityGroup>{t('nearbyCities')}</CityGroup>
           <NearbyCities cities={cities} navigateToDashboard={navigateToDashboard} filterText={filterText} />
         </CityGroupContainer>
+        <SearchCounter>{t('search:searchResultsCount', { count: resultCities.length })}</SearchCounter>
         {resultCities.length === 0 ? <NothingFound paddingTop /> : cityEntries}
       </View>
     </View>

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: Array<SearchResult>
   languageCode: string
@@ -76,15 +81,18 @@ const SearchModal = ({
       <SearchHeader query={query} closeSearchBar={onClose} onSearchChanged={setQuery} />
       <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={{ flex: 1 }}>
         {query.length > 0 && (
-          <List
-            items={searchResults}
-            renderItem={renderItem}
-            accessibilityLabel={t('searchResultsCount', { count: searchResults.length })}
-            style={{ flex: 1 }}
-            noItemsMessage={
-              <FeedbackContainer routeType={SEARCH_ROUTE} language={languageCode} cityCode={cityCode} query={query} />
-            }
-          />
+          <>
+            <SearchCounter>{t('searchResultsCount', { count: searchResults.length })}</SearchCounter>
+            <List
+              items={searchResults}
+              renderItem={renderItem}
+              accessibilityLabel={t('searchResultsCount', { count: searchResults.length })}
+              style={{ flex: 1 }}
+              noItemsMessage={
+                <FeedbackContainer routeType={SEARCH_ROUTE} language={languageCode} cityCode={cityCode} query={query} />
+              }
+            />
+          </>
         )}
       </KeyboardAvoidingView>
     </Wrapper>

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

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: Array<CityModel>
@@ -58,6 +61,7 @@ const CitySelector = ({ cities, language }: CitySelectorProps): ReactElement =>
         placeholderText={t('searchCity')}
         spaceSearch={false}
         onStickyTopChanged={setStickyTop}>
+        <SearchCounter>{t('search:searchResultsCount', { count: resultCities.length })}</SearchCounter>
         {resultCities.length === 0 ? <Failure errorMessage='search:nothingFound' /> : groups}
       </ScrollingSearchBox>
     </Container>

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<string>(query)
@@ -102,6 +107,7 @@ const SearchPage = ({ city, cityCode, languageCode, pathname }: CityRouteProps):
       {query.length > 0 && (
         <>
           <List>
+            <SearchCounter>{t('searchResultsCount', { count: results.length })}</SearchCounter>
             {results.map(({ title, content, path, thumbnail }) => (
               <SearchListItem
                 title={title}