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

Adapt predictive search layout to new api #2192

Merged
merged 15 commits into from
Jan 12, 2023
Merged

Adapt predictive search layout to new api #2192

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
79b785c
Adapt predictive search layout to new api
FCalabria Jan 4, 2023
2a03fb9
PR fixes
FCalabria Jan 4, 2023
009b095
Update 21 translation files
translation-platform[bot] Jan 5, 2023
4a5f90d
A11y fixes
FCalabria Jan 5, 2023
45974a6
Update 12 translation files
translation-platform[bot] Jan 5, 2023
b71439b
Update 8 translation files
translation-platform[bot] Jan 6, 2023
e495b48
Update 11 translation files
translation-platform[bot] Jan 6, 2023
0e154d3
Label fix
FCalabria Jan 9, 2023
42c8a6c
PR small fixes
FCalabria Jan 9, 2023
7b6609d
More fixes
FCalabria Jan 10, 2023
b710eca
Merge branch 'main' into new-predictive-search-api-adaptation
FCalabria Jan 10, 2023
23eba59
Update 17 translation files
translation-platform[bot] Jan 10, 2023
9a49543
Update 7 translation files
translation-platform[bot] Jan 10, 2023
ea68a1a
fix text underline and centered headings
NathanPJF Jan 11, 2023
cc1d87a
additional opacity change
NathanPJF Jan 11, 2023
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
6 changes: 3 additions & 3 deletions assets/component-predictive-search.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,9 @@ predictive-search[loading] .predictive-search {
}

.predictive-search__heading {
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.2);
margin: 0;
padding: 1.5rem 2rem 0.75rem;
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
margin: 0 2rem;
padding: 1.5rem 0 0.75rem;
color: rgba(var(--color-foreground), 0.7);
}

Expand Down
14 changes: 8 additions & 6 deletions sections/main-search.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,14 @@
{%- endstyle -%}

<div class="template-search{% unless search.performed and search.results_count > 0 %} template-search--empty{% endunless %} section-{{ section.id }}-padding">
<div class="template-search__header page-width center">
{%- if search.performed -%}
<h1 class="h2">{{ 'templates.search.title' | t }}</h1>
{%- else -%}
<h1 class="h2">{{ 'general.search.search' | t }}</h1>
{%- endif -%}
<div class="template-search__header page-width">
<h1 class="h2 center">
{%- if search.performed -%}
{{- 'templates.search.title' | t -}}
{%- else -%}
{{- 'general.search.search' | t -}}
{%- endif -%}
</h1>
<div class="template-search__search">
{%- if settings.predictive_search_enabled -%}
<predictive-search data-loading-text="{{ 'accessibility.loading' | t }}">
Expand Down
8 changes: 4 additions & 4 deletions sections/predictive-search.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
{%- if predictive_search.resources.queries.size > 0 or predictive_search.resources.collections.size > 0 -%}
<div>
<h2 id="predictive-search-queries" class="predictive-search__heading text-body caption-with-letter-spacing">
{{ 'templates.search.suggestions' | t }}
{{- 'templates.search.suggestions' | t -}}
Copy link
Contributor

Choose a reason for hiding this comment

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

While reviewing the output, I noticed that the whitespaces were being rendered in the inspector. This doesn't have an impact on the UI really, but it makes the output more inline with what we want.

</h2>
<ul id="predictive-search-results-queries-list" class="predictive-search__results-list list-unstyled" role="group" aria-labelledby="predictive-search-queries">
{%- for query in predictive_search.resources.queries -%}
Expand All @@ -42,7 +42,7 @@
{%- if predictive_search.resources.articles.size > 0 or predictive_search.resources.pages.size > 0 -%}
<div class="predictive-search__pages-wrapper">
<h2 id="predictive-search-pages-desktop" class="predictive-search__heading text-body caption-with-letter-spacing">
{{ 'templates.search.pages' | t }}
{{- 'templates.search.pages' | t -}}
</h2>
<ul id="predictive-search-results-pages-list-desktop" class="predictive-search__results-list list-unstyled" role="group" aria-labelledby="predictive-search-pages-desktop">
{%- for page in predictive_search.resources.pages -%}
Expand Down Expand Up @@ -74,7 +74,7 @@
{%- if predictive_search.resources.products.size > 0 -%}
<div>
<h2 id="predictive-search-products" class="predictive-search__heading text-body caption-with-letter-spacing">
{{ 'templates.search.products' | t }}
{{- 'templates.search.products' | t -}}
</h2>
<ul id="predictive-search-results-products-list" class="predictive-search__results-list list-unstyled" role="group" aria-labelledby="predictive-search-products">
{%- for product in predictive_search.resources.products -%}
Expand Down Expand Up @@ -103,7 +103,7 @@
{%- if predictive_search.resources.articles.size > 0 or predictive_search.resources.pages.size > 0 -%}
<div class="predictive-search__pages-wrapper">
<h2 id="predictive-search-pages-mobile" class="predictive-search__heading text-body caption-with-letter-spacing">
{{ 'templates.search.pages' | t }}
{{- 'templates.search.pages' | t -}}
</h2>
<ul id="predictive-search-results-pages-list-mobile" class="predictive-search__results-list list-unstyled" role="group" aria-labelledby="predictive-search-pages-mobile">
{%- for page in predictive_search.resources.pages -%}
Expand Down