Add contributor list design and wiring

app/components/contributor-list/component.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+  tagName: 'table',
+  classNames: 'contributor-list'
+
+});

app/components/contributor-list/template.hbs

@@ -0,0 +1,14 @@
+<tbody>
+  {{#each contributors as |contributor|}}
+    <tr>
+      <td class="person">
+        <img class="avatar" src={{contributor.avatarURL}}>
+        {{contributor.github_username}}
+      </td>
+      <td class="kredits">
+        <span class="amount">{{contributor.kredits}}</span>
+        <span class="symbol">₭S</span>
+      </td>
+    </tr>
+  {{/each}}
+</tbody>

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')
+
+});

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

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 span-columns(12);
-    @include shift(1);
+    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);
     }
   }
 }

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 {
+h1, h2, h3, h4, h5, input, button {
-  font-weight: normal;
-  font-size: 1rem;
-}
-
-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";

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;
+      }
+    }
+  }
+}

app/templates/index.hbs

@@ -1,7 +1,11 @@
-<section id="content">
+<section id="contributors">
 
   <header>
     <h2>Kosmos Contributors</h2>
   </header>
 
+  <div class="content">
+    {{contributor-list contributors=model.contributors}}
+  </div>
+
 </section>

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

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');
+});