Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explorer search: Incorporate design feedback #3493

Merged
merged 11 commits into from
Apr 16, 2024
Merged

Explorer search: Incorporate design feedback #3493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
342337f
enhance(search): disallow line break between explorer view title and …
marcelgerber Apr 15, 2024
cd1a706
enhance(search): subtitle for explorers section
marcelgerber Apr 15, 2024
c6bc9c8
fix(search): fix show more button styles on mobile
marcelgerber Apr 15, 2024
28df61d
enhance(search): smaller "Explore all indicators" link
marcelgerber Apr 15, 2024
47b88d3
enhance(search): set line-height for chart title
marcelgerber Apr 15, 2024
a72bb44
enhance(search): "Data Explorer" suffix for all data explorers
marcelgerber Apr 15, 2024
13b29e5
enhance(search): search bar padding & placeholder styles
marcelgerber Apr 15, 2024
3fd27c3
enhance(search): explicitly set white background color
marcelgerber Apr 15, 2024
2481797
enhance(search): bigger row-gap for charts
marcelgerber Apr 15, 2024
72c2029
enhance(search): feature country-searching in search placeholder
marcelgerber Apr 15, 2024
3d152a7
enhance(search): update search placeholder
marcelgerber Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions site/gdocs/components/centered-article.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1124,6 +1124,10 @@ div.raw-html-table__container {
&::placeholder {
color: $blue-40;
}

&:placeholder-shown {
text-overflow: ellipsis;
}
}

.aa-InputWrapperPrefix {
Expand Down
71 changes: 54 additions & 17 deletions site/search/Search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand 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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;

Expand All @@ -138,6 +154,11 @@
}
}

.search-results__section-subtitle {
margin-top: 4px;
color: $blue-90;
}

.search-results__show-more-container {
@include body-3-medium;
em {
Expand All @@ -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;
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -244,6 +274,7 @@
}

.search-results__explorer-hit-link-mobile {
@include body-3-medium;
@include owid-link-60;
margin-top: 16px;
display: block;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
147 changes: 83 additions & 64 deletions site/search/SearchPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
Expand Down Expand Up @@ -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",
}
Expand All @@ -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) => {
Expand Down Expand Up @@ -316,7 +318,11 @@ function ExplorerHit({
highlightedTagName="strong"
className="search-results__explorer-view-title"
/>
<FontAwesomeIcon icon={faArrowRight} />
<span className="nowrap icon-container">
&zwj;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

neat!

{/* 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}
Expand Down Expand Up @@ -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>
)
}
Expand Down Expand Up @@ -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={{
Expand All @@ -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={{
Expand All @@ -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}
/>
Expand Down
2 changes: 1 addition & 1 deletion site/search/searchClient.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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”…"