WIP Details pane + contributor profiles

Adds a 3-pane layout option for showing details, as well as a dashboard
sub-route for showing contributor details in the new details pane.

app/components/contributor-list/component.js

@@ -1,20 +1,18 @@
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';
 
 export default Component.extend({
 
+  router: service(),
+
   tagName: 'table',
   classNames: 'contributor-list',
   selectedContributor: null,
 
   actions: {
 
-    toggleContributorInfo(contributor) {
-      if (contributor.showMetadata) {
-        contributor.set('showMetadata', false);
-      } else {
-        this.contributorList.setEach('showMetadata', false);
-        contributor.set('showMetadata', true);
-      }
+    openContributorDetails(contributor) {
+      this.router.transitionTo('dashboard.contributors.show', contributor);
     }
 
   }

app/components/contributor-list/template.hbs

@@ -1,6 +1,6 @@
 <tbody>
   {{#each contributorList as |c|}}
-    <tr role="button" class={{if (is-current-user c.contributor) "current-user"}} {{action "toggleContributorInfo" c}}>
+    <tr role="button" class={{if (is-current-user c.contributor) "current-user"}} {{action "openContributorDetails" c.contributor}}>
       <td class="person">
         {{user-avatar contributor=c.contributor}} {{c.contributor.name}}
       </td>
@@ -15,25 +15,5 @@
         <span class="symbol">₭S</span>
       </td>
     </tr>
-    <tr class="metadata {{if (is-current-user c.contributor) "current-user"}} {{if c.showMetadata "visible"}}">
-      <td colspan="2">
-        <ul>
-          <li>
-            <a href="https://rinkeby.etherscan.io/address/{{c.contributor.account}}" target="_blank" rel="noopener">Inspect Ethereum transactions</a>
-          </li>
-          {{#if c.contributor.ipfsHash}}
-            <li>
-              <a href="https://ipfs.io/ipfs/{{c.contributor.ipfsHash}}" target="_blank" rel="noopener">Inspect IPFS profile</a>
-            </li>
-          {{/if}}
-          <li>
-            {{link-to "Edit profile" "contributors.edit" c.contributor.id}}
-          </li>
-        </ul>
-        {{#if c.showMetadata}}
-          <pre>{{c.contributor.ipfsData}}</pre>
-        {{/if}}
-      </td>
-    </tr>
   {{/each}}
 </tbody>

app/components/user-avatar/component.js

@@ -1,11 +1,30 @@
 import Component from '@ember/component';
 import { alias } from '@ember/object/computed';
+import { computed } from '@ember/object';
+
+const SIZES = {
+  'small':  '128', // pixels
+  'medium': '256',
+  'large':  '512'
+}
 
 export default Component.extend({
   contributor: null,
   tagName: 'img',
   classNames: ['avatar'],
+  classNameBindings: ['size'],
   attributeBindings: ['src', 'title'],
-  src: alias('contributor.avatarURL'),
-  title: alias('contributor.name')
+  size: 'small',
+
+  src: alias('avatarURL'),
+  title: alias('contributor.name'),
+
+  avatarURL: computed('contributor.github_uid', 'size', function() {
+    const github_uid = this.contributor.github_uid;
+
+    if (github_uid) {
+      return `https://avatars2.githubusercontent.com/u/${github_uid}?v=3&s=${SIZES[this.size]}`;
+    }
+  })
+
 });