Skip to content
This repository was archived by the owner on Dec 16, 2022. It is now read-only.

fix: templates without facets #38

Merged
merged 9 commits into from
Jun 7, 2018
Merged

fix: templates without facets #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
338dcc6
fix(Angular): don't generate an empty div without facets
samouss Jun 7, 2018
3e1b160
fix(React): don't generate an empty div without facets
samouss Jun 7, 2018
02f2160
fix(Vue): don't generate an empty div without facets
samouss Jun 7, 2018
0359605
chore: ignore vscode workspace configuration
samouss Jun 7, 2018
359d25a
fix(vanilla): don't generate an empty div without facets
francoischalifour Jun 7, 2018
6a9325b
feat(angular): Use flexbox display
francoischalifour Jun 7, 2018
ef69dec
feat(react): Use flexbox display
francoischalifour Jun 7, 2018
a83c4bf
feat(vue): Use flexbox display
francoischalifour Jun 7, 2018
22a9f04
test(e2e): Update snapshots
francoischalifour Jun 7, 2018
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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ node_modules

# misc
.DS_Store
.vscode
.env.local
.env.development.local
.env.test.local
Expand Down
96 changes: 60 additions & 36 deletions scripts/__snapshots__/e2e-templates.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,13 +328,19 @@ exports[`Templates Angular InstantSearch File content: src/app/app.component.css
padding: 1rem;
}

.container-app {
display: grid;
grid-template-columns: 20% 75%;
grid-gap: 5%;
.search-panel {
display: flex;
}

.search-panel__filters {
flex: 1;
}

.search-panel__results {
flex: 3;
}

.searchBox {
.searchbox {
margin-bottom: 2rem;
}

Expand All @@ -359,14 +365,14 @@ exports[`Templates Angular InstantSearch File content: src/app/app.component.htm

<div class=\\"container\\">
<ais-instantsearch [config]=\\"config\\">
<div class=\\"container-app\\">
<div class=\\"filters\\">
<div class=\\"search-panel\\">
<div class=\\"search-panel__filters\\">
<ais-refinement-list attribute=\\"facet1\\"></ais-refinement-list>
<ais-refinement-list attribute=\\"facet2\\"></ais-refinement-list>
</div>

<div class=\\"search-container\\">
<div class=\\"searchBox\\">
<div class=\\"search-panel__results\\">
<div class=\\"searchbox\\">
<ais-search-box placeholder=\\"Search placeholder\\"></ais-search-box>
</div>

Expand Down Expand Up @@ -1020,14 +1026,14 @@ exports[`Templates InstantSearch.js File content: index.html 1`] = `
</header>

<div class=\\"container\\">
<div class=\\"container-app\\">
<div class=\\"filters\\">
<div class=\\"search-panel\\">
<div class=\\"search-panel__filters\\">
<div id=\\"facet1-list\\"></div>
<div id=\\"facet2-list\\"></div>
</div>

<div class=\\"search-container\\">
<div id=\\"searchBox\\"></div>
<div class=\\"search-panel__results\\">
<div id=\\"searchbox\\"></div>
<div id=\\"hits\\"></div>
</div>
</div>
Expand Down Expand Up @@ -1116,10 +1122,16 @@ exports[`Templates InstantSearch.js File content: src/app.css 1`] = `
padding: 1rem;
}

