Skip to content

Commit f8490e2

Browse files
borsbors
committed
Auto merge of #3349 - Turbo87:crate-list, r=pichfl
Extract `CrateList` component and improve the styling <img width="1051" alt="Bildschirmfoto 2021-02-27 um 13 10 42" src="https://user-images.githubusercontent.com/141300/109386760-3a978680-78fd-11eb-9b90-706f24ca0b0b.png"> <img width="1100" alt="Bildschirmfoto 2021-02-27 um 13 12 58" src="https://user-images.githubusercontent.com/141300/109386799-8b0ee400-78fd-11eb-9be0-53fc60add61a.png">
2 parents 9edd125 + a6f6d9e commit f8490e2

20 files changed

+62
-143
lines changed

‎app/components/crate-list.hbs

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div ...attributes>
2+
{{!-- The extra div wrapper is needed for specificity issues with `margin` --}}
3+
<ol local-class="list">
4+
{{#if @exactMatch}}
5+
<li local-class="row exact-match">
6+
<LinkTo @route="crate" @model={{@exactMatch}}>
7+
<h1>Exact Match</h1>
8+
</LinkTo>
9+
<CrateRow @crate={{@exactMatch}} data-test-crate-row="exact-match" />
10+
</li>
11+
{{/if}}
12+
13+
{{#each @crates as |crate index|}}
14+
<li local-class="row">
15+
<CrateRow @crate={{crate}} data-test-crate-row={{index}} />
16+
</li>
17+
{{/each}}
18+
</ol>
19+
</div>

‎app/components/crate-list.module.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.list {
2+
margin: 0;
3+
padding: 0;
4+
list-style: none;
5+
}
6+
7+
.row {
8+
&:not(:last-child) {
9+
margin-bottom: 15px;
10+
}
11+
}
12+
13+
.exact-match:not(:last-child) {
14+
margin-bottom: 60px;
15+
16+
h1 {
17+
margin-top: 0;
18+
color: green
19+
}
20+
}

‎app/components/crate-row.module.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
.crate-row {
2+
--shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
3+
24
display: flex;
35
flex-wrap: wrap;
6+
padding: 15px 25px;
7+
background-color: white;
8+
border-radius: 5px;
9+
box-shadow: var(--shadow);
10+
transition: all 300ms;
411
}
512

613
.description-box {

‎app/controllers/search.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,12 @@ export default class SearchController extends Controller {
6161
return yield this.store.query('crate', { all_keywords, page, per_page, q, sort });
6262
}).restartable())
6363
dataTask;
64+
65+
get exactMatch() {
66+
return this.model.find(it => it.exact_match);
67+
}
68+
69+
get otherCrates() {
70+
return this.model.filter(it => !it.exact_match);
71+
}
6472
}

‎app/styles/category/index.module.css

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,5 @@
4343
}
4444

4545
.list {
46-
background-color: white;
47-
padding: 0 20px;
4846
margin-bottom: 20px;
4947
}
50-
51-
.row {
52-
padding: 20px 0;
53-
border-bottom: 2px solid var(--gray-border);
54-
55-
&:last-of-type {
56-
border: none;
57-
}
58-
}

‎app/styles/crates.module.css

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -42,16 +42,5 @@
4242
}
4343

4444
.list {
45-
background-color: white;
46-
padding: 0 20px;
4745
margin-bottom: 20px;
4846
}
49-
50-
.row {
51-
border-bottom: 2px solid var(--gray-border);
52-
padding: 20px 0;
53-
54-
&:last-of-type {
55-
border: none;
56-
}
57-
}

‎app/styles/keyword/index.module.css

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,5 @@
1010
}
1111

1212
.list {
13-
background-color: white;
14-
padding: 0 20px;
1513
margin-bottom: 20px;
1614
}
17-
18-
.row {
19-
padding: 20px 0;
20-
border-bottom: 2px solid var(--gray-border);
21-
22-
&:last-of-type {
23-
border: none;
24-
}
25-
}

‎app/styles/me/crates.module.css

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,5 @@
1010
}
1111

1212
.list {
13-
background-color: white;
14-
padding: 0 20px;
1513
margin-bottom: 20px;
1614
}
17-
18-
.row {
19-
padding: 20px 0;
20-
border-bottom: 2px solid var(--gray-border);
21-
22-
&:last-of-type {
23-
border: none;
24-
}
25-
}

‎app/styles/me/following.module.css

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,5 @@
1010
}
1111

1212
.list {
13-
background-color: white;
14-
padding: 0 20px;
1513
margin-bottom: 20px;
1614
}
17-
18-
.row {
19-
padding: 20px 0;
20-
border-bottom: 2px solid var(--gray-border);
21-
22-
&:last-of-type {
23-
border: none;
24-
}
25-
}

‎app/styles/search.module.css

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,9 @@
1010
}
1111

1212
.list {
13-
background-color: white;
14-
padding: 0 20px;
1513
margin-bottom: 20px;
1614
}
1715

