diff --git a/app/components/contributor-list/component.js b/app/components/contributor-list/component.js new file mode 100644 index 0000000..f515211 --- /dev/null +++ b/app/components/contributor-list/component.js @@ -0,0 +1,8 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + + tagName: 'table', + classNames: 'contributor-list' + +}); diff --git a/app/components/contributor-list/template.hbs b/app/components/contributor-list/template.hbs new file mode 100644 index 0000000..fad203d --- /dev/null +++ b/app/components/contributor-list/template.hbs @@ -0,0 +1,14 @@ + + {{#each contributors as |contributor|}} + + + + {{contributor.github_username}} + + + {{contributor.kredits}} + ₭S + + + {{/each}} + diff --git a/app/models/contributor.js b/app/models/contributor.js new file mode 100644 index 0000000..3402308 --- /dev/null +++ b/app/models/contributor.js @@ -0,0 +1,13 @@ +import Ember from 'ember'; + +export default Ember.Object.extend({ + + github_username: null, + github_uid: null, + kredits: null, + + avatarURL: function() { + return `https\:\/\/avatars2.githubusercontent.com/u/${this.get('github_uid')}?v=3&s=128`; + }.property('github_uid') + +}); diff --git a/app/routes/index.js b/app/routes/index.js index 26d9f31..10d548a 100644 --- a/app/routes/index.js +++ b/app/routes/index.js @@ -1,4 +1,29 @@ import Ember from 'ember'; +import Contributor from 'kredits-web/models/contributor'; + +let fixtures = [ + { github_username: "bumi", github_uid: "318", kredits: 18000 }, + { github_username: "galfert", github_uid: "843", kredits: 15000 }, + { github_username: "basti", github_uid: "842", kredits: 13000 }, + { github_username: "silverbucket", github_uid: "317571", kredits: 13000 }, + { github_username: "janlelis", github_uid: "111510", kredits: 12000 }, + { github_username: "gregkare", github_uid: "43297", kredits: 11000 }, + { github_username: "fsmanuel", github_uid: "54812", kredits: 8000 }, + { github_username: "bkero", github_uid: "128776", kredits: 7000 }, + // { github_username: "arzu", github_uid: "", kredits: 4000 } +]; export default Ember.Route.extend({ + + model() { + let contributors = []; + fixtures.forEach(obj => { + contributors.pushObject(Contributor.create(obj)); + }); + + return { + contributors: contributors + }; + } + }); diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss index f4f9a98..2a738f3 100644 --- a/app/styles/_layout.scss +++ b/app/styles/_layout.scss @@ -1,23 +1,27 @@ -body { -} - section { @include outer-container; margin-top: 6rem; + margin-bottom: 8rem; @include media($mobile) { - margin-top: 3rem; + margin-top: 2rem; + margin-bottom: 5rem; } header { - @include span-columns(10); - @include shift(1); + @include span-columns(12); + padding-bottom: 3rem; text-align: center; // background-color: purple; @include media($mobile) { @include span-columns(10); @include shift(1); + padding-bottom: 2rem; + } + + div.content { + @include span-columns(12); } } } diff --git a/app/styles/app.scss b/app/styles/app.scss index c89c7ff..8bf9237 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -19,11 +19,12 @@ $font-family-sans: 'Open Sans', sans-serif; body { - font-family: $font-family-sans; - font-size: 16px; - color: #fff; background-image: url('/img/bg.jpg'); background-repeat: none; + font-family: $font-family-sans; + font-size: 16px; + font-weight: 300; + color: #fff; } @media screen and (min-width: 900px) { @@ -32,23 +33,20 @@ body { } } -h1, h2, h3, h4, h5 { - font-weight: normal; - font-size: 1rem; -} - -input, button { +h1, h2, h3, h4, h5, input, button { font-family: $font-family-sans; font-size: 1rem; + font-weight: 300; } section { h2 { font-size: 2.8rem; - font-weight: 300; color: lightblue; @include media($mobile) { font-size: 2rem; } } } + +@import "components/contributor-list"; diff --git a/app/styles/components/_contributor-list.scss b/app/styles/components/_contributor-list.scss new file mode 100644 index 0000000..d1efc51 --- /dev/null +++ b/app/styles/components/_contributor-list.scss @@ -0,0 +1,39 @@ +table.contributor-list { + width: 100%; + border-collapse: collapse; + + tr { + border-bottom: 1px solid rgba(255,255,255,0.2); + &:first-of-type { + border-top: 1px solid rgba(255,255,255,0.2); + } + } + + td { + padding: 1.2rem; + line-height: 2rem; + + background-color: rgba(255,255,255,0.1); + &.person { + text-align: left; + font-size: 1.4rem; + img.avatar { + width: 2rem; + height: 2rem; + vertical-align: middle; + margin-right: 0.2rem; + border-radius: 1rem; + } + } + &.kredits { + text-align: right; + .amount { + font-size: 1.4rem; + } + .symbol { + font-size: 1rem; + padding-left: 0.2rem; + } + } + } +} diff --git a/app/templates/index.hbs b/app/templates/index.hbs index 1b6ebf0..c47d9b2 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -1,7 +1,11 @@ -
+

Kosmos Contributors

+
+ {{contributor-list contributors=model.contributors}} +
+
diff --git a/tests/integration/components/contributor-list/component-test.js b/tests/integration/components/contributor-list/component-test.js new file mode 100644 index 0000000..298042c --- /dev/null +++ b/tests/integration/components/contributor-list/component-test.js @@ -0,0 +1,16 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('contributor-list', 'Integration | Component | contributor list', { + integration: true +}); + +test('it renders', function(assert) { + + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{contributor-list}}`); + + assert.equal(this.$().text().trim(), ''); +}); diff --git a/tests/unit/models/contributor-test.js b/tests/unit/models/contributor-test.js new file mode 100644 index 0000000..2a7dbe4 --- /dev/null +++ b/tests/unit/models/contributor-test.js @@ -0,0 +1,9 @@ +import { moduleFor, test } from 'ember-qunit'; + +moduleFor('model:contributor', 'Unit | Model | contributor'); + +test('avatarURL returns correct URL', function(assert) { + let model = this.subject(); + model.set('github_uid', '318'); + assert.equal(model.get('avatarURL'), 'https://avatars2.githubusercontent.com/u/318?v=3&s=128'); +});