enhance(search): subtitle for explorers section

owid · Apr 15, 2024 · c6e6b12 · c6e6b12
1 parent cb0d34e
commit c6e6b12
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 41 deletions.
diff --git a/site/search/Search.scss b/site/search/Search.scss
@@ -122,14 +122,19 @@
     }
 }
 
+.search-results__header-container {
+    margin-top: 24px;
+    margin-bottom: 24px;
+}
+
 .search-results__header {
     display: flex;
     align-items: baseline;
 }
 
 .search-results__section-title {
-    margin-top: 24px;
-    margin-bottom: 24px;
+    margin-top: 0;
+    margin-bottom: 0;
     margin-right: 16px;
     color: $blue-50;
 
@@ -138,6 +143,11 @@
     }
 }
 
+.search-results__section-subtitle {
+    margin-top: 4px;
+    color: $blue-60;
+}
+
 .search-results__show-more-container {
     @include body-3-medium;
     em {

diff --git a/site/search/SearchPanel.tsx b/site/search/SearchPanel.tsx
@@ -608,18 +608,20 @@ const SearchResults = (props: SearchResultsProps) => {
             />
             <NoResultsBoundary>
                 <section className="search-results__pages">
-                    <header className="search-results__header">
-                        <h2 className="h2-bold search-results__section-title">
-                            Research & Writing
-                        </h2>
-                        <ShowMore
-                            category={SearchIndexName.Pages}
-                            cutoffNumber={4}
-                            activeCategoryFilter={activeCategoryFilter}
-                            handleCategoryFilterClick={
-                                handleCategoryFilterClick
-                            }
-                        />
+                    <header className="search-results__header-container">
+                        <div className="search-results__header">
+                            <h2 className="h2-bold search-results__section-title">
+                                Research & Writing
+                            </h2>
+                            <ShowMore
+                                category={SearchIndexName.Pages}
+                                cutoffNumber={4}
+                                activeCategoryFilter={activeCategoryFilter}
+                                handleCategoryFilterClick={
+                                    handleCategoryFilterClick
+                                }
+                            />
+                        </div>
                     </header>
                     <Hits
                         classNames={{
@@ -642,18 +644,20 @@ const SearchResults = (props: SearchResultsProps) => {
                 />
                 <NoResultsBoundary>
                     <section className="search-results__charts">
-                        <header className="search-results__header">
-                            <h2 className="h2-bold search-results__section-title">
-                                Charts
-                            </h2>
-                            <ShowMore
-                                category={SearchIndexName.Charts}
-                                cutoffNumber={4}
-                                activeCategoryFilter={activeCategoryFilter}
-                                handleCategoryFilterClick={
-                                    handleCategoryFilterClick
-                                }
-                            />
+                        <header className="search-results__header-container">
+                            <div className="search-results__header">
+                                <h2 className="h2-bold search-results__section-title">
+                                    Charts
+                                </h2>
+                                <ShowMore
+                                    category={SearchIndexName.Charts}
+                                    cutoffNumber={4}
+                                    activeCategoryFilter={activeCategoryFilter}
+                                    handleCategoryFilterClick={
+                                        handleCategoryFilterClick
+                                    }
+                                />
+                            </div>
                         </header>
                         <Hits
                             classNames={{
@@ -677,22 +681,29 @@ const SearchResults = (props: SearchResultsProps) => {
                 />
                 <NoResultsBoundary>
                     <section className="search-results__explorers">
-                        <header className="search-results__header">
-                            <h2 className="h2-bold search-results__section-title">
-                                Data Explorers
-                            </h2>
-                            <ShowMore
-                                category={SearchIndexName.ExplorerViews}
-                                cutoffNumber={2}
-                                activeCategoryFilter={activeCategoryFilter}
-                                handleCategoryFilterClick={
-                                    handleCategoryFilterClick
-                                }
-                                getTotalNumberOfHits={(
-                                    results: AlgoliaSearchResultsType<IExplorerViewHit>
-                                ) => getNumberOfExplorerHits(results.hits)}
-                            />
+                        <header className="search-results__header-container">
+                            <div className="search-results__header">
+                                <h2 className="h2-bold search-results__section-title">
+                                    Data Explorers
+                                </h2>
+                                <ShowMore
+                                    category={SearchIndexName.ExplorerViews}
+                                    cutoffNumber={2}
+                                    activeCategoryFilter={activeCategoryFilter}
+                                    handleCategoryFilterClick={
+                                        handleCategoryFilterClick
+                                    }
+                                    getTotalNumberOfHits={(
+                                        results: AlgoliaSearchResultsType<IExplorerViewHit>
+                                    ) => getNumberOfExplorerHits(results.hits)}
+                                />
+                            </div>
+                            <h3 className="body-2-regular search-results__section-subtitle">
+                                Interactive visualization tools to explore a
+                                wide range of related indicators.
+                            </h3>
                         </header>
+
                         <ExplorerViewHits
                             countriesRegionsToSelect={searchQueryRegionsMatches}
                         />