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 +
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();