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

Jump to bottom

fix: autocomplete to alpha.44 #227

Merged
merged 5 commits into from
Mar 4, 2021
Merged

fix: autocomplete to alpha.44 #227

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
965a22e
fix: upgrade to autocomplete alpha 44 and fix CSS color issues
sbellone Mar 2, 2021
5fb6f08
Expose detachedMediaQuery option
sbellone Mar 2, 2021
8aff4b9
Import autocomplete-theme-classic
sbellone Mar 2, 2021
3b2e76c
cross button hover color
sbellone Mar 3, 2021
82a54bf
Changed detached config API
sbellone Mar 3, 2021
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
5 changes: 3 additions & 2 deletions frontend/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,9 @@ algoliasearchNetlify({
analytics: true, // Enable search analytics
hitsPerPage: 5, // Amount of results to display
poweredBy: true, // Controls displaying the logo (mandatory with our FREE plan)
placeholder: 'Search...'; // Input placeholder
openOnFocus: true; // Open search panel with default search, when focusing input
placeholder: 'Search...', // Input placeholder
openOnFocus: true, // Open search panel with default search, when focusing input
detachedMediaQuery: '(max-width: 500px)', // Media query to determine when the search popup should open in detached mode (full screen, modal experience). Set to 'none' to never go in detached mode.

// Theme
theme: {
Expand Down
4 changes: 2 additions & 2 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
"postinstall": "[ -d dist/ ] || npm run build"
},
"devDependencies": {
"@algolia/autocomplete-js": "1.0.0-alpha.41",
"@algolia/autocomplete-preset-algolia": "1.0.0-alpha.43",
"@algolia/autocomplete-js": "1.0.0-alpha.44",
"@algolia/autocomplete-preset-algolia": "1.0.0-alpha.44",
"@algolia/transporter": "4.8.5",
"@babel/core": "7.12.10",
"@babel/preset-env": "7.12.11",
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/AutocompleteWrapper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { SearchClient } from 'algoliasearch/lite';
import type { HighlightedHit } from '@algolia/autocomplete-preset-algolia';

import algoliasearch from 'algoliasearch/lite';
import type { Hit } from '@algolia/client-search';
Expand Down Expand Up @@ -48,6 +49,7 @@ class AutocompleteWrapper {
debug: this.options.debug,
openOnFocus: this.options.openOnFocus,
panelPlacement: 'input-wrapper-width',
detachedMediaQuery: this.options.detachedMediaQuery,
getSources: () => {
return [this.getSources()];
},
Expand Down Expand Up @@ -75,7 +77,7 @@ class AutocompleteWrapper {
return client;
}

private getSources(): AutocompleteSource<AlgoliaRecord> {
private getSources(): AutocompleteSource<HighlightedHit<AlgoliaRecord>> {
const poweredBy = this.options.poweredBy;
return {
sourceId: 'algoliaHits',
Expand Down Expand Up @@ -128,7 +130,7 @@ class AutocompleteWrapper {

const theme = this.options.theme;
this.$themeNode = addCss(
`.aa-Autocomplete, .aa-Panel {
`.aa-Autocomplete, .aa-Panel, .aa-DetachedContainer {
${theme.mark && `--color-mark: ${theme.mark};`}
${theme.mark && `--color-background: ${theme.background};`}
${theme.mark && `--color-selected: ${theme.selected};`}
Expand Down
Loading