18-
.row {
19-
padding: 20px 0;
20-
}
21-
22-
.exact-match {
23-
margin-bottom: 40px;
24-
border-bottom: solid beige;
25-
26-
h1 {
27-
color: green
28-
}
29-
}
30-
3116
.try-again-button {
3217
composes: yellow-button from './shared/buttons.module.css';
3318
align-self: center;

‎app/styles/team.module.css

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,5 @@
3838
}
3939

4040
.list {
41-
background-color: white;
42-
padding: 0 20px;
4341
margin-bottom: 20px;
4442
}
45-
46-
.row {
47-
padding: 20px 0;
48-
border-bottom: 2px solid var(--gray-border);
49-
50-
&:last-of-type {
51-
border: none;
52-
}
53-
}

‎app/styles/user.module.css

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,5 @@
1919
}
2020

2121
.list {
22-
background-color: white;
23-
padding: 0 20px;
2422
margin-bottom: 20px;
2523
}
26-
27-
.row {
28-
padding: 20px 0;
29-
border-bottom: 2px solid var(--gray-border);
30-
31-
&:last-of-type {
32-
border: none;
33-
}
34-
}

‎app/templates/category/index.hbs

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,6 @@
5454
</div>
5555
</div>
5656

57-
<div local-class="list">
58-
{{#each this.model as |crate|}}
59-
<CrateRow @crate={{crate}} local-class="row" />
60-
{{/each}}
61-
</div>
57+
<CrateList @crates={{this.model}} local-class="list" />
6258

6359
<Pagination @pagination={{this.pagination}} />

‎app/templates/crates.hbs

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,6 @@
3737
</div>
3838
</div>
3939

40-
<div local-class="list">
41-
{{#each this.model as |crate index|}}
42-
<CrateRow @crate={{crate}} local-class="row" data-test-crate-row={{index}} />
43-
{{/each}}
44-
</div>
40+
<CrateList @crates={{this.model}} local-class="list" />
4541

4642
<Pagination @pagination={{this.pagination}} />

‎app/templates/keyword/index.hbs

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,6 @@
2222
</div>
2323
</div>
2424

25-
<div local-class="list">
26-
{{#each this.model as |crate|}}
27-
<CrateRow @crate={{crate}} local-class="row" />
28-
{{/each}}
29-
</div>
25+
<CrateList @crates={{this.model}} local-class="list" />
3026

3127
<Pagination @pagination={{this.pagination}} />

‎app/templates/me/crates.hbs

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,6 @@
2323
</div>
2424
</div>
2525

26-
<div local-class="list">
27-
{{#each this.model as |crate|}}
28-
<CrateRow @crate={{crate}} local-class="row" />
29-
{{/each}}
30-
</div>
26+
<CrateList @crates={{this.model}} local-class="list" />
3127

3228
<Pagination @pagination={{this.pagination}} />

‎app/templates/me/following.hbs

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,6 @@
1818
</div>
1919
</div>
2020

21-
<div local-class="list">
22-
{{#each this.model as |crate|}}
23-
<CrateRow @crate={{crate}} local-class="row" />
24-
{{/each}}
25-
</div>
21+
<CrateList @crates={{this.model}} local-class="list" />
2622

2723
<Pagination @pagination={{this.pagination}} />

‎app/templates/search.hbs

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -47,22 +47,7 @@
4747
</div>
4848
</div>
4949

50-
<div local-class="list">
51-
{{#each this.model as |crate index|}}
52-
{{#if crate.exact_match}}
53-
<div local-class="exact-match">
54-
<LinkTo @route="crate" @model={{crate}}>
55-
<h1>Exact Match</h1>
56-
</LinkTo>
57-
<CrateRow @crate={{crate}} local-class="row" data-test-crate-row={{index}} />
58-
</div>
59-
{{else}}
60-
<div>
61-
<CrateRow @crate={{crate}} local-class="row" data-test-crate-row={{index}} />
62-
</div>
63-
{{/if}}
64-
{{/each}}
65-
</div>
50+
<CrateList @exactMatch={{this.exactMatch}} @crates={{this.otherCrates}} local-class="list" />
6651

6752
<Pagination @pagination={{this.pagination}} />
6853
{{else}}

‎app/templates/team.hbs

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,6 @@
3434
</div>
3535
</div>
3636

37-
<div local-class="list">
38-
{{#each this.model.crates as |crate|}}
39-
<CrateRow @crate={{crate}} local-class="row" />
40-
{{/each}}
41-
</div>
37+
<CrateList @crates={{this.model.crates}} local-class="list" />
4238

4339
<Pagination @pagination={{this.pagination}} />

‎app/templates/user.hbs

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,6 @@
2727
</div>
2828
</div>
2929

30-
<div local-class="list">
31-
{{#each this.model.crates as |crate|}}
32-
<CrateRow @crate={{crate}} local-class="row" />
33-
{{/each}}
34-
</div>
30+
<CrateList @crates={{this.model.crates}} local-class="list" />
3531

3632
<Pagination @pagination={{this.pagination}} />

0 commit comments

Comments
 (0)