Skip to content

Commit 6acb22a

Browse files
borsbors
committed
Auto merge of #2104 - Turbo87:pagination, r=locks
Extract shared `Pagination` component Our pagination code was pretty much the same everywhere, so we might as well extract it into a shared component to simplify the styling and have a consistent implementation everywhere that is a11y-compliant. r? @locks
2 parents b476ef3 + 0aa0bcb commit 6acb22a

File tree

12 files changed

+28
-129
lines changed

12 files changed

+28
-129
lines changed

‎app/components/pagination.hbs

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<nav class='pagination' aria-label="Pagination navigation">
2+
<LinkTo @query={{hash page=@prevPage}} class="prev" @rel="prev" @title="previous page" data-test-pagination-prev>
3+
{{svg-jar "left-pag"}}
4+
</LinkTo>
5+
<ol>
6+
{{#each @pages as |page|}}
7+
<li>
8+
<LinkTo @query={{hash page=page}} @title={{concat "Go to page " page}}>
9+
{{ page }}
10+
</LinkTo>
11+
</li>
12+
{{/each}}
13+
</ol>
14+
<LinkTo @query={{hash page=@nextPage}} class="next" @rel="next" @title="next page" data-test-pagination-next>
15+
{{svg-jar "right-pag"}}
16+
</LinkTo>
17+
</nav>

‎app/templates/categories.hbs

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,4 @@
5959
{{/each}}
6060
</div>
6161

62-
<div class='pagination'>
63-
<LinkTo @query={{hash page=this.prevPage}} class="prev" @rel="prev" @title="previous page">
64-
{{svg-jar "left-pag"}}
65-
</LinkTo>
66-
{{#each this.pages as |page|}}
67-
<LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
68-
{{/each}}
69-
<LinkTo @query={{hash page=this.nextPage}} class="next" @rel="next" @title="next page">
70-
{{svg-jar "right-pag"}}
71-
</LinkTo>
72-
</div>
62+
<Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />

‎app/templates/category/index.hbs

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -88,14 +88,4 @@
8888
{{/each}}
8989
</div>
9090

91-
<div class='pagination'>
92-
<LinkTo @query={{hash page=this.prevPage}} class="prev" @rel="prev" @title="previous page">
93-
{{svg-jar "left-pag"}}
94-
</LinkTo>
95-
{{#each this.pages as |page|}}
96-
<LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
97-
{{/each}}
98-
<LinkTo @query={{hash page=this.nextPage}} class="next" @rel="next" @title="next page">
99-
{{svg-jar "right-pag"}}
100-
</LinkTo>
101-
</div>
91+
<Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />

‎app/templates/crate/reverse-dependencies.hbs

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,4 @@
2727
{{/each}}
2828
</div>
2929

30-
<div class='pagination'>
31-
<LinkTo @query={{hash page=this.prevPage}} class="prev">
32-
{{svg-jar "left-pag"}}
33-
</LinkTo>
34-
{{#each this.pages as |page|}}
35-
<LinkTo @query={{hash page=page}}>
36-
{{ page }}
37-
</LinkTo>
38-
{{/each}}
39-
<LinkTo @query={{hash page=this.nextPage}} class="next">
40-
{{svg-jar "right-pag"}}
41-
</LinkTo>
42-
</div>
30+
<Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />

‎app/templates/crates.hbs

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -76,20 +76,4 @@
7676
{{/each}}
7777
</div>
7878

79-
<nav class='pagination' aria-label="Pagination navigation">
80-
<LinkTo @query={{hash page=this.prevPage}} class="prev" @rel="prev" @title="previous page" data-test-pagination-prev>
81-
{{svg-jar "left-pag"}}
82-
</LinkTo>
83-
<ol>
84-
{{#each this.pages as |page|}}
85-
<li>
86-
<LinkTo @query={{hash page=page}} @title={{concat "Go to page " page}}>
87-
{{ page }}
88-
</LinkTo>
89-
</li>
90-
{{/each}}
91-
</ol>
92-
<LinkTo @query={{hash page=this.nextPage}} class="next" @rel="next" @title="next page" data-test-pagination-next>
93-
{{svg-jar "right-pag"}}
94-
</LinkTo>
95-
</nav>
79+
<Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />

‎app/templates/keyword/index.hbs

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,4 @@
5656
{{/each}}
5757
</div>
5858

59-
<div class='pagination'>
60-
<LinkTo @query={{hash page=this.prevPage}} class="prev" @rel="prev" @title="previous page">
61-
{{svg-jar "left-pag"}}
62-
</LinkTo>
63-
{{#each this.pages as |page|}}
64-
<LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
65-
{{/each}}
66-
<LinkTo @query={{hash page=this.nextPage}} class="next" @rel="next" @title="next page">
67-
{{svg-jar "right-pag"}}
68-
</LinkTo>
69-
</div>
59+
<Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />

‎app/templates/keywords.hbs

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,4 @@
5252
{{/each}}
5353
</div>
5454

55-
<div class='pagination'>
56-
<LinkTo @query={{hash page=this.prevPage}} class="prev" @rel="prev" @title="previous page">
57-
{{svg-jar "left-pag"}}
58-
</LinkTo>
59-
{{#each this.pages as |page|}}
60-
<LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
61-
{{/each}}
62-
<LinkTo @query={{hash page=this.nextPage}} class="next" @rel="next" @title="next page">
63-
{{svg-jar "right-pag"}}
64-
</LinkTo>
65-
</div>
55+
<Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />

‎app/templates/me/crates.hbs

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,4 @@
5757
{{/each}}
5858
</div>
5959

60-
<div class='pagination'>
61-
<LinkTo @query={{hash page=this.prevPage}} class="prev" @rel="prev" @title="previous page">
62-
{{svg-jar "left-pag"}}
63-
</LinkTo>
64-
{{#each this.pages as |page|}}
65-
<LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
66-
{{/each}}
67-
<LinkTo @query={{hash page=this.nextPage}} class="next" @rel="next" @title="next page">
68-
{{svg-jar "right-pag"}}
69-
</LinkTo>
70-
</div>
60+
<Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />

‎app/templates/me/following.hbs

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,4 @@
4545
{{/each}}
4646
</div>
4747

48-
<div class='pagination'>
49-
<LinkTo @query={{hash page=this.prevPage}} class="prev" @rel="prev" @title="previous page">
50-
{{svg-jar "left-pag"}}
51-
</LinkTo>
52-
{{#each this.pages as |page|}}
53-
<LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
54-
{{/each}}
55-
<LinkTo @query={{hash page=this.nextPage}} class="next" @rel="next" @title="next page">
56-
{{svg-jar "right-pag"}}
57-
</LinkTo>
58-
</div>
48+
<Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />

‎app/templates/search.hbs

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -79,17 +79,7 @@
7979
{{/each}}
8080
</div>
8181

82-
<nav class='pagination' aria-label="Pagination navigation">
83-
<LinkTo @query={{hash page=this.prevPage}} class="prev" rel="prev" title="previous page" data-test-pagination-prev>
84-
{{svg-jar "left-pag"}}
85-
</LinkTo>
86-
{{#each this.pages as |page|}}
87-
<LinkTo @query={{hash page=page}} @title={{concat "Go to page " page}}>{{ page }}</LinkTo>
88-
{{/each}}
89-
<LinkTo @query={{hash page=this.nextPage}} class="next" rel="next" title="next page" data-test-pagination-next>
90-
{{svg-jar "right-pag"}}
91-
</LinkTo>
92-
</nav>
82+
<Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />
9383
{{else}}
9484
<div id="no-results">
9585
<h2>0 crates found. <a href='https://doc.rust-lang.org/cargo/getting-started/'>Get started</a> and create your own.</h2>

‎app/templates/team.hbs

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -71,16 +71,6 @@
7171
{{/each}}
7272
</div>
7373

74-
<div class='pagination'>
75-
<LinkTo @query={{hash page=this.prevPage}} class="prev" @rel="prev" @title="previous page">
76-
{{svg-jar "left-pag"}}
77-
</LinkTo>
78-
{{#each this.pages as |page|}}
79-
<LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
80-
{{/each}}
81-
<LinkTo @query={{hash page=this.nextPage}} class="next" @rel="next" @title="next page">
82-
{{svg-jar "right-pag"}}
83-
</LinkTo>
84-
</div>
74+
<Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />
8575
</div>
8676
</div>

‎app/templates/user.hbs

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -62,16 +62,6 @@
6262
{{/each}}
6363
</div>
6464

65-
<div class='pagination'>
66-
<LinkTo @query={{hash page=this.prevPage}} class="prev" @rel="prev" @title="previous page">
67-
{{svg-jar "left-pag"}}
68-
</LinkTo>
69-
{{#each this.pages as |page|}}
70-
<LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
71-
{{/each}}
72-
<LinkTo @query={{hash page=this.nextPage}} class="next" @rel="next" @title="next page">
73-
{{svg-jar "right-pag"}}
74-
</LinkTo>
75-
</div>
65+
<Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />
7666
</div>
7767
</div>

0 commit comments

Comments
 (0)