.container-app {
display: grid;
grid-template-columns: 20% 75%;
grid-gap: 5%;
.search-panel {
display: flex;
}

.search-panel__filters {
flex: 1;
}

.search-panel__results {
flex: 3;
}

.ais-hits {
Expand All @@ -1137,7 +1149,7 @@ exports[`Templates InstantSearch.js File content: src/app.css 1`] = `
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16);
}

#searchBox {
#searchbox {
margin-bottom: 2rem;
}

Expand All @@ -1158,7 +1170,7 @@ const search = instantsearch({

search.addWidget(
instantsearch.widgets.searchBox({
container: '#searchBox',
container: '#searchbox',
placeholder: 'Search placeholder',
})
);
Expand Down Expand Up @@ -1385,13 +1397,19 @@ exports[`Templates React InstantSearch File content: src/App.css 1`] = `
padding: 1rem;
}

.container-app {
display: grid;
grid-template-columns: 20% 75%;
grid-gap: 5%;
.search-panel {
display: flex;
}

.search-panel__filters {
flex: 1;
}

.search-panel__results {
flex: 3;
}

.searchBox {
.searchbox {
margin-bottom: 2rem;
}

Expand Down Expand Up @@ -1436,14 +1454,14 @@ class App extends Component {
apiKey=\\"apiKey\\"
indexName=\\"indexName\\"
>
<div className=\\"container-app\\">
<div className=\\"filters\\">
<div className=\\"search-panel\\">
<div className=\\"search-panel__filters\\">
<RefinementList attribute=\\"facet1\\" />
<RefinementList attribute=\\"facet2\\" />
</div>

<div className=\\"search-container\\">
<SearchBox className=\\"searchBox\\" placeholder=\\"Search placeholder\\" />
<div className=\\"search-panel__results\\">
<SearchBox className=\\"searchbox\\" placeholder=\\"Search placeholder\\" />
<Hits hitComponent={Hit} />

<div className=\\"pagination\\">
Expand Down Expand Up @@ -1651,13 +1669,13 @@ exports[`Templates Vue InstantSearch File content: src/App.vue 1`] = `
api-key=\\"apiKey\\"
index-name=\\"indexName\\"
>
<div class=\\"container-app\\">
<div class=\\"filters\\">
<div class=\\"search-panel\\">
<div class=\\"search-panel__filters\\">
<ais-refinement-list attribute-name=\\"facet1\\"></ais-refinement-list>
<ais-refinement-list attribute-name=\\"facet2\\"></ais-refinement-list>
</div>

<div class=\\"search-container\\">
<div class=\\"search-panel__results\\">
<ais-search-box
placeholder=\\"Search placeholder\\"
class=\\"ais-SearchBox-form\\"
Expand Down Expand Up @@ -1752,13 +1770,19 @@ em {
padding: 1rem;
}

.container-app {
display: grid;
grid-template-columns: 20% 75%;
grid-gap: 5%;
.search-panel {
display: flex;
}

.search-panel__filters {
flex: 1;
}

.search-panel__results {
flex: 3;
}

.searchBox {
.searchbox {
margin-bottom: 2rem;
}

Expand Down
16 changes: 11 additions & 5 deletions templates/Angular InstantSearch/src/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,19 @@
padding: 1rem;
}

.container-app {
display: grid;
grid-template-columns: 20% 75%;
grid-gap: 5%;
.search-panel {
display: flex;
}

.search-panel__filters {
flex: 1;
}

.search-panel__results {
flex: 3;
}

.searchBox {
.searchbox {
margin-bottom: 2rem;
}

Expand Down
10 changes: 6 additions & 4 deletions templates/Angular InstantSearch/src/app/app.component.html.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,17 @@

<div class="container">
<ais-instantsearch [config]="config">
<div class="container-app">
<div class="filters">
<div class="search-panel">
{{#if attributesForFaceting}}
<div class="search-panel__filters">
{{#each attributesForFaceting}}
<ais-refinement-list attribute="{{this}}"></ais-refinement-list>
{{/each}}
</div>

<div class="search-container">
<div class="searchBox">
{{/if}}
<div class="search-panel__results">
<div class="searchbox">
<ais-search-box placeholder="{{searchPlaceholder}}"></ais-search-box>
</div>

Expand Down
10 changes: 6 additions & 4 deletions templates/InstantSearch.js/index.html.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,17 @@
</header>

<div class="container">
<div class="container-app">
<div class="filters">
<div class="search-panel">
{{#if attributesForFaceting}}
<div class="search-panel__filters">
{{#each attributesForFaceting}}
<div id="{{this}}-list"></div>
{{/each}}
</div>

<div class="search-container">
<div id="searchBox"></div>
{{/if}}
<div class="search-panel__results">
<div id="searchbox"></div>
<div id="hits"></div>
</div>
</div>
Expand Down
16 changes: 11 additions & 5 deletions templates/InstantSearch.js/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,16 @@ em {
padding: 1rem;
}

.container-app {
display: grid;
grid-template-columns: 20% 75%;
grid-gap: 5%;
.search-panel {
display: flex;
}

.search-panel__filters {
flex: 1;
}

.search-panel__results {
flex: 3;
}

.ais-hits {
Expand All @@ -59,7 +65,7 @@ em {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16);
}

#searchBox {
#searchbox {
margin-bottom: 2rem;
}

Expand Down
2 changes: 1 addition & 1 deletion templates/InstantSearch.js/src/app.js.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const search = instantsearch({

search.addWidget(
instantsearch.widgets.searchBox({
container: '#searchBox',
container: '#searchbox',
{{#if searchPlaceholder}}
placeholder: '{{searchPlaceholder}}',
{{/if}}
Expand Down
16 changes: 11 additions & 5 deletions templates/React InstantSearch/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,19 @@ em {
padding: 1rem;
}

.container-app {
display: grid;
grid-template-columns: 20% 75%;
grid-gap: 5%;
.search-panel {
display: flex;
}

.search-panel__filters {
flex: 1;
}

.search-panel__results {
flex: 3;
}

.searchBox {
.searchbox {
margin-bottom: 2rem;
}

Expand Down
10 changes: 6 additions & 4 deletions templates/React InstantSearch/src/App.js.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,17 @@ class App extends Component {
apiKey="{{apiKey}}"
indexName="{{indexName}}"
>
<div className="container-app">
<div className="filters">
<div className="search-panel">
{{#if attributesForFaceting}}
<div className="search-panel__filters">
{{#each attributesForFaceting}}
<RefinementList attribute="{{this}}" />
{{/each}}
</div>

<div className="search-container">
<SearchBox className="searchBox" placeholder="{{searchPlaceholder}}" />
{{/if}}
<div className="search-panel__results">
<SearchBox className="searchbox" placeholder="{{searchPlaceholder}}" />
<Hits hitComponent={Hit} />

<div className="pagination">
Expand Down
24 changes: 16 additions & 8 deletions templates/Vue InstantSearch/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,16 @@
api-key="{{apiKey}}"
index-name="{{indexName}}"
>
<div class="container-app">
<div class="filters">
<div class="search-panel">
{{#if attributesForFaceting.length}}
<div class="search-panel__filters">
{{#each attributesForFaceting}}
<ais-refinement-list attribute-name="{{this}}"></ais-refinement-list>
{{/each}}
</div>

<div class="search-container">
{{/if}}
<div class="search-panel__results">
<ais-search-box
placeholder="{{searchPlaceholder}}"
class="ais-SearchBox-form"
Expand Down Expand Up @@ -122,13 +124,19 @@ em {
padding: 1rem;
}

.container-app {
display: grid;
grid-template-columns: 20% 75%;
grid-gap: 5%;
.search-panel {
display: flex;
}

.search-panel__filters {
flex: 1;
}

.search-panel__results {
flex: 3;
}

.searchBox {
.searchbox {
margin-bottom: 2rem;
}

Expand Down