Explorer search: Incorporate design feedback (#3493)

* enhance(search): disallow line break between explorer view title and icon * enhance(search): subtitle for explorers section * fix(search): fix show more button styles on mobile * enhance(search): smaller "Explore all indicators" link * enhance(search): set line-height for chart title * enhance(search): "Data Explorer" suffix for all data explorers * enhance(search): search bar padding & placeholder styles * enhance(search): explicitly set white background color iOS Safari was using some grey as its default * enhance(search): bigger row-gap for charts * enhance(search): feature country-searching in search placeholder * enhance(search): update search placeholder
owid · Apr 16, 2024 · f7e23da · f7e23da
1 parent 1215d1e
commit f7e23da
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 82 deletions.
diff --git a/site/gdocs/components/centered-article.scss b/site/gdocs/components/centered-article.scss
@@ -1124,6 +1124,10 @@ div.raw-html-table__container {
         &::placeholder {
             color: $blue-40;
         }
+
+        &:placeholder-shown {
+            text-overflow: ellipsis;
+        }
     }
 
     .aa-InputWrapperPrefix {

diff --git a/site/search/Search.scss b/site/search/Search.scss
@@ -1,3 +1,6 @@
+$reset-button-size: 24px;
+$reset-button-margin: 16px;
+
 .search-page-container {
     min-height: calc(100vh - $header-height-sm);
     @include sm-up {
@@ -29,11 +32,19 @@
 }
 
 .ais-SearchBox-input {
+    background-color: white;
     width: 100%;
     height: 56px;
     padding-left: 16px;
-    // To conceal the placeholder text underneath the svg buttons on mobile
-    padding-right: 100px;
+    // To give room to the "Clear" button to the right
+    padding-right: $reset-button-size + $reset-button-margin + 4px;
+
+    // If the placeholder is shown, then the Clear button is not shown
+    &:placeholder-shown {
+        padding-right: 16px;
+        text-overflow: ellipsis;
+    }
+
     border: none;
     outline: $blue-20 1px solid;
     outline-offset: 0px;
@@ -46,7 +57,7 @@
 .ais-SearchBox-reset {
     display: inline-block;
     position: absolute;
-    right: 16px;
+    right: $reset-button-margin;
     top: 30%;
     border: none;
     border-radius: 16px;
@@ -122,14 +133,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 +154,11 @@
     }
 }
 
+.search-results__section-subtitle {
+    margin-top: 4px;
+    color: $blue-90;
+}
+
 .search-results__show-more-container {
     @include body-3-medium;
     em {
@@ -151,6 +172,10 @@
         cursor: pointer;
     }
 
+    &.show-more-btn-hidden button {
+        visibility: hidden; // Don't show the button, but keep the margin/padding for mobile layout
+    }
+
     @include sm-only {
         position: absolute;
         display: flex;
@@ -200,6 +225,11 @@
     }
 }
 
+// For charts, make it clearer that the title etc. belong to the chart above
+.search-results__charts-list {
+    row-gap: calc(2 * var(--grid-gap));
+}
+
 .search-results__page-hit {
     list-style: none;
 
@@ -244,6 +274,7 @@
     }
 
     .search-results__explorer-hit-link-mobile {
+        @include body-3-medium;
         @include owid-link-60;
         margin-top: 16px;
         display: block;
@@ -271,25 +302,28 @@
         }
 
         .search-results__explorer-hit-link {
-            @include owid-link-60;
             margin-top: 0;
-            flex: 1 0 auto;
+            flex: 0 0 auto;
             text-align: right;
+
+            a {
+                @include body-3-medium;
+                @include owid-link-60;
+            }
         }
     }
 
     .search-results__explorer-views-list {
-        margin-left: 20px;
-        margin-top: 5px;
+        margin-top: 16px;
         list-style: none;
         gap: 16px;
 
         .search-results__explorer-view {
+            margin-left: 24px;
             overflow: hidden;
 
             .search-results__explorer-view-title-container {
                 color: $blue-90;
-                text-decoration: underline;
                 @include owid-link-90;
 
                 svg {
@@ -334,14 +368,17 @@
     }
 }
 
-.search-results__chart-hit-highlight {
-    line-height: 21px;
-    color: $blue-90;
-}
+.search-results__chart-hit-title-container {
+    line-height: 20px;
 
-.search-results__chart-hit-variant {
-    color: $blue-60;
-    font-size: 0.9em;
+    .search-results__chart-hit-highlight {
+        color: $blue-90;
+    }
+
+    .search-results__chart-hit-variant {
+        color: $blue-60;
+        font-size: 0.9em;
+    }
 }
 
 @keyframes chartErrorFadeIn {

diff --git a/site/search/SearchPanel.tsx b/site/search/SearchPanel.tsx
@@ -143,15 +143,17 @@ function ChartHit({ hit }: { hit: IChartHit }) {
                     onError={() => setImgError(true)}
                 />
             </div>
-            <Highlight
-                attribute="title"
-                highlightedTagName="strong"
-                className="search-results__chart-hit-highlight"
-                hit={hit}
-            />{" "}
-            <span className="search-results__chart-hit-variant">
-                {hit.variantName}
-            </span>
+            <div className="search-results__chart-hit-title-container">
+                <Highlight
+                    attribute="title"
+                    highlightedTagName="strong"
+                    className="search-results__chart-hit-highlight"
+                    hit={hit}
+                />{" "}
+                <span className="search-results__chart-hit-variant">
+                    {hit.variantName}
+                </span>
+            </div>
         </a>
     )
 }
@@ -249,8 +251,8 @@ function ExplorerHit({
         href: `${BAKED_BASE_URL}/${EXPLORERS_ROUTE_FOLDER}/${groupedHit.explorerSlug}${queryStr}`,
         "data-algolia-index": getIndexName(SearchIndexName.ExplorerViews),
         "data-algolia-object-id": firstHit.objectID,
-        "data-algolia-position": firstHit.hitPositionOverall,
-        "data-algolia-card-position": cardPosition,
+        "data-algolia-position": firstHit.hitPositionOverall + 1,
+        "data-algolia-card-position": cardPosition + 1,
         "data-algolia-position-within-card": 0,
         "data-algolia-event-name": "click_explorer",
     }
@@ -263,19 +265,19 @@ function ExplorerHit({
             <div className="search-results__explorer-hit-header">
                 <div className="search-results__explorer-hit-title-container">
                     <h3 className="h3-bold search-results__explorer-hit-title">
-                        {groupedHit.explorerTitle}
+                        {groupedHit.explorerTitle} Data Explorer
                     </h3>
                     <p className="body-3-medium-italic search-results__explorer-hit-subtitle">
                         {groupedHit.explorerSubtitle}
                     </p>
                 </div>
 
-                <a
-                    className="search-results__explorer-hit-link hide-sm-only"
-                    {...exploreAllProps}
-                >
-                    Explore all {groupedHit.numViewsWithinExplorer} indicators
-                </a>
+                <div className="search-results__explorer-hit-link hide-sm-only">
+                    <a {...exploreAllProps}>
+                        Explore all {groupedHit.numViewsWithinExplorer}{" "}
+                        indicators
+                    </a>
+                </div>
             </div>
             <ul className="search-results__explorer-views-list grid grid-cols-2 grid-sm-cols-1">
                 {groupedHit.views.map((view) => {
@@ -316,7 +318,11 @@ function ExplorerHit({
                                     highlightedTagName="strong"
                                     className="search-results__explorer-view-title"
                                 />
-                                <FontAwesomeIcon icon={faArrowRight} />
+                                <span className="nowrap icon-container">
+                                    &zwj;
+                                    {/* Zero-width joiner to prevent line break between title and icon */}
+                                    <FontAwesomeIcon icon={faArrowRight} />
+                                </span>
                             </a>
                             <p className="body-3-medium-italic search-results__explorer-view-subtitle">
                                 {view.viewSubtitle}
@@ -370,13 +376,15 @@ function ShowMore({
         : `Showing ${numberShowing} of the top ${totalNumberOfHits} results`
 
     return (
-        <div className="search-results__show-more-container">
+        <div
+            className={cx("search-results__show-more-container", {
+                "show-more-btn-hidden": isShowingAllResults,
+            })}
+        >
             <em>{message}</em>
-            {!isShowingAllResults && (
-                <button aria-label="Show more results" onClick={handleClick}>
-                    Show more
-                </button>
-            )}
+            <button aria-label="Show more results" onClick={handleClick}>
+                Show more
+            </button>
         </div>
     )
 }
@@ -604,18 +612,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={{
@@ -638,18 +648,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={{
@@ -673,22 +685,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}
                         />

diff --git a/site/search/searchClient.ts b/site/search/searchClient.ts
@@ -52,4 +52,4 @@ export const logSiteSearchClickToAlgoliaInsights = (
 }
 
 export const DEFAULT_SEARCH_PLACEHOLDER =
-    "Try “Life expectancy”, “Economic Growth”, “Homicide rate”, “Biodiversity”…"
+    "Try “Life expectancy”, “Poverty Nigeria Vietnam”, “CO2 France”…"