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

Commit f860c2c

Browse files
samoussfrancoischalifour
samouss
authored and
francoischalifour
committed
fix(templates): Remove empty div when no facets (#38)
* fix(Angular): don't generate an empty div without facets * fix(React): don't generate an empty div without facets * fix(Vue): don't generate an empty div without facets * chore: ignore vscode workspace configuration * fix(vanilla): don't generate an empty div without facets * feat(angular): Use flexbox display * feat(react): Use flexbox display * feat(vue): Use flexbox display * test(e2e): Update snapshots
1 parent 475f7a7 commit f860c2c

File tree

10 files changed

+129
-72
lines changed

10 files changed

+129
-72
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ node_modules
33

44
# misc
55
.DS_Store
6+
.vscode
67
.env.local
78
.env.development.local
89
.env.test.local

‎scripts/__snapshots__/e2e-templates.test.js.snap‎

Lines changed: 60 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -328,13 +328,19 @@ exports[`Templates Angular InstantSearch File content: src/app/app.component.css
328328
padding: 1rem;
329329
}
330330
331-
.container-app {
332-
display: grid;
333-
grid-template-columns: 20% 75%;
334-
grid-gap: 5%;
331+
.search-panel {
332+
display: flex;
333+
}
334+
335+
.search-panel__filters {
336+
flex: 1;
337+
}
338+
339+
.search-panel__results {
340+
flex: 3;
335341
}
336342
337-
.searchBox {
343+
.searchbox {
338344
margin-bottom: 2rem;
339345
}
340346
@@ -359,14 +365,14 @@ exports[`Templates Angular InstantSearch File content: src/app/app.component.htm
359365
360366
<div class=\\"container\\">
361367
<ais-instantsearch [config]=\\"config\\">
362-
<div class=\\"container-app\\">
363-
<div class=\\"filters\\">
368+
<div class=\\"search-panel\\">
369+
<div class=\\"search-panel__filters\\">
364370
<ais-refinement-list attribute=\\"facet1\\"></ais-refinement-list>
365371
<ais-refinement-list attribute=\\"facet2\\"></ais-refinement-list>
366372
</div>
367373
368-
<div class=\\"search-container\\">
369-
<div class=\\"searchBox\\">
374+
<div class=\\"search-panel__results\\">
375+
<div class=\\"searchbox\\">
370376
<ais-search-box placeholder=\\"Search placeholder\\"></ais-search-box>
371377
</div>
372378
@@ -1020,14 +1026,14 @@ exports[`Templates InstantSearch.js File content: index.html 1`] = `
10201026
</header>
10211027
10221028
<div class=\\"container\\">
1023-
<div class=\\"container-app\\">
1024-
<div class=\\"filters\\">
1029+
<div class=\\"search-panel\\">
1030+
<div class=\\"search-panel__filters\\">
10251031
<div id=\\"facet1-list\\"></div>
10261032
<div id=\\"facet2-list\\"></div>
10271033
</div>
10281034
1029-
<div class=\\"search-container\\">
1030-
<div id=\\"searchBox\\"></div>
1035+
<div class=\\"search-panel__results\\">
1036+
<div id=\\"searchbox\\"></div>
10311037
<div id=\\"hits\\"></div>
10321038
</div>
10331039
</div>
@@ -1116,10 +1122,16 @@ exports[`Templates InstantSearch.js File content: src/app.css 1`] = `
11161122
padding: 1rem;
11171123
}
11181124
1119-
.container-app {
1120-
display: grid;
1121-
grid-template-columns: 20% 75%;
1122-
grid-gap: 5%;
1125+
.search-panel {
1126+
display: flex;
1127+
}
1128+
1129+
.search-panel__filters {
1130+
flex: 1;
1131+
}
1132+
1133+
.search-panel__results {
1134+
flex: 3;
11231135
}
11241136
11251137
.ais-hits {
@@ -1137,7 +1149,7 @@ exports[`Templates InstantSearch.js File content: src/app.css 1`] = `
11371149
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16);
11381150
}
11391151
1140-
#searchBox {
1152+
#searchbox {
11411153
margin-bottom: 2rem;
11421154
}
11431155
@@ -1158,7 +1170,7 @@ const search = instantsearch({
11581170
11591171
search.addWidget(
11601172
instantsearch.widgets.searchBox({
1161-
container: '#searchBox',
1173+
container: '#searchbox',
11621174
placeholder: 'Search placeholder',
11631175
})
11641176
);
@@ -1385,13 +1397,19 @@ exports[`Templates React InstantSearch File content: src/App.css 1`] = `
13851397
padding: 1rem;
13861398
}
13871399
1388-
.container-app {
1389-
display: grid;
1390-
grid-template-columns: 20% 75%;
1391-
grid-gap: 5%;
1400+
.search-panel {
1401+
display: flex;
1402+
}
1403+
1404+
.search-panel__filters {
1405+
flex: 1;
1406+
}
1407+
1408+
.search-panel__results {
1409+
flex: 3;
13921410
}
13931411
1394-
.searchBox {
1412+
.searchbox {
13951413
margin-bottom: 2rem;
13961414
}
13971415
@@ -1436,14 +1454,14 @@ class App extends Component {
14361454
apiKey=\\"apiKey\\"
14371455
indexName=\\"indexName\\"
14381456
>
1439-
<div className=\\"container-app\\">
1440-
<div className=\\"filters\\">
1457+
<div className=\\"search-panel\\">
1458+
<div className=\\"search-panel__filters\\">
14411459
<RefinementList attribute=\\"facet1\\" />
14421460
<RefinementList attribute=\\"facet2\\" />
14431461
</div>
14441462
1445-
<div className=\\"search-container\\">
1446-
<SearchBox className=\\"searchBox\\" placeholder=\\"Search placeholder\\" />
1463+
<div className=\\"search-panel__results\\">
1464+
<SearchBox className=\\"searchbox\\" placeholder=\\"Search placeholder\\" />
14471465
<Hits hitComponent={Hit} />
14481466
14491467
<div className=\\"pagination\\">
@@ -1651,13 +1669,13 @@ exports[`Templates Vue InstantSearch File content: src/App.vue 1`] = `
16511669
api-key=\\"apiKey\\"
16521670
index-name=\\"indexName\\"
16531671
>
1654-
<div class=\\"container-app\\">
1655-
<div class=\\"filters\\">
1672+
<div class=\\"search-panel\\">
1673+
<div class=\\"search-panel__filters\\">
16561674
<ais-refinement-list attribute-name=\\"facet1\\"></ais-refinement-list>
16571675
<ais-refinement-list attribute-name=\\"facet2\\"></ais-refinement-list>
16581676
</div>
16591677
1660-
<div class=\\"search-container\\">
1678+
<div class=\\"search-panel__results\\">
16611679
<ais-search-box
16621680
placeholder=\\"Search placeholder\\"
16631681
class=\\"ais-SearchBox-form\\"
@@ -1752,13 +1770,19 @@ em {
17521770
padding: 1rem;
17531771
}
17541772
1755-
.container-app {
1756-
display: grid;
1757-
grid-template-columns: 20% 75%;
1758-
grid-gap: 5%;
1773+
.search-panel {
1774+
display: flex;
1775+
}
1776+
1777+
.search-panel__filters {
1778+
flex: 1;
1779+
}
1780+
1781+
.search-panel__results {
1782+
flex: 3;
17591783
}
17601784
1761-
.searchBox {
1785+
.searchbox {
17621786
margin-bottom: 2rem;
17631787
}
17641788

‎templates/Angular InstantSearch/src/app/app.component.css‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,19 @@
3333
padding: 1rem;
3434
}
3535

36-
.container-app {
37-
display: grid;
38-
grid-template-columns: 20% 75%;
39-
grid-gap: 5%;
36+
.search-panel {
37+
display: flex;
38+
}
39+
40+
.search-panel__filters {
41+
flex: 1;
42+
}
43+
44+
.search-panel__results {
45+
flex: 3;
4046
}
4147

42-
.searchBox {
48+
.searchbox {
4349
margin-bottom: 2rem;
4450
}
4551

‎templates/Angular InstantSearch/src/app/app.component.html.hbs‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,17 @@
1212

1313
<div class="container">
1414
<ais-instantsearch [config]="config">
15-
<div class="container-app">
16-
<div class="filters">
15+
<div class="search-panel">
16+
{{#if attributesForFaceting}}
17+
<div class="search-panel__filters">
1718
{{#each attributesForFaceting}}
1819
<ais-refinement-list attribute="{{this}}"></ais-refinement-list>
1920
{{/each}}
2021
</div>
2122

22-
<div class="search-container">
23-
<div class="searchBox">
23+
{{/if}}
24+
<div class="search-panel__results">
25+
<div class="searchbox">
2426
<ais-search-box placeholder="{{searchPlaceholder}}"></ais-search-box>
2527
</div>
2628

‎templates/InstantSearch.js/index.html.hbs‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,17 @@
3131
</header>
3232

3333
<div class="container">
34-
<div class="container-app">
35-
<div class="filters">
34+
<div class="search-panel">
35+
{{#if attributesForFaceting}}
36+
<div class="search-panel__filters">
3637
{{#each attributesForFaceting}}
3738
<div id="{{this}}-list"></div>
3839
{{/each}}
3940
</div>
4041

41-
<div class="search-container">
42-
<div id="searchBox"></div>
42+
{{/if}}
43+
<div class="search-panel__results">
44+
<div id="searchbox"></div>
4345
<div id="hits"></div>
4446
</div>
4547
</div>

‎templates/InstantSearch.js/src/app.css‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,16 @@ em {
3838
padding: 1rem;
3939
}
4040

41-
.container-app {
42-
display: grid;
43-
grid-template-columns: 20% 75%;
44-
grid-gap: 5%;
41+
.search-panel {
42+
display: flex;
43+
}
44+
45+
.search-panel__filters {
46+
flex: 1;
47+
}
48+
49+
.search-panel__results {
50+
flex: 3;
4551
}
4652

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

62-
#searchBox {
68+
#searchbox {
6369
margin-bottom: 2rem;
6470
}
6571

‎templates/InstantSearch.js/src/app.js.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const search = instantsearch({
88

99
search.addWidget(
1010
instantsearch.widgets.searchBox({
11-
container: '#searchBox',
11+
container: '#searchbox',
1212
{{#if searchPlaceholder}}
1313
placeholder: '{{searchPlaceholder}}',
1414
{{/if}}

‎templates/React InstantSearch/src/App.css‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,19 @@ em {
3838
padding: 1rem;
3939
}
4040

41-
.container-app {
42-
display: grid;
43-
grid-template-columns: 20% 75%;
44-
grid-gap: 5%;
41+
.search-panel {
42+
display: flex;
43+
}
44+
45+
.search-panel__filters {
46+
flex: 1;
47+
}
48+
49+
.search-panel__results {
50+
flex: 3;
4551
}
4652

47-
.searchBox {
53+
.searchbox {
4854
margin-bottom: 2rem;
4955
}
5056

‎templates/React InstantSearch/src/App.js.hbs‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,17 @@ class App extends Component {
3636
apiKey="{{apiKey}}"
3737
indexName="{{indexName}}"
3838
>
39-
<div className="container-app">
40-
<div className="filters">
39+
<div className="search-panel">
40+
{{#if attributesForFaceting}}
41+
<div className="search-panel__filters">
4142
{{#each attributesForFaceting}}
4243
<RefinementList attribute="{{this}}" />
4344
{{/each}}
4445
</div>
4546

46-
<div className="search-container">
47-
<SearchBox className="searchBox" placeholder="{{searchPlaceholder}}" />
47+
{{/if}}
48+
<div className="search-panel__results">
49+
<SearchBox className="searchbox" placeholder="{{searchPlaceholder}}" />
4850
<Hits hitComponent={Hit} />
4951

5052
<div className="pagination">

‎templates/Vue InstantSearch/src/App.vue‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,16 @@
1818
api-key="{{apiKey}}"
1919
index-name="{{indexName}}"
2020
>
21-
<div class="container-app">
22-
<div class="filters">
21+
<div class="search-panel">
22+
{{#if attributesForFaceting.length}}
23+
<div class="search-panel__filters">
2324
{{#each attributesForFaceting}}
2425
<ais-refinement-list attribute-name="{{this}}"></ais-refinement-list>
2526
{{/each}}
2627
</div>
2728

28-
<div class="search-container">
29+
{{/if}}
30+
<div class="search-panel__results">
2931
<ais-search-box
3032
placeholder="{{searchPlaceholder}}"
3133
class="ais-SearchBox-form"
@@ -122,13 +124,19 @@ em {
122124
padding: 1rem;
123125
}
124126
125-
.container-app {
126-
display: grid;
127-
grid-template-columns: 20% 75%;
128-
grid-gap: 5%;
127+
.search-panel {
128+
display: flex;
129+
}
130+
131+
.search-panel__filters {
132+
flex: 1;
133+
}
134+
135+
.search-panel__results {
136+
flex: 3;
129137
}
130138
131-
.searchBox {
139+
.searchbox {
132140
margin-bottom: 2rem;
133141
}
134142

0 commit comments

Comments
 (0)