diff --git a/app/controllers/crates.js b/app/controllers/crates.js
index dbfc0e8ff74..2b0a00947a6 100644
--- a/app/controllers/crates.js
+++ b/app/controllers/crates.js
@@ -25,4 +25,16 @@ export default Controller.extend(PaginationMixin, {
return 'Alphabetical';
}
}),
+
+ resultCount: computed('per_page', function() {
+ if (this.per_page === 10) {
+ return 10;
+ } else if (this.per_page === 20) {
+ return 20;
+ } else if (this.per_page === 50) {
+ return 50;
+ } else {
+ return 100;
+ }
+ }),
});
diff --git a/app/routes/crates.js b/app/routes/crates.js
index 17f7362a51f..aa11b7cec5f 100644
--- a/app/routes/crates.js
+++ b/app/routes/crates.js
@@ -5,6 +5,7 @@ export default Route.extend({
letter: { refreshModel: true },
page: { refreshModel: true },
sort: { refreshModel: true },
+ per_page: { refreshModel: true },
},
model(params) {
diff --git a/app/styles/crate.scss b/app/styles/crate.scss
index d8c3505a186..b07e5e7dd2f 100644
--- a/app/styles/crate.scss
+++ b/app/styles/crate.scss
@@ -92,16 +92,26 @@
width: 100%;
@include display-flex;
@include justify-content(space-between);
+ align-items: center;
margin-bottom: 25px;
.cur, .total { color: $main-color; font-weight: bold; }
- .dropdown-container { font-size: 85%; }
- a.dropdown {
- background-color: $main-bg-dark;
- padding: 10px;
- display: inline-block;
- @include border-radius(5px);
+ .dropdown-section {
+ @include display-flex;
+ @include justify-content(space-between);
+
+ .dropdown-container { font-size: 85%; }
+ a.dropdown {
+ background-color: $main-bg-dark;
+ padding: 10px;
+ display: inline-block;
+ @include border-radius(5px);
+ }
+
+ .per_page {
+ margin-left: 10px;
+ }
}
}
diff --git a/app/templates/crates.hbs b/app/templates/crates.hbs
index 1b63ff233ff..e3572eb06d8 100644
--- a/app/templates/crates.hbs
+++ b/app/templates/crates.hbs
@@ -34,39 +34,74 @@
-
-
Sort by
+
+
+ Sort by
- {{#rl-dropdown-container class="dropdown-container"}}
- {{#rl-dropdown-toggle tagName="a" class="dropdown" data-test-current-order=true}}
- {{svg-jar "sort"}}
- {{ currentSortBy }}
-
- {{/rl-dropdown-toggle}}
+ {{#rl-dropdown-container class="dropdown-container"}}
+ {{#rl-dropdown-toggle tagName="a" class="dropdown" data-test-current-order=true}}
+ {{svg-jar "sort"}}
+ {{ currentSortBy }}
+
+ {{/rl-dropdown-toggle}}
- {{#rl-dropdown tagName="ul" class="dropdown" closeOnChildClick="a:link"}}
-
- {{#link-to (query-params page=1 sort="alpha")}}
- Alphabetical
- {{/link-to}}
-
-
- {{#link-to (query-params page=1 sort="downloads")}}
- All-Time Downloads
- {{/link-to}}
-
-
- {{#link-to (query-params page=1 sort="recent-downloads")}}
- Recent Downloads
- {{/link-to}}
-
-
- {{#link-to (query-params page=1 sort="recent-updates")}}
- Recent Updates
- {{/link-to}}
-
- {{/rl-dropdown}}
- {{/rl-dropdown-container}}
+ {{#rl-dropdown tagName="ul" class="dropdown" closeOnChildClick="a:link"}}
+
+ {{#link-to (query-params page=1 sort="alpha")}}
+ Alphabetical
+ {{/link-to}}
+
+
+ {{#link-to (query-params page=1 sort="downloads")}}
+ All-Time Downloads
+ {{/link-to}}
+
+
+ {{#link-to (query-params page=1 sort="recent-downloads")}}
+ Recent Downloads
+ {{/link-to}}
+
+
+ {{#link-to (query-params page=1 sort="recent-updates")}}
+ Recent Updates
+ {{/link-to}}
+
+ {{/rl-dropdown}}
+ {{/rl-dropdown-container}}
+
+
+ Display results
+
+ {{#rl-dropdown-container class="dropdown-container"}}
+ {{#rl-dropdown-toggle tagName="a" class="dropdown" data-test-current-count=true}}
+ {{ resultCount }}
+
+ {{/rl-dropdown-toggle}}
+
+ {{#rl-dropdown tagName="ul" class="dropdown" closeOnChildClick="a:link"}}
+
+ {{#link-to (query-params page=1 per_page=10)}}
+ 10
+ {{/link-to}}
+
+
+ {{#link-to (query-params page=1 per_page=20)}}
+ 20
+ {{/link-to}}
+
+
+ {{#link-to (query-params page=1 per_page=50)}}
+ 50
+ {{/link-to}}
+
+
+ {{#link-to (query-params page=1 per_page=100)}}
+ 100
+ {{/link-to}}
+
+ {{/rl-dropdown}}
+ {{/rl-dropdown-container}}
+
diff --git a/tests/acceptance/crates-test.js b/tests/acceptance/crates-test.js
index ecb6b95c417..b2d7ccf7b72 100644
--- a/tests/acceptance/crates-test.js
+++ b/tests/acceptance/crates-test.js
@@ -80,6 +80,13 @@ module('Acceptance | crates page', function(hooks) {
assert.dom('[data-test-crates-sort] [data-test-current-order]').hasText('Alphabetical');
});
+ test('crates default count is 10', async function(assert) {
+ this.server.loadFixtures();
+
+ await visit('/crates');
+ assert.dom('[data-test-crates-count] [data-test-current-count]').hasText('10');
+ });
+
test('downloads appears for each crate on crate list', async function(assert) {
this.server.loadFixtures();